Mobile@Scale 2016

Last month Facebook invited mobile developers into their London offices for a collaborative discussion on scaling mobile development.

The focus was mainly on native development — and the attendees were mostly iOS and Android developers — but the scope expanded to include scaling development processes as well as how to scale apps for lots of users.

Jim Purbrick @JimPurbrick, Engineering Manager in Facebook London’s office, introduced the talks by saying that on mobile, the bug stakes are higher — once a bug is released, the app is on people’s phones and is much harder to fix. You can’t just update the code and see people get the fix in the next page refresh.

And for all the focus on ending up with a native app in the platform-specific app store, two of the big themes were sharing code across platforms and being able to make quick changes to apps that were already deployed.

I was impressed by the inclusivity of the conference — not only were the speakers from a variety of companies (not just Facebook or Facebook partners) but the audience were encouraged and given time to ask questions and discuss with the speakers.

The talks and discussions were all videoed and I’ve linked to them below together with my notes highlighting the points that made an impression on me.

Scaling iOS @ Google

Michele Aiello @micheleaiello, Tech Lead Manager on the Calendar app, Google

Michele gave a really detailed talk about how the iOS teams at Google deal with handling large amounts of code shared amongst many geographically spread developers. There’s lots of useful nuggets in here — and it’s interesting to see where Google have invested time and effort in order to make cross-platform and large team development easier.

Scaling iOS @ Google - Michele Aiello

Posted by At Scale on Monday, 28 March 2016

• Google has more than 60 apps in the Apple App Store!
• iOS devs have moved from London to every office worldwide
• strategy on how to share code really important
• design & ease of use crucial for scaling apps
• yearly gathering of all mobile developers
  • often start shared efforts there
• regular tech talks in local offices + recorded & streamed around the world
• have feature specific “Tiger teams”
  • one goal: ship a feature
  • cross functional: Android, iOS, web, PM, UX, API, etc
• have trouble with merging & reviewing xib, project & storyboard files
  • so Chrome team developed GYP: JSON for structure & dependencies
  • GYP: “generate your project”
  • use storyboard & xibs for prototyping, then shared code for elements
• release management:
  • regular releases every 2-6 weeks
  • with feature flags to toggle new features
  • compile time flag during initial dev, then runtime flags for later
  • known as the release train
  • heavier-weight trains need synchronising with marketing etc — ok to be a little late
  • 75%-80% of users are using auto-update so automatically get updates
• testing:
  • XCTests for functional and performance
  • KIF & Earl Grey for UI tests
• sharing code
  • single repo
  • HEAD is always stable
  • all code is available and shared
  • making a change in shared code: see the test results and roll back if issues
• for any shared code
  • enforce documentation & example code
  • catalog app for UI elements
• for cross platform sharing
  • try to share model cross platform and to server too
  • makes offline easier
  • have tried webviews & javascript
  • now using C++ & J2ObjC
    • C++ easy on iOS, complicated on Android
    • used in Chrome
    • j2ObjC used for Inbox
  • j2ObjC even lets you debug into transpiled Java code in Xcode
    • breakpoints, stepping, variable values all work
  • if code is simple, look at sharing the tests rather than the code
• swift at Google: currently playing with it
  • have found that development is faster
  • probably waiting a few months to bring into production apps
• user testing using beta releases (testflight, android beta)
  • metrics in the app
  • surveys after testing
• have tools to search whole repo to find out if code is still used
• sharing layout
  • done using sharing layout logic

When mobile IDEs need to scale

Al Sutton @AlSutton, Facebook

Al talked about how Facebook builds Android apps, and how they feed back improvements to their build process into the open source community (e.g. IntelliJ community edition and the Buck build tool). By using Buck, they allow their developers to choose whatever IDE they want.

When mobile IDEs need to scale - James Pearce and Al Sutton

Posted by At Scale on Monday, 28 March 2016

Nuclide

James Pearce @JamesPearce, Head of Open Source at Facebook

James continued from Al’s Android introduction to talk about Facebook’s new Nuclide IDE for building iOS apps… It’s exciting to see some competition in the iOS IDE world — whilst Xcode is great at some things, it often leaves a lot to be desired. JetBrains’ AppCode is a useful challenger but to have an extensible open-source IDE for iOS could be a game changer. The only downside for me is that Nuclide relies on Buck, so you have to change your project to buy in to the Facebook toolchain. Perhaps if someone could create a Fastlane plug-in…?

• unlike IntelliJ, Xcode is not open source, so can’t contribute
• existential issue for Facebook…
• started extending Atom from github
• aded Flow, Babel, Clang & Buck
• created Nuclide
• also added Chromium dev tools to help debug into app
  • lets you debug into Javascript, Objective C, etc all in same place
  • transpiling keeps source maps to help with line numbers
  • also lets you inspect into UI hierarchy for ReactNative apps
  • includes highlighting
• now have 2/3rds of committing engineers using Nuclide
• have analytics built-in
  • tracking feature usage
• internal infrastructure team has become a product team
• now available at http://nuclide.io
  • analytics kept for internal
• other open source projects
  • pop: iOS animation library
• doesn’t have refactoring yet

6 lessons learned scaling mobile at SoundCloud

Next up were a couple of sessions from smaller companies (though still not small!) showing how they built and adapted their apps faster to keep up with demand. SoundCloud spoke about using ReactNative (more on that later) and how they structured their dev teams to include mobile developers.

Jamie McDonald (Android) @jdamcd & Matej Balatic (iOS) @skavt, SoundCloud

6 lessons learned scaling mobile at SoundCloud - Jamie McDonal…

Posted by At Scale on Monday, 28 March 2016

• building out new SoundCloud Pulse app for people creating sounds
• most engineers busy on main SoundCloud listener app
• got a partner for Android, but built iOS app with ReactNative using web developers
• shared design & feature set across platforms saves a lot of time
  • were previously designing features twice
  • marketing was more complex too
• mobile specific API
  • mobile-specific features: background sync, batch fetches
  • “back-end for front-end” idea from ThoughtWorks
• developed C-based mobile playback library (skippy)
  • initially for Android, now rolled out across iOS too
  • e.g. optimise streaming for emerging markets
• tried to spread mobile devs through feature teams
  • but spread too thinly
  • weren’t able to pair and share knowledge
• instead created clusters of feature teams
  • mobile engineers shared amongst each cluster
  • could be in enough numbers together
• release train model
  • each feature team can take responsibility for shipping
  • allowed action but also feedback and responsibility
  • use feature flags — team responsible for turning on when ready
• tools used:
  • iOS:
    • FlipTheSwitch
    • stable CoreData stack — specific use of framework
  • Android, use LightCycle (soon to be open-sourced)
    • forward life cycle events to small independent modules
    • receives callbacks but doesn’t need to know which activity its attached to
    • enables better unit tests as can separate things out more effectively

Backend-driven native UIs

John Sundell @johnsundell, iOS Developer, Spotify

Spotify have an almost completely content-based app and are constantly tweaking to change the presentation and priority of different music. John and his team came up with a way of handling that change by controlling the whole app UI from the backend API.

Backend-driven native UIs - John Sundell and Diego Cristina Ca…

Posted by At Scale on Monday, 28 March 2016

• define components in backend API
• generalised data binding
• generalised components
  • implement standardised components which can be picked up from API
• can put cacheing, and lots of standard stuff in the generalised app
• control the UI from the backend
  • API contains view models rather than raw models
• Ed.: makes sense if you have an app with lots of similar components
  • especially for a content-based app
  • similar to Google’s code-based component library
• were able to delete 20,000 lines of code on home page browse view
• overall have been able to delete 100K lines of code across iOS & Android
• use layout traits to control layout
  • e.g. full width, separator, stackable
• request sends a lot of data about the device to the backend
  • can return different components & layout depending on device or screen size etc
  • sometimes send extra data in response so can handle quick changes e.g. screen rotation
• support infinite scroll using metadata with URIs for follow-up pages
• can set up fallback components — if this not available, fallback to previous
  • enables playing around with new features & UI but still supporting older builds

Infer: Moving fast with static analysis

Dulma Churchill, Software Engineer, Facebook

Taking up Jim Purbrick’s challenge of dealing with the higher stakes of bugs in mobile, Dulma gave us an introduction to Infer — Facebook’s static analyzer that can check for memory and resource leaks and null pointer issues each time you compile.

Infer: Moving fast with static analysis - Dulma Churchill

Posted by At Scale on Monday, 28 March 2016

• static analyzer that doesn’t require pre/post conditions
• compositional, so doesn’t need to process whole project at once
• very intertwined with compiler
• infer can find inter-procedural bugs not local to single file
• used with CI can be set up to only process newly compiled files
• within facebook: fix rate around 70% in recent months
  • high rate due to getting results on continuous integration
• there’s an Xcode plugin
• integrated with codeboard
  • web-based IDE to teach programming in classroom
  • Java, Python Haskell…
• see their blog post about being used at Spotify

3000 images per second

Henna Kermani @tokyotwilight, Software Developer, Twitter

Some interesting stats from Twitter here, in Henna’s story of how Twitter scaled up their image and video handling.

3000 images per second - Henna Kermani

Posted by At Scale on Monday, 28 March 2016

• image uploading used to be all in the same API call as the tweet itself
  • any point of failure would fail whole thing
  • waste of bandwidth for client & server
• split out image upload from tweet content
  • also allowed segmented, resumable uploads
  • used multi-part POST requests with separate INIT, APPEND & FINALIZE API calls
  • massive drop in upload failures, especially in developing world
• did research on age of images:
  • 15 days 50th percentile
  • 150 days 90th percentile
• so kept original + 20 days of variants
  • balance between storage increase per day and computation on each request
  • saved $6m in 2015 just from this change!
• image formats
  • tried using WebP for 6 months last year in Android app
    • ~25% smaller than PNG or JPG — better engagement
    • but not supported on Android <4 or iOS…
  • converging on progressive JPEG instead
  • used Facebook’s Fresco library in Android app

React Native

Pieter De Baets @javache, Facebook

Pieter gave a detailed intro to React Native — building native apps for iOS and Android using just JavaScript and HTML-like markup.

React Native: bringing the best of web development to native -…

Posted by At Scale on Monday, 28 March 2016

• if you ship a bug in a mobile app, there will always be a user out there running that bug — no matter how many updates you apply…
• write UI declaratively, code in Javascript
• share lots of code between iOS and Android
• Apple’s guidelines don’t allow you to update code in a running app
  • but there’s an exception that lets you update JavaScript over the air
  • so you can update React Native apps instantly

Don’t forget the web

Jeremy Keith @adactio, Founder, Clearleft

After all that talk of native development, Jeremy brought us back to thinking about the web and how it will always be the largest, widest target. It isn’t a “platform” and it will never be the leading edge of mobile, but it is for everybody.

Don’t forget the web - Jeremy Keith

Posted by At Scale on Monday, 28 March 2016

• when building for the web
  • start with core functionality
  • implement with simplest techology
  • enhance!
• can be done for whole service but also for individual components
• Ed. is this that much different from native?
  • especially for different OS levels, Android features etc
• there’s always something new that’s not fully supported

BarCampLondon X

So that was a pretty busy weekend! Thank you to all the organisers and the sponsors for yet another amazing BarCamp London.

If you don’t know what a BarCamp is, go read about how it works, and then come back to read my notes on some of the sessions I attended.

Here’s a picture of all the sessions that the attendees ran over the weekend (that’s a lot!) and it doesn’t list all the random conversations, games and general meeting people that happened outside of the posted schedule.

devoxx4kids

Dan Hardiker @dhardiker

http://www.devoxx4kids.org/

• one day workshop
• aimed at age 8-16
  • 8-9 year olds treated a bit differently — they need a bit more guidance
• with specific goals
  • make a robot
  • iOS game development
• want to say “I made that”
• one child been building iOS apps since age 6:
  • spikeball attack & pet noises
• worldwide
• dominican republic had > 1000 kids over 2 days
• > 30% people who come are girls/women
• generally 5 or 6 tracks selected from:
  • minecraft modding
  • scratch
  • python
  • lego mindstorms
  • raspberry pi
  • arduino
  • greenfoot
  • alice
  • kojo
  • iOS
  • mathbreakers
  • NAO robot
• 4 sessions in a day
• also go to big conferences and run devoxx4kids for the adults
• first London event in June
  • got 95% attendance from people who signed up!!
  • 4 x 1hr sessions
  • 40 volunteers
  • had an 11 year-old fly over on his own (met his dad at airport) to run a group of 20 x 11-15 year-olds how to do minecraft modding
  • he also did a closing keynote
• had the creator of greenfoot teaching how to build a minesweeper game
• have a load of volunteers available to help children build stuff
• have a show and tell at the end of the day
• mindstorms:
  • build the main wheelbase
  • children add grab arms to grab a ball
  • get children to control by hand first
  • program the same steps (5 steps forward etc)
  • add touch & distance sensors
  • program to grab without hard-wiring distance

how to start a hackerspace

Matt Copperwaite @mattcopp

• start a company - level of protection
  • limited company - need 3 people, can then state not for profit
  • community interest - lots of paperwork
• business bank account
  • barclays have APIs, £50 cashback at the time…
• insurance: paid £300/year
  • recommendation from London Hackspace
  • BIS will issue advice on this shortly
• keep trustees involved
  • raise issues that split them: colour of the logo…!
• system designed so you can cancel the membership at any point
• get people signed up with open days
• people really like laser cutters!

See current UK Hackspaces at:

• http://www.hackspace.org.uk/view/Main_Page
• http://hackerspaces.org/wiki/United_Kingdom

kinect v2

Mike Taulty @mtaulty

• v2 is £159 (cheaper than v1 at £199!)
• HD video
• infrared
• depth sensor
• can track up to 6 bodies (25 skeletal joints)
• tracks depth from 0.5m to about 8m
• infrared & depth is much lower res: 512 x 424 pixels
• body index separates pixels of different bodies
  • lets you do green screen really easily
• MS’s SDK is Windows only (doesn’t work with Windows VMs since it needs USB 3 & DirectX 11)
• but libfreenect2 is an alternative open source driver for Mac/Linux

mobile network in a field

Sam Machin @sammachin and Kevin Prince @kevinprince

https://fieldphone.org at EMF Camp 2014

• EMF Camp was c.1200 people
• runs every two years
• “a very british burning man” or “glastonbury for nerds”
• aiming for phone calls but not data
  • mainly because of there was already fast wifi
• just three base stations, so could simply architecture a fair bit…
• using OpenBTS, Asterisk + Twilio & Heroku
• Asterisk server sat in the on-site hosting centre
  • a refrigerated shipping container with servers on pallets
• recreated phone supply chain by using Amazon & a tent
  • bought some Amazon burner phones on 30 day return…
• SIMs were the hardest things to sort
  • wanted to play nicely with other networks
  • didn’t want people on real networks to connect to camp network
  • SIMs are pretty expensive: 50p to £1 each
  • hard to order in low quantities
• bought OpenBTS boxes from RangeNetworks
  • startup in SF
  • mostly selling to small Pacific islands
  • massively cheaper than normal kit (c.$5K)
  • also put one in a search & rescue helicopter in Iceland
  • connects to someone’s phone as it flies over
  • locates to area of a football field
  • allows helicopter to call phone!
• need spectrum to run in the UK…
  • O2 had some they had forgotten about ;-)
  • concurrent spectrum license: shared by 15 companies
  • better in other countries:
    • Netherlands: just need landowner permission
    • Germany: just need 30 days notice
    • Burning Man: use DARPA military spectrum not in use in the middle of the Nevada desert
• antennas make a big difference
  • need a proper site survey
• EMF Camp provide about 40 routers around the site
  • set up in locked portaloos! Datenklos (term from CCC)
• created everybody’s accounts ahead of time
  • needed to map phone numbers to IMSIs
  • got people to type in last 4 digits of SIM
• set up voicemail using twilio to record and forward via email
• SMSs are harder if you need to store & forward
• dealt with inbound calls by having a single central public number
  • call it and then dial 5 digit account number
• added outgoing calls as well (via Twilio)
  • limited to c.3 minutes
  • but even so fairly cheap
• also set up a few group rooms to see if people used them
• stats:
  • ~200 SIMs handed out
  • ~100 attached users at any time
  • close to 100% coverage
  • about 1800 minutes of twilio
• ideas for next time:
  • phone boxes
  • POTS to tent: turn up and plug in a BT phone!

managing CSS

Ben Scott @BPScott

http://reload.me.uk/talk-structuring-css

• people keep on writing new CSS
• not obvious how and where things are used
• no confidence in what you can change and if it will break anything
• build smaller isolated things
  • single responsibilities

structure

• components
  • domain-specific objects
  • text next to image in a particular way
• macro layout
  • grid system
  • layout of components within a page
• theming
  • colouring of components

resulting composition

• this thing, here on the page, in this colour
• mobile first & extend from core functionality
  • much easier to reason about adding in CSS
  • harder to take things out
• use additional classes to toggle additional behaviour
• Brad Frost: atomic design
  • pages are accidents — what happens when you put components in a particular order
• create a styleguide page
  • component, layout variations
  • automatically generated from HTML partials in application
  • HTML partials are essentially custom tags

tips

• avoid using IDs in CSS selectors
• try to keep selectors to max 3 levels
• naming convention: BEM
  • double underscore = within
  • double hyphen = modifier

problems & breaking up

• mobile first, but oldIE needs to be desktop first as it doesn’t understand media queries
• could use respond.js but takes a lot longer to load
• created Breakup
  • SASS/Compass plugin
  • generates different CSS files from the same SASS input
  • according to directives in top-level
  • lets you avoid wrapping specific elements in media queries

real life brain training

SenseLabs http://getversus.com

• split activity into different frequency bands = EEG
• delta < 4 KHz
  • babies have this all the time
• theta 4 - 7 KHz
• alpha 7 - 14 KHz
• beta 15 - 30 KHz
  • focused
• gamma 30 - 100 KHz
  • complex active stuff
• other stuff:
  • Mu (8 - 12 KHz)
  • SMR (13 - 15 KHz)
• neurofeedback
  • constant feedback, close to realtime (~200ms)
  • useful to use more than one sense to enable different people to relate to it better
• current system has five measurement points
• Chief Science Office is Leslie Sherlin

training

• focus:
  • augment low beta
  • inhibit theta & alpha
• can train stress response too
• sports consistency
• exam preparation

problems

• QA engineer was overusing focus training
• had problems sleeping…

uses (not scientifically proven)

• worked with Felix Baumgartner
• tennis players
• reported to alleviate long term ADHD…
• improved sleep patterns amongst developers…

available systems

• medical
  • existing $10K for bare minimum
  • require expensive software, only run on Windows XP
• kickstarter systems
  • cool, but not much neuroscientist input
  • not so accurate or useful
• versus
  • looks like headphones
  • rebaseline every time you put it on
  • connects over bluetooth to iPad
  • uses dry spikes sensors that contact scalp
  • first consumer product $750, aiming for $500

toys & gadgets

• thalmic myo
  • bluetooth armband picking up arm and hand actions
• oculus rift
  • now integrated with LEAP Motion on the front
  • https://www.leapmotion.com/product/vr
• NFC ring
  • lower range than usual
  • internal and external tags (private & public?)
• Google Glass
• estimote beacons
  • use at least three to get indoor location fixes
  • google have set up mountain view…
• chromecast
  • don’t bother with a digital picture frame — just get a cheap TV and one of these
  • great for broadcasting any media around the house
• almond+ touchscreen router & home security
• 3D printer
  • check out 3d printer subreddit
  • solidoodle
  • arduino will be launching one v. soon
• MIOPS camera trigger
  • plugs in to flash hotshoe
  • light sensor
  • laser sensor

scaling agile

Matt Walton, Head of Product @ FutureLearn @matt_walton

spotify

• have documented a lot of their processes
• think it, build it, ship it, tweak it
• now about 2000 people
• squads consist of engineers, designers & agile coaches
• autonomous teams with long running missions
• spotify engineering culture
• “agile at scale requires trust at scale”

GDS

• lots of information radiators
• product roadmap split into team “swimlanes”
• have a scrum of scrums

songkick

• similar teams
• each team needs:
  • product management
  • design lead
  • tech lead
• how to organise a roadmap
  • KIPs broken into themes
  • time box themes
  • agree measurements
  • form autonomous team
• lean analytics (book)
  • ratio or rate, not a total number
• business focussed aims:
  • if … then … because
  • based on lean analytics experiments
• two backlogs: separate “hygiene”
  • then add 70% valid features, 30% bugs, tech support to each iteration

futurelearn

• product strategy themed by vision areas
• each sprint split by % of work for BAU, products, etc
• standups and retrospectives still whole team to encourage community
• though work done in smaller project teams

conclusion

• share vision, mission & values
• give autonomy and create community
• rhythm & reflection

MomoLondon: Demo Night 2014

Amazingly enough this demo night finished on time and even a little bit early. Thanks to Julia Shalet for keeping things running smoothly on the night and Jo Rabin too for the varied selection of demos — lots of great ideas.

Pictures and more commentary on the Mobile Monday Blog.

5 Tiles

Android keyboard app

Previous demo night success

• Christian Lindholm now an advisor & investor
• available on Android Wear (Samsung Gear)
• soon available on iOS

Grabyo

Benjamin Bourdin, http://grabyo.com

• realtime video sharing
• get any IP feed, apply title, edit
• save & share using twitter, facebook, ooyala, brightcove etc
• monetize through in-stream ads
• initial customers are broadcasters
• done deals with ITV & Sky Sports
• also did wimbledon & big brother
• also have a consumer platform: if a broadcaster wants to get people involved in sharing content

Good Food Talks

Matt Wadsworth, http://goodfoodtalks.com

• web app to let visually impaired people read restaurant menus
• a very few menus offer braille but only 1% of visually impaired people can read braille
• surveyed 5000 people — main complaint was difficult navigation
• web app has simple navigation
  • search/near me > restaurant name > menu
• free for users
• various ways of getting data in
  • restaurants pay for input
  • API ingest, full service, etc
• commercial for just over a year
• 400 venues
• biggest so far is Carluccio’s, then Pret

Swytch

Chris Michael, CEO, http://www.swytch.com/

• additional mobile numbers on your phone
• just closing alpha tester list
• free credits to alpha testers
• only service that allows you to have multiple UK mobile numbers on your phone
• aiming for worldwide too

QuizTix

Ian Masters & Albert Marshall, http://quiztix.co/

• mobile quiz games
• opt-in adverts for rewards
• all four versions are available on iOS, Google & Amazon
  • movies, pop, world football, video games
• targeting around existing passions
• also want to target venues with seats

Mylo

Martin Sandstrom & Mark Lee, http://mylo-app.com/

• split your bill when you live in a house share
• direct connection to various providers
  • energy, TV, phone, etc
• push notifications to other housemates
• settle bill with paypal (peer to peer is free)
• no business model at moment
  • aiming for future paid features
• aiming to attract lots of users first…
• app available for iOS and Android

Viewmaker

Douglas Robb, http://www.scramboo.com/

• location-enabled augmented reality
• Android & iOS apps, CMS for template-based content
• content discovery & engagement
• can control timing of content as well
• also support image-recognition-based AR
• first commercial partner is Jockey Club
• prototype app for Sandown Race Course
• involving novice race-goers in the racing
• planning to roll out to other Jockey Club venues

Pronto

James Roy Poulter, https://www.prontoapp.it/

• food to wherever you are
• don’t need an address
• only get a choice of four options (different each day)
• authenticate through nexmo API by voice call
• credit card payments only
• launched 100 days ago in Trento, Italy
• initially iOS only, then Android, + Windows coming next week
• launching next week in London (now available in the City)
• won an accelerator in Italy
• worked with restaurants in Italy, but difficult for food in 10 minutes
• aiming to get own centralized kitchen as margins are incredible
• also get drivers — performance based pay
• but made easier with centralized kitchen with limited delivery range

Adsy

Frederick Tubiermont, http://www.adsy.me/

• create mobile web apps on mobile for mobile
• can now create apps on desktop too
• web apps are square shaped
• magic touch swipe to choose link destination
  • includes email, telephone
• can embed videos, twitter feeds, etc
• can embed adsy apps in web pages or just view on mobile
• use case:
  • kids & teens making a web app about a concert during a concert
  • then sharing the evolving content
• meant to create snackable content
• will announce a product based on the platform in 2-3 weeks

IFS

Matthew Bridge, http://www.ifsworld.com/en/

• business critical messages to smart watches
• useful feature: view on device — opens up more detail on the phone through quick selection on watch
• driven from enterprise resource planning
• staff can subscribe to specific notifications

OpenTRV

Mark Hill and Damon Hart-Davis, http://opentrv.org.uk/

• 60% of your energy and 20% of UK emissions flow through TRVs
• 50% of that energy is wasted
• one thermostat usually controls whole house
• target price £10 per radiator: save £300 in the first year
• production samples coming mid-November
• hotels losing £50 per room per year on heating bills

MomoLondon: Cloud Computing & Mobile

A new venue tonight — up on the 9th floor of Google’s Central St Giles office. They even provided good food for the hungry mobile mondayers…

The evening’s focus was on Cloud Computing and Mobile, and the questions seemed to focus mainly on the cloud with not much discussion about how it related to mobile. The chair, Camille, kept the discussion moving along briskly, but we didn’t really get into any depth on any of the subjects. Maybe the audience could smell the food!

The panel

• Chair: Camille Mendler @cmendler
  • Principal Analyst at Informa
• Rob Easton @Cloud_Easton
  • Head of Google Cloud Platform UK & Ireland
  • Eurovision app used App Engine for back-end
• Dr Janko Mrsic-Flogel
  • CEO of Private Planet — personal cloud
  • 7 out of 10 carriers are providing a personal cloud solution
• Caroline Van Den Bergh @GoldenGekko
  • Golden Gekko mobile agency
  • 85% of apps we build are based on Google App Engine
• Jonathan Raper @MadProf
  • CEO at Placr/transportapi & Visiting Professor at City University
  • purchasers of cloud services
  • mostly built on memset

outages & availability

• JR: best service providers are those that communicate well when things go wrong
  • one provider went down and didn’t tell us anything for an hour

looking forward

• RE: google datacentres include a new one in Taiwan at 15 hectares
  • green computing
  • Google can provide very low latency
  • enables reaching out to new business areas such as the film industry
• JR: still talking quite aggregated performance measures
  • can’t ask for X many transactions for Y pounds
  • not that detailed
  • next step may be platform products
• CVDB: mobile enterprise software saving two days a week
  • managing remote teams
• JR: sometimes blame is shifted between telcos & cloud
  • would like to have better tracing
• JMF: Private Planet have a totally green datacentre in Telecity in Holland for T-Mobile

internet of things

• JR: the problem is trading information
  • automatically discovering different feeds & blending them
  • spend 3 weeks integrating code and 3 months arguing over terms & conditions
• CVDB: best successes have been smaller ones
• CM: find my yak in nepal
  • the yak’s don’t talk back — so there’s no privacy issues!
• RE: getting electricity usage feeds every 10 minutes
• CVDB: there has been scaremongering around Google capturing data
• JR: all our data is royalty-free downstream
  • makes it much easier to deal with
• CM: Copenhagen have bike devices to share traffic information
  • provide individual exercise info
  • but also shared with municipality
• JR: Waze has lots of complicated terms & conditions
  • data is available but locked up

the next generation

• CM: has been proved conclusively that 3D gaming improves your cognitive ability
• JR: …minecraft
• JR: it’s still a bit like early 2000 — mobile operator walled gardens
  • want to take down the barriers and bring the data silos together
• CVDB: working with Saga
  • older people have more time, want to delve deeper
  • tablets more popular than mobile phones

data scientists

• CM: shouldn’t we moving towards everyone manipulating their own data
• JR: digital literacy is very shallow, especially in highest decision-making tiers

security issue — data protection

• safe harbour in tatters
• can’t use the cloud at all if we have any secure data
• JMF: Private Planet always has data centre in the specific country
  • but are governments the biggest problem? what about the corporates?
• JR: if you need to do it, in-country encrypted solutions are available
• RE: sure, there are some workloads that Google can’t take on
  • e.g. we won’t let you audit our data centre
  • so can’t work under FCA regulations
  • over time, some of these regulations are going to change
• JR: all have to do as much as we can to help the government make the right decisions
• JR: sometimes the safest place to do something is in the cloud — e.g. running Windows
  • we don’t allow it on any of our machines
  • but it’s great in the cloud!

what if cloud provider company goes bankrupt?

• JR: escrow
• JMF: most agreements done via a channel partner — so that partner will continue the service
  • single party relationship is much more complicated
• RE: cloud business could be bigger than ads for Google
  • SLA penalties are often a percentage of what you pay
  • but if you pay less and less, the SLA means less and less…

is it becoming like supermarket wars?

• RE: Google reduced prices — and if you use an instance more than 25% per month then get a discount
  • terabyte of storage is $26/month
• CM: just like a loyalty card…
  • who will be Lidl and who will be Waitrose?

will we still be waiting in several years?

• JR: overestimate change in the short term and underestimate in the long term — change is stepped
  • sometimes have to wait for the step change in technology or regulation
• CVDB: business are going to grow up quickly
  • first digital generation CEOs will be around in the next few years

third party dependencies

• JR: Apple reviews can be capricious
  • if Apple fall out of love with Dropbox, then that could cause a problem for lots of apps
• JMF: was a huge debate on mobile medical health a while ago
  • then suddenly there was an app that just works
  • and the issues can just disappear
  • gadget-led terms and conditions…?

speed & access?

• RE: check out server density review
  • blog by someone who reviewed lots of providers and switched to Google
• CVDB: Golden Gekko mandate that all backends must be on Google App Engine
  • mainly so that clients can scale

new innovations in infrastructure?

• RE: Google build our own servers
  • apparently they would be the 3rd biggest manufacturers in the world
  • they value new innovation

where is the next growth to make it easier?

• RE: focused on the developer
  • acquired StackDriver to manage cloud capabilities
• JMF: If This Then That
  • making cloud development open to the consumer
  • certain mobile operators are understanding this and joining up devices in the home
• CVDB: finding that parse.com doesn’t suit
  • one size doesn’t quite fit all
  • prefer google’s flexibility

inviting consumers to get more involved

• CVDB: user testing
  • avoiding ivory tower
  • developed O2 Priority Moments
  • built packaged solutions based on it
  • incentivized behaviour also used in enterprise apps
• JR: designed a first location bank
  • your own location storage — that you can choose to share
  • (Ed. see also fireeagle)
  • next generation have a different approach to privacy
• RE: snapchat is a massive google customer
• audience: teenagers using technology completely differently
  • using snapchat to have a whole conversation
• RE: snapchat consumes more IT than any banking industry
  • JDI has 10 petabytes on Google cloud
  • consumers of IT will be well away from the enterprise
  • can have failure at a much cheaper cost — can learn more

what financial services are possible in the cloud?

• RE: restricted by FCA regulations, but other options possible
  • e.g. datasift to search across twitter
  • big challenge to attract IT talent in financial services as there are so many restrictions

skills

• JR: right now it’s hard to hire — ruby on rails developers are hard to find
  • constraint on development right now
• CVDB: couldn’t agree more — mobile skills are in short supply

tools for analytics & loyalty/crm

• looking at how data can be analysed
• wanting to drive revenue per user
• wanting to get the right tools in place to complete the feedback loop
• CVDB: iris solutions company
  • built the backend themselves
  • ?? http://www.iris.co.uk/
• JR: “build it in the cloud, but just don’t tell IT”
• RE: tableau, BIME, etc. working on top of Google Big Query
  • now a lot cheaper

After the panel discussion

As often happens with Mobile Monday, the discussion after the panel was richer than the panel itself. Some discussion points that came up when I was talking to people afterwards included:

• How do you balance keeping data on the device and in the cloud, to deal with intermittent network availability?
• Will the banks get clobbered by more agile personal finance companies that don’t have to worry about so many regulations?
• Why has it taken Google since 2008 to move from basic App Engine web apps to a full cloud platform?
• How will Google make more money from Cloud Computing than from Ads? There’s a big market, but the price is dropping…
• …and on a completely different note, several people were interested in setting up Code Clubs in their local primary schools, but were stretched for time — perhaps they could work together and contribute part-time?

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.

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

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