Handheld Conference 2013

An amazing conference, in a beautiful venue, with fantastic speakers and extra entertainment as bonus! Craig Lockwood created something magnificent today — and then told us there won’t be another Handheld next year! Let’s hope he’s just changing focus rather than stopping organising conferences.

Handheld this year was two conferences in one — the previous night's mini event and the much larger full day event. The main conference was focused mainly on responsive web design — and the implications that brings to the design process and to the implementation of the sites. Last year was a mix of both native and web experiences, and though we lost the native side, the web side was very strong — with speakers being the authorities in their areas (the people who wrote the books that everyone should read).

Some highlights before you dive in to my notes below:

• Hearing icon design tips from Jon Hicks, the designer of the Firefox logo, Skype emoticons and many other big name logos
• Learning about improving business participation in the design process from Andy Clarke & Mark Boulton: mobile and responsive design has big impacts on the design process that extend not just to the artifacts (comps, wireframes, etc) but also on the communication and interaction between the business, the designers and the developers.
• "measure your success in decades" — Jeremy Keith on web design
• "XML is like violence: if it doesn't get you what you want, you’re not using enough of it" — Graham Lee
• and, of course, Ling Valentine of Ling's Cars (if you haven't seen her website before, you must look now!), appearing on stage as a Dalek!

If you like your information visual, Luke Murphy from Ubelly wrote up some beautiful sketchnotes of the main conference.

intro + guess who

Syd Lawrence @sydlawrence, We Make Awesome Sh

• over 1,000 people in audience
• rickrolled the audience using twilio, node & pusher!
• everybody sent SMSs in with their seat column number
• then made calls back to 8 people in each quarter of the audience — playing 4-channel audio across the auditorium
• (unfortunately all our lanyards had been mixed up and only one person received the rickrolling call… but it was a nice idea)

The Long Web

Jeremy Keith @adactio

• 1907: Francis O’Neill, chief of police in chicago, noted down 1001 Irish tunes - The Dance Music of Ireland (“the book”)
• 1991: ABC musical format invented
  • text file, metadata at top, notes at the bottom
• mid-90s: Jeremy launched http://thesession.org
  • started by self-publishing a song a week
  • but soon needed other people to contribute tunes
  • 2001: allowed other people to submit tunes in ABC — Jeremy would then convert to sheet music & sound files
• site then languished for 10 years — still being used but Jeremy had no time to improve it
• finally got around to rebuilding the site in 2012
• interesting to see what had changed in web development in a decade
• biggest change: environment is no longer a desktop/laptop computer
• open device labs
  • Jason Grigsby tried to set one up properly in Portland with lawyers, insurance, etc. but got slowed by red tape
  • Jeremy just started with a tweet inviting people in to the Clearleft offices to test - then people started donating devices
• mobile first: mobile forces you to prioritise
• can also think about content first (or task first)
• Jeremy likes to start URL first
  • forget screens completely
  • think about structure of URLs
  • almost like doing an API design
• don’t think about the layout first — instead think about the individual pieces of content (pattern primer)
  • forces you to be very modular in your CSS
  • all the pieces must be able to work in any bit of your page
• if you’re thinking content first: then navigation comes second
• thesession.org does navigation by having navigation at bottom of the page — revealed with a simple hyperlink to the bottom (with a hyperlink back to top under the nav)
  • (capable browsers with more space have CSS to move it to the top)
• the logo is progressively enhanced too
  • full CSS support shows stitching, shadows, etc
  • less support means that the text & colour is still there but the details go away
  • error handling model — browser will just ignore stuff it doesn’t understand
• other progressive enhancements
  • escalators (enhanced stairs)
  • moving walkways (enhanced floor)
  • electric toothbrush (enhanced toothbrush…)
  • these rely on electricity to enhance but would still work without (kind of…)
• use javascript but don’t rely on it
• Jake Archibald (@jaffathecake): every user is a non-javascript user while the page is loading
• Andy Hume: progressive enhancement more about dealing with things failing rather than things not available
• don’t merge the stack levels — use javascript to enhance the HTML, not replace it
• on thesession.org have an ABC to sheet music form
  • by default submits a form that returns a GIF
  • with javascript, uses a JS lib to turn ABC into inline SVG
• similarly sparklines: previously used Google static charts
  • but google have deprecated the service and will be shutting it down in 2015
• instead generating sparklines using SVG with contained javascript
  • same SVG file, with different query parameters for data
  • could also put CSS (including media queries) in the SVG
• but SVG sparklines were slowing down the page load
  • so used conditional loading
• watch out for script loading in middle of page
  • especially third parties
  • the loading of your page stops until that script has finished loading
  • if it’s a third party script, you’re now dependent on a third party server to finish loading your page
  • e.g. if it’s twitter and the page is loaded from China, then your page will never finish loading… (twitter is blocked)
• “measure your success in decades”
  • the inventor of CSS put a bet on to say that HTML would be around for 50 years
  • he’s recently upped his bet to 500 years
• http://futurefriend.ly — the best way to work on future devices is to be backwards-compatible

Bruce Lawson on guitar

Bruce Lawson (@brucel) usually has a speaking role as Opera’s developer advocate, but today he taught us about HTML through song! The first, “like a rounded corner”, bemoaned the life of a CSS developer struggling with making his site lovely for iPhones:

Rounded Corner - Handheld 2013 from Besquare on Vimeo.

…the second was an ode to HTML5 to the tune of Living Doll (let's hope the video goes up for this soon too!):

• it’s so much better than five…
• never completing, flash defeating, living standard :-)

Living Standard - Handheld 2013 from Besquare on Vimeo.

Icon Design Process

Jon Hicks @hicksdesign

Jon was co-designer of the Firefox logo

• single icon files -> sprite sheets -> icon fonts
• less http requests, small size, scalable for different resolutions & sizes
• accessibility issues
  • can use unicode private use area to prevent reading out
  • but might also need to add an invisible span if no other indication on the page
• can use opentype ligatures to replace whole words with icons
• colour?
  • Apple have created an emoji font with 128px square PNGs — works but not scalable
  • BBC Weather use different glyphs that they colour individually — when combined they make a colour image
  • can do the same with a company logo
  • Microsoft Windows 8 emoji set uses layered characters with colour information built-in — means they are completely scalable — and translates automatically from Apple emoji font
• fonts available online, e.g. pictos: 324 interface icons
• discovery phase: usually start with 16px grid but consider an odd-numbered grid for some cases (e.g. arrows)
• two kinds of icons: models (iconic, real-world) & symbolic (learnt)
• follow conventions — use what people know already
  • use google image search
  • or the noun project: with a tag search
• don’t forget local knowledge
  • owl in East is stupidity
  • bowing in Japan needs hands clasped in front — otherwise it means “I want to die”!
• boxes and arrows survey of filled vs outlined
  • found that iconic, realworld icons were recognised faster than symbolic, but outline/filled made not much difference
• differentiation: padlock, handbag, 20kg weight
  • think about adding subtle differences
• tools & styles:
  • decide size, output format
  • see all icons in context together
  • balance can change depending on context — you might want to move the icon up or down to align with the rest of the icons or text
• outputting a font
  • need to convert any rounded corners, expanded strokes etc
  • reduce anchor points as much as possible — reduces file size
  • easier to do this in Illustrator rather than Sketch
  • end up with a folder of SVG icons
  • then use font custom command line
  • glyphs app (expensive but worth it)
  • github did a blog post on settings
• access icon on page:
  • data-icon attribute
  • class=”icon-blah”
  • use aria-hidden="true" to help with screen readers
• alternatives to icon fonts:
  • all icons in an SVG file — with LESS or SASS to calculate the resulting CSS
  • makes it easy to adjust
• webcode app
  • lets you code in CSS or SVG or canvas (JS)
  • but canvas is larger file size
• further reading:
  • Brian Suda: Creating Symbol Fonts
  • Jon Hicks: Icon Handbook

an open letter to the industry from an 8 & 11 year old

Again, a brilliant intervention — video and transcript available on Vimeo (or listen below):

An Open Letter - Handheld 2013 from Besquare on Vimeo.

The Business of Responsive Web Design

Mark Boulton @markboulton

• redesigning the CERN web site
  • “next year we’re likely to make an announcement which will fundamentally change our understanding of the universe — and we want your help to make it”…
  • people wanted to know updates
  • from different perspectives — from particle physicists to random public
    • scientists want words and specifics
    • general public still want updates but need gentler explanations & pretty pictures — the pictures don’t need to mean anything or even be related to the content
    • teachers & students want updates with things to do, lesson plans etc
  • same updates need three different perspectives
  • but then you need structured content and a whole new CMS & editorial process…
• in news, story is no longer headline, subhead, image & caption
• now it’s a seed with lots of links together
• “meta data is the new art direction” @studip101
• in old-style advertising, agencies would win an account, not a project
  • take time to understand our issues, to get to know us
  • accounts involve more risk, but greater rewards and closer communication
• house of cards & netflix:
  • kevin spacey said we don’t want a pilot
  • want a longer view on development of the series, without the restriction of cramming everything in to the first episode
  • only netflix said yes…
• sometimes useful to let the client beat you up a bit for a while until they wear themselves out
  • an aspect of working on an account not a project
  • painful in the short term, but leads to better relationship & understanding
• if your process is to gradually improve fidelity over time, where is “the design”?
  • it’s not really there any more…
  • no big reveal, no final document
• marginal gains — fix small percentages all over the place
  • but you need to look across the whole system
  • e.g. cycling teams take their bedding with them to ensure a good night’s sleep
  • if you’re struggling with a particular CSS you may want to look elsewhere in the system for a small gain
• we’re breaking new ground at the moment — so it’s all hard
• but we’re leaving a legacy for the future

carefully everywhere

Brendan Dawes @brendandawes

• title comes from an e.e.cummings poem:

  as when the heart of this flower imagines
  the snow carefully everywhere descending

• film posters are data viz

  • the story of the film —> an iconic image
• symbolize and summarize
  • e.g. Ridley Scott selling Alien: “jaws in space”
• photoshop like elvis
  • originally leather jacket, streamlined, designed for compositing large images
  • now it’s like fat elvis on the toilet…
• making tools for playing with graphics
• making dynamic logos
  • flocking points with trails avoiding words (almost)
  • word made of springs with collision avoidance from several circles
• you can represent everything with numbers
• and then you can transpose those numbers into other systems
• flash was great as it was self-contained (and didn’t need to check it ran in lots of browsers…)
  • ed: we’re still waiting for good tools for interactive web design
• building an app called Kennedy
  • captures the now: weather, current headline, etc
  • you own your data — can export to visualize yourself
• happiness machine:
  • finds people saying they’re happy on twitter
  • prints out their tweet on a receipt
  • receipts are much more personal than larger piece of paper
• french new wave cinema came about ‘cos there was a 16mm camera that you could hold in your hand
  • new camera angles, new scenarios
• using sound to animate & extrude a 3D object
  • can then print it out
• data waffles: 3D printed 3D graphs

When responsive sites work as well as a chocolate iPhone

Ling Valentine @lingscars, Ling’s Cars

Pushed onto stage in a Dalek costume by Andy Clarke & Jon Hicks!

Ling then proceeded to tell us that responsive design just doesn’t cut it.

• it’s a mobile phone not a TARDIS
• Ling's Cars website makes it enjoyable to read lots of information!
• buying a car is one of the biggest decisions you can make — a car lease is a 1-3 year commitment
• good quality video, pictures, etc requires lots of bandwidth
• most car dealers have even given up on the web — they just say call us now or visit us in the flashy showroom
  • Ling relies just on her web site
• but it’s really important to satisfy all the people who start on their smartphones
• start by building up trust with them — let them see the enjoyable information and encourage them to visit the main website with more time
• mobile site is attention grabbing — different from main web site
• first link is a free car!
  • send me a PDF via email
  • and a link to remind them to check the full website later
• various games to get people to interact — then get them to start reading car deals

Crafting your Toolset

Eddie Machado @eddiemachado

• created bones (a starter theme for wordpress)
• Craig asked Eddie to build the Handheld 2013 site and use it as a case study for building a response site
• start with a design persona
  • http://aarronwalter.com/design-personas
  • visual lexicon
  • don’t forget personality traits & voice
• sketch everything and share it as much as possible
  • don’t hold out for a great reveal
  • things move much faster if you communicate
• mock up little elements
  • Sketch app is good for this
• establishing a colour theme
  • work out complementary colours: http://sassme.arc90.com
• sass structure
  • partials — grid, mixins, etc
  • modules — components
  • breakpoints — different sizes & non-media queries
• icons
  • icon fonts from http://icomoon.io
  • picking up icon using class on a span
  • SASS lets you create an array of subclasses with a for loop
  • let’s you create named classes with their unicode references easily
• using grids from gridset
• autoplay videos don’t work on touch devices
  • so used plain images for mobile
  • included video sources but in a div not a video element
  • on non-touch (desktop) devices, swapped out the div for a video element using javascript
• checking page size using http://mobitest.akamai.com/
  • also use http://tools.pingdom.com/fpt
• use a similar technique for background images on mobile
  • leave them out by default
  • add them in using javascript

Codename Prometheus

Aral Balkan @aralbalkan

http://indiephone.eu

• top 50 web properties are closed silos other than wikipedia
• indie OS + indie Cloud + indie Phone
• will be crowdfunding in 2014
• planning to ship in 2016

How to call your client an idiot without getting fired

Andy Clarke @malarkey

• client participation is currently broken — how can we fix it?
• the challenges of responsive design are not in design & implementation
• many problems stem from the workflow
  • not something you can easily control
• pre-planning stage
  • content audit, information architecture, etc
  • user stories, personas, scenarios
  • screen blueprints, storyboards
• but the tools can limit creative experimentation
  • e.g. wireframes shown to & signed off by client even before they get anywhere near design studio
  • want to avoid setting expectations in the minds of the client
  • but the wireframe layout gets ingrained in the client’s mind — so difficult to move away from them
  • big problem if you need to cater for different screens
  • e.g. start a new claim / edit an existing claim works side by side, but doesn’t fit on mobile — lose the second item below the bottom of the screen
• try to move from documentation to better communication
  • a written description can leave the door option
• visual design:
  • static visual assets (comps) being used as currency
  • exchanged as specs, blueprints, QA tools
• but these should not be used in place of communication…
• it’s impossible to write a functional specification that reflects responsive design
  • especially when technology moves so quickly
• need to do open-ended planning
  • admit that things can change
• but combine graphics tools with code
  • design for the medium, using the medium
  • use tools like http://hammerformac.com/ and http://vanamco.com/ghostlab/
• go from testing to prototyping, all with the client in the room
• but having the client sitting over your shoulder can make a lot of people uncomfortable
• many customers still expect to receive static comps as design deliverables
  • are pleasantly surprised when told they’ll receive code
• designers & developers need to work much more closely together — and understand each other’s constraints and aesthetics
• static comps can’t demonstrate:
  • liquid layouts
  • flexible font styling
  • native forms
• can do atmosphere
  • typography
  • colour
  • texture — decorative elements, etc
  • ed.: this is kind of the same as Jeremy’s pattern primer
• Andy might start with photoshop for atmosphere, then go to pencil sketches and code examples
  • results can be a little soulless
  • but nothing stopping going back to photoshop to add detail
• clients love to be involved; to be part of the process
  • sometimes suggestions can add real value
  • other times they might not… it’s ok to tell them!
• rules
  • never ever share a picture of a web site and just ask for thoughts
  • don’t do a big reveal after weeks & weeks of waiting — keep client involved all the way through
• try to work physically alongside
  • if not, have daily Skype calls and a shared DropBox
  • even then, the client gets scared sometimes: “it’s not going to look like that is it?”
• have banned unstructured feedback!
  • don’t accept any feedback via email or phone unless it’s part of a structured feedback session
  • ask for specific feedback — typography, colours, styles, layout, etc
• don’t underestimate the value of the design input
  • not about ego, but respect for the work
  • just because the client is paying, doesn’t mean they get to have everything they want
• can set rules about how to receive constructive feedback
• take the time to explain the design thinking behind the outputs — clients are then far less likely to want to make changes just to make a mark
• host feedback workshops — and use them to get to know the client better
• another rule: only people who turn up to design workshops can comment or criticise the designs
  • this includes the CEO :-)
• it’s ok to say that client’s ideas are stupid…

Ten Commandments of Modern Web Design

Jeffrey Zeldman @zeldman

1. thou shalt entertain
   • Panic’s web site — they’re just apps in dull categories but they have a personality — and therefore a following
   • a list apart: geeky articles — but have an in-house illustrator
   • you don’t have to be an “illustrator” to draw — just try it yourself
   • old flickr used to welcome you in different languages — light touch, but subtly reinforces global reach of photography
2. test everything (including assumptions)
   • use Adobe Edge, Remote Preview or Ghostlab
   • can’t choose breakpoints based on specific screen sizes
   • recommendation: choose types of devices
3. thou shalt iterate
   • milton glaser: what is graphic design? “I move things around until they look right”
   • the web is always iterating
   • positioning sharing links on A List Apart:
     • tried to guide people to read down to the bottom before sharing — people stopped sharing
     • put teeny sharing labels at the top — lots of sharing
4. thou shalt ship
   • if you can’t delegate at the pixel level, you’ll never ship
   • even if it’s not perfect — you must ship
5. engage thy community
   • instagram stumbled when they upset their community by changing their licensing
   • monotype featuring independent designers on fonts.com — humanising the big company
   • a list apart: letting people opt-in to showing tweets on blog — until twitter changed their API and it stopped working
6. love thy user as thyself
   • think about use case compassionately
   • don’t make assumptions about amount of content
   • but do make assumptions about priority
7. thou shalt experiment (I think)
   • can play on your own personal site
   • zeldman.com: trying out content first with big type and no extraneous distractions
   • followed by 37signals, Medium, USA Today, New York Times, etc
   • ask how you can take things away from the page?
8. thou shalt make magic
   • instagram uploaded pictures in the background while you were still typing the comments
   • it worked magically fast
9. thou shalt prioritise
   • how to prioritise
   • kick ass kickoff meetings
10. to thine own self be true
    • hay net — used to be need hay / have hay
    • but then added lots of extra guff and completely lost the simplicity of the main form

…and this is not religion — it’s only design!

Finale

…singing We’ll Keep A Welcome in the Vales — When You Come Home Again to Wales

Welsh Veterans Male Choir - Handheld 2013 from Besquare on Vimeo.

Handheld Conference 2013: port80 fringe event

Last year’s Handheld Conference was a great event, with several of the sessions winning awards as the best talks of the year.

This year, it’s got bigger and even comes with a fringe event the night before, in collaboration with Port80 events.

I’ll be blogging the main event sessions later, but here’s my notes from the Handheld mini/port80 event.

The ethics of making software

Graham Lee @secboffin

• XML is like violence: if it doesn’t get you what you want, you’re not using enough of it
• EULA: “we make no warranty that on this software” => this sh*t doesn’t work — and we’re not going to tell you until after you’ve bought it
• we’re in an industry that wants to be grown-up — we get to choose the moral direction as well as the technical direction
• we do have responsibility — raising awareness is the first step

Modifying Treasure Island

Alyson Fielding @alysonf

• what happens if you put technology into a physical book (without a screen)?
• making an enchanted object
• lilypad arduino works well with books: it uses needle & conductive thread rather than wire & solder so it’s gentler on the book
• “the library of lost books”
  • each rescued book is being sent to a different artist to be given a new lease of life
• wanted to hide the technology so it feels like magic
• triggering audio in a gesture controlled physical book
• what happens if you get a book talking to a phone
  • hide arduino in the spine
  • zigbee to talk to phone (via Redpark cable)
  • battery to power it (mainly zigbee…)
  • accelerometer to detect position
• initial story: book speaks what position it’s in
  • can also tweet…
• further stories: recognising more complex 3D gestures, e.g. a hug
• connected with a story engine
  • telling a story based on user interaction
  • crucially: also respond when the user does something different

Why don’t things just work any more?

Barry Scott @bazscott

• fixing things:
  • easy bug reporting — value the people who report bugs
  • prioritise fixes
• crippled behaviour:
  • flash, linkjacking, doorslams
  • watch user behaviour — and listen to them
• bastards:
  • sample newspaper website: “the only way I can monetise the site is by getting people to download the app, so I don’t care about showing the content”…
  • shortsighted, brand will wither, people won’t come back
  • advertising cigarettes & gambling to kids (or any kind of advertising to 3 year olds…)
• times higher education survey on link rot
  • 99% of web pages change in a year
  • 70% of links from 12 years of Harvard Legal are broken

Nodecopter

Andrew Nesbitt @teabass

• invented by Felix Geisendörfer in 2012
• Parrot AR Drone 2.0
• runs busybox linux
• node.js module: npm install ar-drone
• watch out for going out of range
  • the drone will just continue going…
• andrew created a node module to pick up serial input from xbox controller — used to control AR drone
• then picked up front-facing camera and displayed on a web page
• running both scripts at the same time allows you a first-person control of the drone
• make it dance to dubstep:
  • using dance.js to pick up drops in an mp3 from the HTML5 audio API
• face detection from front-facing video
  • using OpenCV on video from the video in the browser
• lots of other examples on nodecopter.com
• substack contributes a lot of stuff
  • including virus-copter
  • scans wifi for other drones — ssh’s to them
• if you attach a phone you can theoretically control the drone from anywhere in the world
  • but you come under the same laws as cruise missiles…
• voxel-drone is a simulated drone inside voxel, a minecraft clone in javascript & webgl
  • but it doesn’t have momentum…
  • voxel-drone stops instantly
  • the real drone takes about 2 metres to stop from full speed
• why?
  • teaching programming via engaging javascript
  • did a coderdojo for 12-15 year old kids
  • chasing parents around, ballet moves
  • making controllers from tin foil and makeymakeys
• upcoming events: probably one every month in the UK in the new year

MomoLondon: MWC2014 Stand Competition Live Final

10 companies competing to win a place on the UKTI stand at Mobile World Congress 2014 and press & media activity to go with it. ICT KTN, Mobile Monday London, UKTI and Cambridge Wireless all work together to whittle down the competitors to a shortlist of 10, all competing for five places on the stand.

All the companies this year were remarkably different — in their approach, their development stage and their presentation styles.

In the audience vote, I went for Changify, but the five who were selected were PeachInc, 5 Tiles, 23 Snaps, Capito and Viewranger.

There’s also an official blog post with pictures on the Mobile Monday London blog.

Red Glasses

Adam Martin, Founder

http://MyEarthApp.com @RedGlassesApps

• embedding rich content into 3D objects
• have built a native 3D engine for iPad that deals with data
• also built two sample apps:
  1. visualization of magnified Earth heights
  2. showing videos on a 3D globe
• aim to partner with media & content organisations
• have built bespoke apps for clients for last 15 years
• want to expand to a white-label product
• other demos:
  • showing travel time from a point across the globe
  • luxury retail, where purchasing from

Changify: Design for Social Change

Priya Prakash, Founder

http://www.changify.org @Changify

• basic idea:
  1. spot & share ideas for problems
  2. get support from friends & neighbours
  3. ideas get backed by brands & biz
  4. earn credits for making the change
• partnering with Clear Channel to make a digital bus stop
  • crowdsourcing local opinion by voting on screen
  • touch & NFC
• council get realtime data of reports
• running a 3 month trial with Guardian Data at Elephand & Castle
• working with councils & local businesses
• http://changify.org has been available for 6 months
• also accessible via SMS

Coveritas

Sean Redmond, CEO

http://www.coveritas.com @Coveritas

• based in Bletchley Park
• founding team did functional verification of hardware verification
• have applied same system to software functional testing
• specialise in machine to machine interoperability
• uses randomisation & rules (constraints) to generate end to end use case tests
  • 3GP took 9,000 hours of test engineering
• looking to partner with domain experts in M2M standards testing
• customers are those companies with massive test labs for M2M interoperability
• have an annual time-based license model

SpatialBuzz

Leon Hardwick, Director Global Sales & Marketing; Andrew Blake, CTO

http://www.spatialbuzz.com @SpatialBuzz

• cloud-based customer experience management for mobile operators
• delivering info on status and capability of network
• give the operator an idea of how customers are reacting
• can also provide an early warning to operator of issues
• mix together operator outage & planned works with crowd-sourced input
• can cater for any service delivered geographically
• deployed with Telefonica UK & Germany, also Tesco Mobile
• benefits seen:
  • reduction in calls
  • reduction in response times
  • improving customer satisfaction

PeachInc

Dr Daniel Morris

http://www.peachinc.com @PeachInc

• mobile ticketing using the “MorrisCode” — 2D barcode
  • patented format
• optimised to be read from electronic displays
• at the moment PeachInc are the only people who can read them
• displays well on small screens
• stores a 16 digit number
• have built a suite of apps
  • can receive tickets via SMS (even on iPhone)
• also make hardware
• will be integrated into a
• biggest customer so far Saudi Professional football league
• versus QR codes:
  • reads faster and more successfully
  • reads at 20 frames a second with most mobile cameras
  • 5,000 people at an event with 100% success rate
  • 60,000 football matches in Saudi Arabia with no problems

5-Tiles

Michal Kubacki, Inventor & CEO; Piotr Pieczynski, CFO

http://www.5-tiles.com @fivetiles

• keyboard for Android
• business model based on app sales & licensing deals
• works well for smartwatches (with a touch screen)
  • takes a small amount of screen space
  • have a demo on i’m watch Android smartwatch
• looking to port to Windows & iOS
• also getting keyboard tested by RNIB
• currently have 100s of users on Android
  • and 4,000 downloads of the training app
• takes about 30-45 minutes to learn the combinations
• working to make the learning curve lower all the time

23snaps

Meaghan Fitzgerald, CMO; Ivailo Jordanoc, Co-Founder

http://www.23snaps.com @23Snaps

• mobile-first private social network for families
• spans across different generations
• also organise photos by date & location
• 500K registered users
• posting one photo every second
• make money by selling photo print products
• have users in 179 countries
• going to be launching in Brazilian Portuguese
• content owned by creators
• also provide a one-click export of all content
• wanting to meet consumer electronics, mobile networks, etc
• don’t want advertising next to family photos
• may go for other monetization such as premium features

Available for iPhone, Android, Windows 8, email, web and printed books!

Capito Systems

Tony Ballardie, CEO

http://www.capitosystems.com @CapitoSystems

• speech assistant technology specifically for mobile commerce
• about to sign first customer
• language variations, background noise?
  • have focussed on language understanding rather than speech recognition
• aiming to license to mobile commerce companies
• have built support tools to enable customers to build up a speech corpus of domain language

Viewranger

Ben Howard, Marketing & Sales Exec; Craig Wareham, CEO & Co-Founder

http://www.viewranger.com @viewranger

• digital mobile platform for outdoor activities
• interest-based social network
• publishing platform
• trail guide marketplace
• over 2 million app downloads
• used by over 100 search & rescue teams in UK, Ireland, USA, Canada, Germany, Ukraine
• work with 22 mapping agencies & trail guides from 400 brands
  • including CAMRA :-)
• wanting to engage with handset OEMs & wearable manufacturers
• earn revenue through:
  • premium in-app data & services (maps & guides)
  • premium services & analytics for brands
  • syndication of content
  • could go for advertising in the future (have steered away so far to keep UX well)
• main competitors are still dedicated devices
• there are sport-based apps that seem to be fragmenting the need

Available for iPhone & iPad, Android and Nokia

UBIAPPS (Nquiring Minds)

Nick Allot, CEO

http://www.ubiapps.com @nallott

• secure end to end framework for managing apps both online & offline
• server management + enterprise-grade security is proprietary
• protocol is open-source (JSON-RPC over HTTP)
• all nodes are two-way — can manage apps and IoT devices using the same system
• easy & quick to integrate on any device
• looking to work with system integrators
• seen most interest so far from asset tracking systems

---

Announcements

• Vision Mobile Developer Economics Survey
  • http://visionmobile.com/DE1Q14MoMoLon
• IDEALondon offering desks, mentoring & support for start-ups and SMEs working on new products & services
  • apply at http://idea-london.com

Droidcon 2013

I went to Droidcon UK last week and my brain is still catching up… So many new ideas (and good ones too!).

I’ve put together several posts from Droidcon 2013 — this one gathers all the short notes that I took that didn’t deserve a full post of their own. They’re still worth checking out though!

A big thank you to the organisers and the contributors who made it all possible, especially Thibaut Rouffineau for whom this is his last Droidcon as organiser.

Cupboard SQLite access

https://bitbucket.org/qbusict/cupboard/wiki/GettingStarted

• easier design than ORMlite
• works better with Android framework
• doesn’t require a custom activity

testfairy

http://www.testfairy.com/

• send your APK to them, they instrument it and return it to you
• or you can ask them to sign it themselves and manage the testers for you
• results include one frame per second video of app UI, synced to logs and any exceptions

would you code blindfolded?

Gonçalo Silva, Novoda @gnorsilva

• Pretotype — most cost effective prototype
  • e.g. using wooden blocks wrapped with paper to test mobile device ideas — use in real world situations — as used by Jeff Hawkins to test the PalmPilot
• Light Table IDE — animate your code with live test results
• estimations have a very limited lifetime
  • valid up to a month, maybe two
  • more of a gut feeling rather than a specific time
  • just to help you and guide you, doesn’t tell you when you’ll be complete
  • don’t adjust your estimates — look at the performance in retrospectives
  • make estimates based on difficulty, not time
  • anything bigger than a 4 should be broken down into smaller pieces

android script

http://androidscript.org/

• Free app on google play
• or £0.65 version available with SmartWatch, IOIO and LEGO Mindstorms integration

productising a modern Android Device

Craig Arnush, Vertu

Vertu sell hand-made Android phones for £7,000+…

• made a changes to Android to allow secret alert + new vertu key
  • secret alert makes the phone pretend to be dead (including the home button)
  • modified phone window manager
• added own analytics (couldn’t rely on Google etc, as wanted security)
• have an internal Vertu API
  • if interested, get in touch
• tools: use OpenGrok

Tesco hudl

Novoda were showing off the hudl — a cheap Android tablet sold by Tesco.

Apparently Novoda were involved at a fairly deep level in the project, which explains why it’s actually pretty good!

demo camp

Each presenter had a couple of minutes to show off their app or service — the entries were judges by a panel of venture capitalists offering investment.

amateur football management

• http://football-tracker.com
• manage leagues & players

5-tiles keyboard

http://etaoisystems.com/

Download on Google Play

• normal users reaching 40wpm — almost twice as a normal keyboard
• speed freaks reaching 100wpm
• works on small devices — ported to I’m Watch smartwatch: immediately useable

apiomat

http://www.apiomat.com/

• easy to create APIs
• graphical UI to create basic database w/relations
• also does push notifications
• auto-generates code for iOS, Android, PHP, Python, etc

scoopt

http://scoopt.com/

• fashion facebook
• retailer with fashion leads

indoo.rs

http://indoo.rs/

• got 2-5m just using wi-fi in business design centre (on Android)
• iOS can’t use wi-fi positioning as Apple don’t provide wi-fi signal strength
• 6 patents
• support crowd-sourced mapping
• €100/mth for access to SDK

apponsor

http://apponsor.com/

• in-app sponsorship by signing up to newsletter
• automatically fetches user name and (verified) email address from device
• requires read context, read local account + internet permissions

pogo from Activ8rlives

http://www.activ8rlives.com/

• import healthcare data from devices that require USB
• patients no longer have PCs to upload their data and don’t have the latest Android or iPhone devices to pick up Bluetooth LE or
• instead have created a hardware box that converts USB into audio jack so can be picked up by an app on even legacy devices
• indiegogo campaign

genymotion

http://www.genymotion.com/

• native Android emulation for app testing & presentation
• integrates with laptop camera & fake location services
• introducing pro version next month

CapturaTalk

http://www.capturatalk.com/

• assistive services for students, esp. disabled & dyslexic
  • also useful for those with English as a second language
• OCR text into an editable format
• can get word definitions, including easily confusable words
• being sold to schools

NOBU BYOD

• remote android workspace for any device
• provides easily securable data for enterprise
• uses multi-user android servers
• have iOS client + HTML5 client
• can be run inside a data centre

NOBU won the demo camp top prize.

Droidcon 2013: App to App — design & surface local APIs

Ty Smith, Twitter (ex-Evernote) @tsmith

• e.g. Samsung Note S Note app — locally synced with S Note grouping in built-in Evernote
• tapping on a note in Evernote, opens it in S Note; then back button goes back to Evernote

intents

• when sharing content to another activity, need to provide URI permission
• when offering edit, you shouldn’t send your original file
  • the third party might crash, corrupt, etc
• also can’t rely on setResult
• user might hit back and think their changes will be saved
• set last modified — when activity returns can check to see if changed — then offer user to save if they want

content providers

• can provide temporary permissions to access provider in an intent
• can pass through file handles

account manager

• see an example in the open source github app
• can request an authenticated token
• makes accounts visible to user in a standard place
• can do OAuth1 or 2
• has method to refresh OAuth2 token automatically

sync adapter

• does a lot of management for you automatically (network, battery)
• again, can expose to third parties
• can be scheduled & started with cloud messaging
• requires content provider & account manager
• but watch out for all the syncs coming at once
  • especially as networks often send out heartbeats on the hour every hour
  • devices wake up and think: I might as well sync now…
  • Evernote received DDoS load spikes…
• so add a jitter to the sync period (random 1hr -> 1hr5min)
• also add a “wait until” in the sync adapter — do your own checking

bound service

• much stronger contract than others
• other apps need to include your AIDL source code
• example: plugins for DashClock

tips

• testing is hard
  • use mock integrations
  • hard to debug integrations
• add analytics to the lower level components so you know what’s going on
  • might want to consider rate limiting
• use crash reporting (plug for crashlytics, now owned by twitter)

Droidcon 2013: Awesomeness Checklist

Taylor Ling, http://AndroidUIUX.com

• attention to detail

animations

• find balance between subtle & noticeable
• should provide information
• make sure to use standard animations
• e.g. don’t change root screen exit — otherwise users don’t know what’s happened (why was that different?)

feedback

• microinteractions: dan saffer
• visual feedback — show highlighted touch area when pressed down (and ensure that the areas are big enough)
• watch out for dialogs — and make sure there’s no ambiguous buttons
• e.g. preventing screenshots — at least the user why you have done so
• need to make the rules of the app visible
• for side menus, it’s important to push the current view into the background when the menu appears
  • make it darker / blurred

help

• quick tutorial: introduction of the value of the app
• not how to use the app
• have a help section (offline if possible)

Droidcon 2013: Responsive Design for Android

Juhani Lehtimäki, Smashing Android UI

Presentation available online

• alternative to master/detail — grid view
  • works the same way with adapters
  • can adjust number of columns in values to adjust on screen size
  • use it as an easy way to extend the UI without a huge redesign
  • also useful for inspiring designers to take the design further
• need to figure out where the relayout/break points are?
  • need to talk about what is the screen size for this layout to work
  • don’t need to talk about tablets or phones
• juhani likes to do the large screen first
  • makes you think about whole picture if there would be enough space
• android design in action from google
  • different layers of design:
  • information design — all you
  • interaction design — all holo/android
    • 100% chance users use other Android apps
    • tiny chance they use other platforms
    • optimise for user experience, not app consistency across platforms
  • visual design — mixed
• use the default components!
  • but don’t components that are not needed for the app
• action bar gives you lots of things for free
  • adjusts for screen space automatically
  • components work across lots of devices — tested!
  • also hold down item gives tooltip
• best app for design on android right now: timely alarm clock
  • and follows all android guidelines!
• can fade out the action bar when content scrolls up
• use Android Asset Studio to show how 9 patch graphics work
  • designers can check online
• use fragments from support package even when targetting 4+
• decouple front end from backend
  • Greenrobot Event Bus
  • Square Otto
  • data manager -> bus -> fragment
• when fragment starts it queries for data by id
  • fragment should ask for it
  • manager should respond to bus with id when ready
  • fragment subscribes when it’s around and unsubscribes when it goes away
  • so fragment can then request data when it’s told that id is ready
• http://jimulabs.com — lets you change layouts on the fly
• make sure your design team uses android devices
  • at least for a couple of weeks!
• use standard components and follow guidelines
  • won’t just cost in coding — think about all the testing!
• think scalable from the first wireframe

Droidcon 2013: Conquering concurrency — bringing the reactive extensions to the Android platform

Matthias Käppler, Soundcloud @mttkay

Matt has written his own blog post to accompany his talk.

• this talk is about functional reactive programming
• but without talking about monads or other mathematical terms
• example: a list view with data from the server
  • lots of concurrency
  • callbacks, broadcast receivers, notifications all over the place
• wanted a single event handling model with natural concurrency
• problem with imperative programming is shared state across whole app
• doesn’t work with multiple threads and concurrency
• programming style should reflect the event-based, network-dependent world that apps live in
• AsyncTask has changed several times in its implementation
  • since ICS it uses a single-threaded executor
  • prone to leaking Context since you have to manage references yourself
  • also has no error handling built-in
  • can’t have long-running tasks that depend on each other
• event buses (otto, green robot) also have downsides:
  • designed around shared global state
  • still no ability to chain tasks
  • no built-in error handling

RxJava

• RxJava
  • actually a port of .net Rx extensions invented at Microsoft 5 years ago for Windows Phone
• Observable<T> ::onNext(T) ::onCompleted ::onError(Throwable)
• subscribeOn(scheduledThread) / observeOn(scheduledThread)
• have lots of useful schedulers e.g. observer on main Android thread
• also have map and mapMany to compose observables

how to use it

• soundcloud built android extensions
• http://gihub.com/soundcloud/rxjava
• dumb fragments
• service objects implement business objects
• custom operators for paging content in list views etc
• AndroidObservables.fromFragment
  • guarantees that it won’t leak but will maintain connection to a rotated activity

• e.g.

  
  fetchModels(request) { 
  return fetchResponse(request).mapMany((response) -> {
      return mapResponse(request, response);
  })
  }
  

• simple uniform event model

• unit tests don’t need to run background threads
• apply it in a focussed way
• don’t replace callbacks — used in service layer for API requests
• use proguard!

downsides

• java 6 anonymous classes are very verbose
• deep call stacks in debugging
• slight increase in GC activity (but didn’t have any noticeable performance impact)
• learning curve
  • but can use similar things for objective-c and server side (finagle & twitter futures) so can share knowledge

references

• http://rx.codeplex.com
• http://www.reactivemanifesto.org
• http://paulstovell.com/blog/reactive-programming

Droidcon 2013: Teaching Your Client Android Design; or, Ridding the World of iPhoneys

Kenton Price, Little Fluffy Toys http://www.littlefluffytoys.mobi

Presentation available online

Summly

• Android has algorithm on client as Android screens come in different sizes
• insisted that wanted back button in app
• got google developer advocate support to say no
• also added various improvements, several of which

BBC Weather

• again received an iPhone design from the agency
• identified areas that should be more Android-y
• added additional Android features
  • NFC support — share locations over NFC
  • lock screen widget, daydream mode, dashclock integration
• don’t need to shout about these integrations, as early adopters will do it for you
• first release: got slated on play store as there was no landscape mode
  • tablet users will review you (no easy way to exclude…)
  • upset users are far more likely to leave reviews
  • designers hadn’t included landscape as it was not seen as a big use case
• about > version code > tap 7 times > easter egg :-)
• reviews: “BBC does it better on Android for once”
  • made design Android native
  • then added nice Android features
• even the BBC were surprised about what could be done

Play Store beta management

• assign a Google Plus community to different (alpha/beta/etc)
• accept/reject membership
• LFT used to use HockeyApp, but this is much better

how to

• get the product manager on board
• get graphic designers on board
• compare to best-of-breed
• get the ActionBar absolutely right

Q&A

• some designers feel that they haven’t designed it if there’s still native components visible
  • a lots of designers got burned by the change from iOS 6 to 7
  • maybe they’ve learned their lesson now!
• supporting older Android
  • support 240x320 as the smallest, but was difficult to work around lack of bucket design sizes (3+)
  • couldn’t test across everything
  • used ActionBarSherlock
  • lots of graceful degradation

Droidcon 2013: Ship Faster With Open Source from Square

Pierre-Yves Ricau, Square @piwai

Sample project: http://github.com/pyricau/shipfaster

• look out for talk later at devoxx about how square got rid of fragments
• debug panel in app, slides from right
  • lets you adjust the settings

dagger dependency injection

https://github.com/square/dagger

• create object graph in application
• injection happens in activity onCreate (prob. base class)
• can switch between modules when create graph (e.g. using build settings)
• resolves dependencies at compile time as it’s annotation based
  • don’t get errors at run time
  • doesn’t use reflection so faster
• also generates dot files so can view dependency graph

otto

https://github.com/square/otto

• (the bus driver in the Simpsons…)
• broadcasts are not type safe and fragile
• define event classes
• the bus then calls the event methods for all subscribers
• also provides an event logger
• events are called synchronously

dagger & otto together

• use a custom annotation with dagger bindings
• can then add subscription/unsubscription easily

robolectric

http://robolectric.org/

• main developer now at square…

retrofit REST client

https://github.com/square/retrofit

• define an interface for API
• methods take a callback method
• callback will happen on UI thread
• suggestion: use otto bus to fire events on return
• create a RestAdapter and plug it in using dagger
• has a log level to show you all headers
• also works with protocol buffers
• async by default, but can also do sync if you want to do multiple serialized calls from a background thread
• can use underneath robospice

picasso

https://github.com/square/picasso

• image loader from URLs
• placeholder & error images
• resize dimensions
• don’t need to deal with http or caching at all!
• has debug indicator corners on images:
  • green from memory
  • yellow from filesystem
  • red from network
• can apply transforms to images
• handles large images well
• adjusts threads for downloading & encoding according to network status (wifi, 3G)
• but may not respect cache expiry headers… (poss only when not used with OkHttp)

OkHttp

https://github.com/square/okhttp

• Android has switched from Apache HttpClient to URLConnection
• HttpClient no longer maintained in Android :-(
• OkHttp now part of AOSP!
• create a client and retrieve an HttpURLConnection
• used by retrofit and picasso by default

more info available

• http://square.github.io
• http://piwai.info

Droidcon 2013: Gradle for Android

Hans Dockter, CEO Gradleware & Founder of Gradle @hansd

http://gradle.org

http://tools.android.com/tech-docs/new-build-system

buildTypes

• automatically picks up different source & resource directories
• can add code specific (e.g. setting constants)
• can adjust settings across multiple tasks
• automatically creates new tasks (e.g. packageTest, packageStaging)
• allows different dependencies for different types

productFlavors

• just like build types, but another axis
• can alter package name
• extends tasks further (e.g. installFreeTest, installPaidStaging)
• configure different things than buildTypes (not proguard, etc)

flavorGroups

• allows unlimited extension
• e.g. ARM/intel
• tasks allow you to run groups of things — e.g. test all debug builds

other features

• gradle wrapper
  • allows specifying the version of gradle in source control
• additional plugins
  • manymo — devices in the cloud
    • has gradle plugin to run tests against selections of their devices
• has a rich model & deep API that allows additional scripts in build
  • e.g. real-time warning if a test runs for longer than 20ms
• can combine with wrapper to have your own custom gradle installation
  • put scripts in .init of gradle installation to apply to all builds
• Android Studio picking up gradle built types
  • so can switch and see effects in the visual designer
• in future want to specify virtual devices in gradle
  • so IDE just executes gradle
  • IDE has less to do :-)

Droidcon 2013: Crafting Unique, Delightful Apps

Dan Lew @danlew42 & Chris Arvin @meinhyperspeed, Expedia

• created a sample app to show ideas: http://goo.gl/XCyLWl
• default holo vs customized UI
• finding interesting ways to interact
• holo is great for developers, but need to extend it to add character
• designer should build on how android looks, feels & works
  • e.g. cards, vertically sliding content
• build from user’s prior Android experience
  • i.e. don’t put brand consistency ahead of platform consistency

animations

• android apps move: so should your mockups!
• really important for communication as a designer
• tools for designers: after effects, html/css + transforms, quartz composer (but steep learning curve)
• generally requires a little bit of coding knowledge but no too much
• animations gives lots of visual clues
  • e.g. expanding an item in a list to go to detail

working together

• developer first reaction is generally: how am I going to do this?
• takes a few minutes to start to get to grips — it will take more work…
• first need to really understand what the designer is going for
• interesting UI = a lot more development
• work on the big stuff first — usually the animation
  • makes sure that the view hierarchy is right
  • need to think a few steps ahead
• need to ensure that animation performs
  • use translations rather than layout changes
  • use GPU overlay to help with effects and performance
• communicate:
  • what’s going to be a challenge?
  • what can we make easier?
  • what do we have to cut entirely?
  • come up with 5-10 different options
• e.g. rounded corners done with 9 patch as quick fix

polishing

• developers often get it close enough but not quite right
• designer needs to communicate effectively
• communicate in dps not pixels
• adjust from what’s already in the app rather from mockups
• use relative measurements not absolutes
• annotate real screenshots
• e.g. make fonts 2dp smaller here, add 4dp padding there
• little play things:
  • e.g. expedia wait screen shows plane window with sky going past
  • rotating phone adjusts horizon; can close and open window

engaging UI

• really relying on images can set the tone of your app
• hotel detail done with parallax layers
  • encourages users to engage with the app
  • scrolling up and down enlarges areas

Q&A

• when designing, how far do you go for different densities?
  • simple design, start with single device
  • complex design, might want to ensure it works in a couple of densities
  • key is landscape: make sure it’s not totally different — don’t want to lose the user
  • but don’t avoid doing cool things in portrait just ‘cos you can’t do it in landscape
• working in dps
  • set the resolution in photoshop
  • or set the file to the full resolution
  • preview on device: skala preview or similar
• development environment
  • gradle -> hockeyapp
  • still using eclipse — android studio not quite stable enough yet
• pivotal labs experimenting with developer/designer pairing

Droidcon 2013: Phones in Space

Chris Bridges, Surrey Space Centre, @DrChrisBridges

STRaND-1 Nanosatellite

space is old tech!

• catch-22 with electronics in space: if it hasn’t flown, we can’t fly it
• most electronics in space are 10-20 years old
• they are larger: 90nm features
• 30nm of modern fabs may have trouble in space — we think they will be knocked out by single event effects
• largest particle coming out of the sun is an ion proton at just under 90nm
• but foundries that make 90nm chips are soon going to be decomissioned
• so need to start testing effects on smaller chips soon!
• also, newer components, especially mobile are smaller and much more powerful
• if we’re worried about reliability, could duct tape three phones together and get more power than the entire ISS
• also useful for medical purposes — investigate how tech behaves in radiation situations

hardening phones

• components also get shaken to 30-40G when rocket goes up
• used 3D printed brackets (chins) to hold pieces together
• control satellite attitude with magnetic coils
• had to harden the phone & connections
  • extract out the button connections & stick the trackball in place
  • need to remove any electrolytic components — they pop in space
  • also some plastics degrade in space
• controlled from Digi-Wi9C: low power linux single board computer
• put programs into solid state flash memory (PIC-24) that is not affected by space radiation
• also needed to check out timings: satellite works at about 8-40MHz; Digi-Wi9C at 150MHz
• android apps had to be instrumented so that they could be monitored and controlled: added heartbeat monitors to check if apps were still alive
• wanted to have a software lab in space
• had to check how the hardware behaved without convection
  • saw that battery voltage reporting flipped a sign when temperature went below zero
• destroyed about 12 phones in radiation… cobalt-60 ionising radiation
• tested satellite for equivalent of 6 years of radiation
• have a camera that looks at the screen
  • useful if usb connection fails
  • can connect over wi-fi
  • or else fall back to taking a picture of the screen

your apps in space

• had an app competition for software on facebook
• can you scream in space?
  • does the vibration from the speaker reach the microphone?
  • don’t know yet…
• antenna communicates at 9Kb/s back to Earth
• went up into low earth orbit in 25th February
• SSC groundstation
• amateur satellite trackers around the world really important and integrated — 10 people around the world
  • gmail > gdocs > SQL databases > plotting
  • can get a groundstation in a single USB stick
  • just need a bit of wire for the antenna
• when it’s first released, the satellite tumbles uncontrolled — need to use coils to place it in controlled orbit
• strand-1 status on web site
• testing charging the phone — have done it 9 times now
• will soon be testing apps…
• code available on s-android on google code
• satellites normally take years to build: STRaND-1 built in 3-4 months in lunch breaks and evenings
• NASA taking it forward
• UniS doing STRaND-2
  • want to have two satellites docking & undocking in space

Droidcon 2013: Authentication for Droids

Tim Messerschmidt, PayPal @SeraAndroid

Presentation available on slideshare

OAuth2 client libs

• scribe https://github.com/fernandezpablo85/scribe-java

• postmanlib: another layer on top of scribe

  • http://github.com/fedepaol/PostmanLib—Rings-Twice—Android

• OAuth 2 & the road to hell…

  • the lead author and editor left the working group and withdrew from the specification as he felt could no longer be associated with the standard
• OAuth 2 attack surface everywhere
  • need to have proper security on server side

Identity

OpenID

• developed 2005
• 2012: discovered you can hijack it
• considered dead :-(

BrowserID & Persona

• from Mozilla
• great idea, but nobody really uses it apart from them…

OpenID Connect

• layer on top of OAuth2
• http://openid.net/connect
• still a draft but looks really good
• has a whole section on session management (i.e. stop allowing that app)

Providers

• 80-90% via Google, Facebook & Twitter
• all have their own SDKs that handle the OAuth for you
• PayPal added a new identity provider
  • provides verified information
• needs to be best practice to show which information will be shared at each time
• Blue Inc 2011: Consumer Perceptions of Online Registration and Social Sign-In
  • 45% admit to leaving a website instead of resetting their password or answering security questions
  • 66% think that social sign-in is desirable alternative

Q&A

• on mobile, app can fake a web view and capture identity
  • this is why facebook goes via app
• think about different social providers for different countries
  • e.g. baidu for China, yandex for Russia
• see also Google Authenticator libraries for two factor auth

Droidcon 2013: CyanogenMod

Abhisek Devkota, Community Manager, Cyanogen Inc, @ciwrl

Shane Francis, device maintainer, CyanogenMod community, @BumbleDroid

• nexus comes with fastboot but other devices need root etc.
• building easy installer
  • google play app + PC app
• pro version going to be locked down a bit more
  • root is off, but easily available — phone secure for mass market appeal
  • aiming for new releases every two weeks
• CM Account — equivalent of Find my iPhone & iCloud
  • 4GB of storage per user, but shared across devices
• working with moxie marlinspike (redphone, whisper systems) on secure end to end messaging
• system level additions
  • latest conversations: across multiple apps (gmail, hangouts, etc)
  • allows recent contacts
  • added various framework additions, e.g. share video to Roku Airplay
• would be first time Google has certified a community-based android spinoff
• hope to have a bounty programme by mid-next year — especially for security issues
  • also been purchasing devices for maintainers

Droidcon 2013: Boundbox & Memento + Annotation Processing

Stéphane Nicolas, Octo Technology

Matthias Käppler, Soundcloud @mttkay

boundbox

Slides available online

https://github.com/stephanenicolas/boundbox

• break encapsulation to ease testing (with Android in mind)
• let’s you access things from Android SDK that you wouldn’t normally access
• also lets you add fields (e.g. for stub Android jars that only have methods available)
• can indicate how far up the hierarchy you want to expose
• don’t need to change your code — just adjust your tests
• access using reflection, but access checked at compile time
• open source on github
• compares with WhiteBox from PowerMock
• intended for helping test UI layer
  • find views by field name
  • invoke methods & inner classes directly
  • faster and more direct than robotium & UIAutomator
  • as fast as espresso

memento

https://github.com/mttkay/memento

• dealing with keeping state when the screen rotates
• the activity gets destroyed and recreated and all your state is thrown away…
• can use onRetainNonConfigurationInstance to pass objects through configuration changes
  • but what if you need to retain more than one object
  • deprecated in place of fragments — these keep their configuration using setRetainInstance
  • but watch out: setRetainInstance doesn’t work for child fragments and is super-prone for data leaks
• but what if you have multiple fragments sharing the same state?
• mark a package private field as @Retain
• override the new onLaunch method (used to indicate first time initialisation of the class i.e. not after a config change)
• then use Memento.retain(this)

annotation processing in general

• use JavaWriter from squareup
• look at how square does it for dagger dependency injection
• Google has a library so you can assert over java source files
  • lets you compile with a processor and check the output
• want to split up the annotation processor into two:
  • one for the client-side annotation itself and any required classes
  • one for the processor (don’t want it in your app)

Droidcon 2013: Remote Styling

Peter Nash

http://nativecss.com/

• styling using CSS on top of Android views
• live updating

• free software — make their money from support

• can pick up images — automatically cached & scaled to correct size

• multiple background images on a view
• can use in both Android & iOS
  • allows platform-specific overrides
• allows designers to adjust UI
  • using language they understand
  • on multiple devices at once
  • without needing to make a new build
• can use media queries (e.g. device-width)
• dynamic styles based on settings in the app
• can apply a promotion in the app for a day
• android support:
  • API 10 (2.3) with additional setup
  • API 14 with single line setup
• suggested as a value for key bits, not for the whole app
• uses a single CSS for all activities

Droidcon 2013: Android Based Dongles & Wearable Accessories

Ken Blakeslee, Chairman WebMobility Ventures

• scanadu, bracelets, knife with screen!
• argus app on iOS - life monitor, incl. sleep
• Ken has been wearing fitbit, pebble, fitbug, misfit shine for about 3 weeks to compare

smart dongles

• digital signage, using mini pc dongles
  • e.g. kestronics mini pc
• dongle only needs HDMI input in TV
• e.g. imerz platform
  • control big screen from tablet by using smart dongle
  • selecting video using image comparison
  • adding tags to video content

smart glasses

• insideAR conference by metaio
• AR moving from PC centric to person centric (going mobile)
• the technology is no longer the issue
• vuzix M100: full android implementation in a glasses form
  • can port apps onto it
  • doesn’t have cellular but has wi-fi…
  • head tracking, gps, wqvga display
  • aiming at enterprise rather than consumer
  • focussing on big company lead partners first
  • available for smaller companies in November
• not yet consumer devices
• industrial, construction, medical, automotive, customer service
• this use and google glass are conventional AR — we’re still waiting to see something consumer facing…

Over The Air 2013

Building an Internet of Things for Everyone

Alexandra Deschamps-Sonsino https://twitter.com/iotwatch

• get the work you want
• if you get work just for money, you’ll get more of it
• won’t get you the work you want…

good night lamp

• originally in 2007 people were unsure about it
  • it uses Wi-Fi: isn’t that a health risk?
• restarted in 2010 — no longer a problem

IoT is now accessible

• hardware & software is easily available, documented + supported with lots of forums
• lots of hackspaces around to make thing
• idea to making something that looks pretty and works: “I give you 2 weeks — and 1 of those is waiting for things to be delivered”
• still hard to get something to production scaling, but getting support for that:
  • Fritzing, DesignSpark, etc

IoT vs big business

• wanting to bridge concerns of small business and large corporations
• both want the same reach of
• standards & security
• british gas https://twitter.com/connectinghomes & #connectinghomes 26/09/13
  • 25 startups in energy sector
  • bobo the polar bear: changes colour depending on how you manage your home energy
• need to get corporates who are interested to actually meet the people who are doing stuff

Telling the right story

• journalists will make stuff up…
• make sure you tell a good story
• e.g. onesie for a child with sensors
  • great for children with health conditions
  • but could be creepy for parents
• you have to be completely clear about why a customer would want to buy what you’ve made
  • create a press release and a dropbox full of well-lit, decent pictures

Investment

• investors < 60 years old will probably have never invested in anything other than the web…
• they need to see more hardware things
• new https://twitter.com/bg_ventures incubator

Retail is interested…

• Staples want to be an #iot retailer
• https://twitter.com/Works_Shop — Alex’s office is a pop-up shop in the evenings

Building Complex Web Apps with Dart & Web Components

Chris Buckett https://twitter.com/chrisbuckett

• V8 is as fast as they can get for javascript
• dart is faster for some benchmarks already

dart language

• optionally typed
  • when Dart runs, it pays no attention to the type information
  • use types for annotations
  • used for communication and validation
• classes are also interfaces…
  • like duck typing
• has privacy: just prefix with underscore
  • also has package shared equivalent
• concurrency & async support
  • works with web workers in the browser
• supports libraries by default
  • a single repository of libraries
• built-in support for DOM
• DartDoc is markdown based :-)
• Dart VM not in any browser other than Dartium (special Chrome build)
  • but has been designed to compile to javascript
• the language is still a beta, some restrictions
  • e.g. can’t modify variables on the fly

web components

• Polymer is Google’s implementation of web components
• polymer.dart is the dart version
• polymer elements consist of a template & a script
• elements get created and added to the shadow DOM
• polymer elements have double-barrelled names
  • first part is namespace
  • hyphen is mandatory

Designing for diversity

or How to stop worrying and deal with Android fragmentation

Stephanie Rieger

a bit of history

• port of leith, edinburgh: cruise ships stop
  • crew come out and use the internet
  • mostly filipino (25% of crew are filipino)
• massive change in devices in a short time:
  • 2010: massive laptops
  • 2011: netbooks
  • 2012/13: tablets/phablets
• and this is a change for people who send most of their income home
• mobile phones were getting smaller, but needed large teams
• started to change in 2005:
  • mediatek started offering reference design chipsets
• went from giant companies to tiny ones
• lots competed on price, but others went with regional specializations
• by 2007, these had captured c.10% of global device sales
• started experimenting wildly
  • e.g. 4 SIM phone with a project
  • could try out with tiny production runs
• then Android changed things again in 2008
• these companies could now switch from low-end feature phones to mid & high range
  • e.g. Lumia lookalike, running skinned Android, sells for £56!
• other chipset vendors have emulated MediaTek reference designs
  • e.g. Rockchip, even Qualcomm
• all the components are now tuned to work with Android by default

hardware diversity

• variations at different levels
• low-end: all off-the-shelf — around £56
• slightly more customized: nice case, slightly customised Android, off-the-shelf chip
  • e.g. Xiaomi Hongmi
  • dual SIM, gorilla glass, highly customised Android (MIUI)
  • just £83
  • sold out first batch of 100,000 in 90 seconds…
• we’re used to having customisation all the way down
• but even larger companies are experimenting
• Japan - KDDI Infobar: highly customised design & Android
  • fashion product
• Oppo: Bluetooth LE camera trigger, touch panel on rear of phone
• Yota e-paper rear display: can retain image for weeks without power
  • also has a capacitative touch strip
• India: Aakash 2 is now c.£30
  • govt aiming to subsidise & distribute to 20 million students
• it’s increasingly likely that devices will be made by “other manufacturers”

platform diversity

• Android lets you change the keyboard
• as a developer you can’t rely on the user having a standard keyboard
• also lets you change the default app for intents
• Paranoid Android lets you change the resolution of the device at the app level
  • as apps adjust to resolution & screen size, this lets you choose the way the app behaves on your device
• MIUI is particular popular as it’s actively crowd-sourced
  • also because there are thousands of community build themes
  • including metaphor-based themes with virtual navigation
• Oppo now lets you choose your ROM when you order your phone: Oppo’s Color or CyanogenMod
• Cyanogen aiming to create a one-click installer
• manufacturers are supposed to include the default Holo theme
  • but some small manufacturers don’t
• manufacturers will also select OS versions and not update for a while
  • we will always see multiple versions live at any time
• also multiple app stores especially in different countries
• unofficial app store booths (e.g. in a Bangkok mall)
  • owner will recommend and install apps for you

how do we design for this?

• design strategies will apply to Android IoT devices as well
• basic principles:
  1. be flexible
  2. provide assets for all
  3. optimize layouts
  4. enable diverse experiences
• can use weighting to scale cleverly
• use asset grouping to enable variation
• google publish screen density stats every 2-4 weeks
• as screen gets bigger, letting the UI stretch doesn’t work so well
• very similar to responsive design
• set breakpoints in your layout where you change layout
• want to avoid have three versions that you swap
• instead aim for a continuum where content adjusts itself
• Evernote is a good example
  • list view switches to grid view on larger screens
• see also Google IO & Wordpress apps
  • Wordpress portrait tablet has list and detail side by side
• lots of qualifiers
  • touch screen type: capacitative/trackball/finger
  • UI mode: car/desk/television/appliance!
• not necessary to account for all combinations!
• enabling intents allows future-friendly behaviour
  • don’t have to worry about new social networks in different countries
• official android devices reached 1 billion last week
  • doesn’t include non-Google devices
  • probably doesn’t include cars, etc
  • doesn’t include experimental Android IoT devices

“diversity is not a bug, it’s a feature”

Arduino: Robots, WiFi and extreme hacks

David Cuartielles https://twitter.com/dcuartielles

• based in Malmö Uni
• all got into Arduino because wanted something for students
• “as technology grows in our hearts, it gets smaller in size”
• David’s background: worked at Infineon designing chips, then went to teach technology to arts students in Sweden
• had six months to teach people to program
  • had to relearn how to learn
• arduino not just boards:
  • boards
  • dev tools
  • documentation & community
• not teaching about transistors: teaching how to make a light blink
• arduino ide doesn’t have lots of features
  • but gives you feeling that you’re in a slimmed down version of Eclipse
• short run manufacturing (c.10K) so can always change the design
• hacked a full-sized car to be remote controlled
  • will see self-driving car on youtube soon…
• in mexico city only room for 30% of students in university
• instead they have arts centres for students who don’t get it
• David taught electronics there:
  • sorted out electronics sourced from mexico as components not available
  • vimeo: ohoh robochock
  • vimeo: ohoh competition
    • trying to remote control their robotos
    • all interfering with same channel, but they don’t know!
• arduino robot
  • designed with help from kids from mexico
  • 4 times winners of robocup
  • invested a lot of time in the AC/DC converter
  • so that performance is consistent across battery
• educational experiment in Spain
  • 24 schools, over 500 kids (15 year-olds)
  • every week had three sessions: introduction, hacking, sharing
  • each week was thematic: e.g. sports
  • 25 kids, 5 projects: olympic games on Friday
  • 24 different experiments, but kids didn’t do everything
  • instead saw what other kids were doing
  • all details http://cuartielles.com/verkstad/en
• hacked Sony SmartWatch to run Arduino
  • all published on github: underverg?
  • only thing couldn’t get hold of was bluetooth chip
• natural fuse
  • plant lives or dies based on your carbon footprint
  • if it dies your electricity stops
  • can switch between selfish (grab from neighbours) and selfless (offer spare to neighbours) modes
• fukushima
  • pachube/cosm was used for people to map the radiation themselves
  • using arduinos with geiger counters
• open source white goods controller
  • modular: only need four abilities
  • mosfet, relay, pwr, ??
  • added UI module to provide output
• everything is open source
  • pay me to make it: once it’s made, the work is done
  • you can pay me to maintain it

Whitespace Networks: Connect All The Things

Ben Ward https://twitter.com/crouchingbadger - http://love-hz.com

• TV whitespace becoming available as moves from analogue to digital
• however, will still be used for analogue radio mics etc
  • if we cock up they’ve got lots of famous people to complain!
• weightless protocol)
  • 10 yr battery life
  • 5-10km range
  • unhelpfully called “super-wifi” in america (802.11AF)
• needs a whitespace database…
  • being worked on right now
  • need to check every 15 minutes
  • check OFCOM for list of approved DBs
  • then check with your licensed DB
  • but you’re not reserving space, just agreeing to share
  • see also http://uk-whitespaces.spectrumbridge.com
• neul now making a 4.5cm² board
  • expected price $17 (at scale)
  • range: 1-8km
• new phrase: “the fog” — like the cloud but on the ground :-)
• open source boards
  • using software defined radio chip (lime something)
  • myriad RF
  • nuand bladeRF
  • also hackRF?
• has some location capabilities based on triangulation
• ideas?
  • bike theft detector using the frame as the antenna
  • oxford guerilla sensor network for flood detection

Appium: Mobile Automation Made Awesome

Jonathan Lipps https://twitter.com/jlipps

• cross-platform solution for native & hybrid mobile automation
• other options for ios:
  • calabash-ios
  • Frank
  • ios-driver
  • UIAutomation
  • KeepItFunctional
• other options for android:
  • calabash-android
  • MonkeyTalk
  • Robotium
  • UiAutomator
  • selendroid
• wanted to set some ground rules:
  • test the same app you submit to the store
    • don’t want to add additional code into the app
  • write your tests in any language & framework
  • use a standard automation API & spec
  • make it open source and foster a large community
• appium supports:
  • ios, android & firefox os
  • real devices, simulators
  • native apps, hybrids, mobile web
• can write one set of tests that work across multiple platforms
  • if you’re careful in how you structure your app
• appium exposes an HTTP server than allows selenium to run
• selenium webdriver has clients in many languages
• and is a W3C working draft, so nearly a standard :-)
• appium also extends webdriver protocol with additional mobile-specific behaviours
  • talking to selenium to get those changes into
• under the hood:
  • iOS: Apple Instruments & UIAutomation
  • Android 4.2.1 and up: Google UiAutomator
  • older Android + hybrid: Selendroid
  • Firefox OS: marionette
• written in node.js, so npm install appium and write tests in node
• or else have a GUI runner to set flags
• GUI also comes with an inspector
  • so you can see what’s going on at each step
  • (don’t need to be the app developer to write a test)
  • will create some initial code for you from your actions
• find things by:
  • accessibility
  • element type
  • hiearchy xpath
  • android id
• you can use a config dictionary for IDs/xpaths to help cope with platform/device differences
• instruments can only run a single test at once per host machine

• Sauce Labs have lots of devices available across the net

  • provides scaling and device selection
  • can switch to Sauce just by changing appium end point + adding credentials
  • also need to provide app: pre-upload using Sauce API, or host on a server somewhere
  • http://saucelabs.com/mobile

• Q: can you switch between apps?

  • we could use a second app to turn on/off wifi
  • A: doesn’t work on iOS — when you jump to another app then UIAutomation loses its context and quits
• Q: can you fake location?

Programming is terrible

Lessons from a life wasted

Tef https://twitter.com/tef

• Watch out for The Group Project: getting together to work on a project that individuals have not made time for themselves…
• make your code easy to replace more than easy to extend
• people often learn more from maintenance than from building from new
• people tend to teach in the way that they learned best
• C, Java, C# are not a great starting point for new programmers
  • they require concepts to figure out even before you can make things happen
• learning programming should be a side effect of doing something exciting
• girl at MIT struggling with English grammar
  • Seymour Papert asked her to write a sentence or poetry generating programme
  • after a few hours, she exclaimed “I know what nouns are!”
• view source
  • one of the best features of Scratch online
  • learn by seeing something you want to copy
• computer anonymous
  • support group for everyone
• for a starter, introduce constraints if they’re not already there