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

The Web Is... Day One

Another excellent conference from Craig Lockwood — and this is only the first day.

I’m always impressed by the groundedness and open-hearted feeling I get when I attend Craig’s conferences. He curates the speakers not just for their intellectual knowledge and not just for inspiration, but also for their ability to connect to and understand the world and the people in it.

I’m looking forward to tomorrow!

The Web is… Knowledge

Christopher Murphy @fehler, Teaches MFA at Belfast School of Art

• recommended reading
  • The Element: Ken Robinson
  • Mastery: Robert Greene
    • rediscovering the mentor/protege model
  • Managing Oneself: Peter Drucker
    • how you relate to other people in the workplace
• interaction design course (part of Master in Fine Arts)
  • get started with a github profile
• teaching to see:
  • bauhaus model & visual grammar
  • point > line > plane
• charlie munger
  • warren buffet’s business partner at Berkshire Hathaway
  • latticework of mental models
  • learning new models in related fields
  • all useful fields to understand interaction design…
• lollapalooza effect
  • power of ideas together is greater than each by themselves
  • e.g. put a designer & developer together and get more than you would get by themselves
• nuance and human interaction easier to learn from humans
• master and apprentice
  • not just a one way relationship
  • master learns to see the world in a new way with fresh eyes
• apprentice moves on then becomes a journeyman
  • going to different masters
  • gradually starting to teach others
• ken robinson: have to move to an organic process of education
• teach a whole mind:
  • need self-belief, manners, confidence, politeness
  • as well as skills in business, design, technology, etc
• universities move at a glacial pace
  • takes 5 years to change a curriculum…
• short form courses
  • patterns: josh long
  • general assembly
• those who can, do; those who care teach

The Web is… Constant

How do we design for constant change… and not go mad

Nathan Ford @nathan_ford, Monotype, http://artequalswork.com

• web design not yet nailed down as a discipline
• creating repeated success in a volatile environment
• previously worked as Creative Director at Mark Boulton Design
  • these ideas come from that time
• team
  • bring the client into the team
  • or bring your team into the client
  • embedding
  • learn empathy…
• look for a champion on the client side
  • someone who trudges through all the muck
  • make sure they can involve all the stakeholders
  • get the problem stakeholders involved as early as possible
• no big reveal — eliminate surprises & blame
• wicked problems
  • term from sociology: massive problems that are hard to define and difficult to resolve
  • web sites are a simpler thing, but their implications often make them behave like a wicked problem
• measure goals by improvement, not completion
• when you don’t know, try a lot of things
  • don’t be afraid to throw stuff away
  • failure is ok, but you must keep learning
• ensure the client writes the user stories
  • can help with a workshop to elucidate
• work in iterations
  • each iteration should include research, design & building
  • then evaluate and repeat
  • don’t forget to evaluate…
• always have an available prototype
  • brings the pain of the project earlier
  • lets them show the working consensus to others
• start with real content
  • if you don’t have any, make it up (NOT lauren ipsum…)
  • motivates client to actually make their own
• build out grids from content
  • grids within grids
  • content-based items
  • no high-level overarching
• choose the right css units
  • percent for scaling
  • vw & vh for headlines & page framing — relative to the viewport
  • pixels for media queries — one to one, easier to understand
  • ems and exes for typography
    • exes work better with newer web fonts
    • work on x-height
• let things get big: but limit on content items
• example: typekit blog — building out a design based on the Chapparal typeface
• also leads to simpler testing
  • but still need to test on devices
  • especially type sizes — can be surprising on actual hardware…

The Web is… Everywhere

What we can learn from console browsers

Anna Debenham @anna_debenham, http://console.maban.co.uk

• new style of inputs: gestures & voice
• think about small screen and a very big screen
• everywhere you can stick a screen, eventually there will be a browser
• “don’t fall prey to convenience of device silos” cameron moll
• console browser users are (currently) likely to be younger and lower income
• consoles and web TVs have low memory
• performance is crucial
• the xbox browser can pretend to be a windows mobile device
  • probably added to allow simpler interfaces
• large screen doesn’t always mean more pixels…
• handheld consoles often have very wide screens
  • often misidentified to show full fat design
  • should probably have a simpler design
• the PS Vita includes Amazon’s Kindle Fire Silk UA in its agent string…
• dual screens often have odd behaviour
  • Nintendo 3DS has two screens with different widths…
• Wii U aiming to be a full entertainment system
  • four different ways to zoom
  • really important for viewing web on TV when text is often too small
  • supports various presentation modes
    • turning mirroring on and off
    • draw curtains, prepare then reveal
    • play video on main screen, while continue to browse
  • can use multiple wiimotes as pointers
• similar for xbox one
  • using xbox smartglass app
  • supports split screen: game/tv + browser
  • voice and gesture works really well
• vimeo couch mode:
  • user choice for big screen support
• microsoft’s design for xbox and windows phone is truly scalable
• x-webkit-speech — for speech synthesis
  • currently Google Chome only…
• microsoft has a design guide for kinect
  • really good read to understand gesture design
• 30% of people this year used a smart TV to browse the web

The Web Is… Playful

See Lee-Delisle @seb_ly

• http://lazerarcade.com
  • used microphones to detect nerf bullets hitting a screen
• smashingconf opening animation
  • laser light show mapped onto a dome & pipe organ…
  • definitely worth watching the video
• lunar trails
  • http://moonlander.seb.ly
  • records its trails into moonlander.seb.ly/viewer
  • then built a physical arcade machine
  • full screen browser, controlled by an arduino pretending to be a keyboard
  • all linked up to a giant wall-hanging plotter
  • based on polar plotter, but using DC servos rather than stepper motors
• playfulness on the web has died a little bit
  • the little flash games got taken over by the marketing agencies
  • became viral campaigns that nobody wanted
• internet of things — nobody knows what it’s for yet
  • much more space for being playful :-)

The Web Is… In The Hands of the 97ers

Emma Mulqueeny, Founder of Rewired State and Young Rewired State @hubmum

• people born in 1997 and later, grew up with social media
• those born at the beginning have no leadership
• Ivan Illich: deschooling society
  • “educational webs … transform each moment … into learning, sharing & caring”
• the 97ers are already doing peer-to-peer learning
• the discussion about teaching how to code is almost irrelevant
  • the teachers won’t be teaching how to learn line by line
  • role of all-knowing teacher will become irrelevant
  • much about flipping the classroom and enabling the teacher as guide
• refugees united: dealing with families split up as they crossed the Somali > Kenya border
  • refugees would have similar names, might lie as they’re scared etc
  • YRSer Kevin figured out that storytelling was important
  • designed service to speak a local story into the phone
  • then find stories that roughly match
  • reunited families went from 3% to over 79%
• identity is crucial to 97ers
  • their stories (not their names) are their identifier
  • tagged photos
  • peer verification
• try not to police community as that affects identity
• have a very early understanding of how to influence community
  • they get immediate feedback from youtube/facebook/etc
  • have figured out how to tweak and skew their message until it works
  • can be quite an arrogant generation — they know how to get those likes…
• going into the world
  • the most unsafe thing they could do would be to work for a big organisation
  • self-employment is much more attractive — feels safer
  • not about making lots of money — more about long-term employment
• the Wi-Fi is the bedrock of their needs
  • it’s the gateway to their community and therefore their support network
• they can’t engage with politics until 18 — it’s too late…
  • they engage with policies rather than parties

The Web Is… All Consuming

Keir Whitaker @keirwhitaker, Shopify

Best to watch this when the video comes out — I couldn’t do it justice with notes.

• daily todo: 1 big thing, 3 medium things, some small things

The Web Is… Made Of Links

Phil Hawksworth, R/GA @philhawksworth

• Paul Downey’s 2008 “uberdoodle”: The URL is the Thing
• Ted Nelson: coined the terms hypertext, hypermedia & transclusion (and teledildonics…)
• you can link to anything from anywhere — the whole becomes more than the sum of its parts
• :// => “double-meh”
• Paul Downey: The Web is Agreement
• browsers are very liberal in what they accept
• browsers starting to obscure URLs
  • mobile Safari already hides everything but the host
  • Chrome Canary doing similar thing
  • Jake Archibald: the URL is the share button of the web
• taco bell #onlyintheapp — no longer have any content on their website
  • and only with access to lots of permissions on your phone
• google experimented with different shades of blue for links (#41shades)
  • apparently the change made about $200m difference
  • but they lost a designer who said he couldn’t argue for all his design decisions
• this is for everyone (with javascript enabled) — Dan Williams
• more than 60% of population of India & China is still offline
  • we will need to support them…

Unfinished Business Geek Mental Help @ The Web Is

An enormously important discussion, started by Andy Clarke a few days ago.

The discussion was recorded as an episode of Unfinished Business and included Chris Murphy, Cole Henley, Relly Annett-Baker and @pumpkinsouper.

There are many more articles to be read at http://geekmentalhelp.com/ — go and read, even if you think you don’t need to.

I think the most crucial advice I heard, was “keep talking” — this discussion is not over…

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

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 2012

This is a new conference, organised by Craig Lockwood around lots of intersecting areas of mobile design and development.

This year it was held in the beautiful St David’s Hotel, overlooking Cardiff Bay. The conference centre was a bit cramped, but the hotel itself was lovely.

There was a single track of sessions, but they covered a wide range of areas from getting a business started to futurology via several variations of design. As with many mobile events there was a fair mention of the web vs native debate, but there was a reasonable balance between the two here — with the only loser being the whole app hybrids like PhoneGap (which took a large amount of flak).

As with most of my posts, here’s my quick notes, typed during the sessions so that you can get a rough overview of what happened. Craig has published videos of several of the sessions on Besquare (I'll link to them next to my notes).

Handheld 2012: Book stories — How to turn a sideline into a business

Keir Whitaker, Viewport Industries

http://keirwhitaker.com

• co-owner of Viewport Industries with Elliot Jay Stocks
• using the web to do side-projects / passion projects
• published Insites book — interviews with web developers & founders
  • also available as ebook (via http://woop.ie)
• wanted to create something that makes money while they slept
• there’s still a passion for physical media (especially amongst designers…)
• had 65 people involved in making book
  • 21 interviewees, but a lot of others
  • copy editors, etc
• picking a new collaborator is hard
• did a precursor project (insites tour) to find out if they could work together
• discuss the money up front
  • horrible conversation to have
  • but really important to sort out before starting
• raising money
  • bootstrapping (your own money)
  • kickstarter (watch out for scaling issues)
  • funding
  • sponsorship / partnership
  • chose partnership (published in association with Mailchimp)
• need banking for a business account
  • they need address, phone number, etc
  • chose HSBC for Xero integration
• company needs a physical address
  • don’t use your home address
  • can use an accountant’s address
• need a telephone number
  • again, don’t use a personal number (especially mobile)
  • used a company called dial9 to have a virtual Bath number
• need terms & conditions
  • banks pay people to read them when you apply for stuff
  • most people borrow other people’s terms…
  • ask first!
• get an accountant
  • will save you money
  • HSBC business account feeds directly into Xero online accounting system
  • accountant can then work directly from Xero
  • costs about £19/month
• need a storefront for the website
  • shopify costs £19/month
• payment gateway
  • middle man between storefront and merchant account
  • need it if you don’t go for paypal
  • alternatives:
    • braintree
    • paymill
    • stripe (US only)
    • gocardless (going Europe-wide, direct debit only)
• merchant accounts
  • money comes through into real business account after about 2 weeks
• ensure that the gateway supports issuing refunds
• digital goods
  • use fetch app
  • works by web hooks
  • benefit with fetch app is that you can resend orders (sometimes they don’t go through)
• need to do support…
  • try to take dissatisfied customers off twitter and into email
  • think about what you can offer unhappy customers (e.g. digital goods in lieu)
  • helpscout.net can suck in email
  • can outsource support
• costs:
  • accountant: £70
  • xero: £19
  • telephone: £10
  • shopify: £19
  • payment gateway: £19
  • merchant account: £25
  • fetch app: £6
  • support: £100
  • based on 4 hours of accounting & support / month
• projects will always take longer than you think
  • impacts the finances

Start small, think big

Lee Armstrong, @lesmond, lee@pinkfroot.com

Video available on besquare.me

• shipfinder - first app
• planefinder - most successful
• inspired by Google, facebook, twitter
  • started thinking big from the start
• planefinder started with coverage of the south of the UK
  • sold app across world and started getting a few emails back saying “don’t you know Poland exists?”
  • started planning for bigger
• now cover most of world apart from China & Africa
  • have 400-500 radio receivers across the world and splice that data with other databases
  • all receivers are land-based: ships have range of about 50 miles
• when initial small hosting plan started creaking had to decide to self-host or cloud?
  • ran a comparison recently, found that it would cost $2000/mth more using AWS than using at the moment
  • but have internal skills to do server management
• currently have 32 servers but are flexible
• need to be able to scale up (and down)
  • pinkfroot turn machines off when scaling down
  • doesn’t save capex of rack space, but saves power
• user reviews…
  • bonkers reviews — ignore them
  • but pay attention to common themes
  • take time to spend time on customer support
  • takes around 30 minutes to turn around an angry customer
• built in social sharing into app
  • pick a flight and share it - shares web link + image
• built up community of app users
  • really valuable when lost photos of individual planes
  • managed to get users build up their own photos in the app (credited to users)
• product releases - little and often really helps
  • big release with loads of new features will miss out most features in reviews
  • what’s new notes in store are the one chance to communicate with users
  • make it chatty, make it friendly
• building up a good brand
  • working with Eddie Stobart to make an Eddie spotter app
• have apps for iOS, Android, Windows Phone
  • spend a lot of time writing native apps
  • make savings on back-end — they all talk JSON
  • Android is 10% of iOS sales
  • Windows Mobile is 1% of iOS sales
  • doing it for brand exercise
  • going through improving other platform apps

So you have an app idea?

Dave Addey, Agant, @daveaddey

Video available on besquare.me

• 2008 Dave was an web developer in a spare bedroom office
• now runs a company with 7 employees
• a good idea for an app
  • is it a good idea?
  • is it a good idea for an app?
  • how do you go about making it?
• example: late night bars in London
  • cost low four figures to make
  • 3 months of preparation time for database
  • sold 2000 copies @ £3.99 (or £2.40 after Apple & VAT) — didn’t even break even…

is it a good idea?

• measuring good app market:
  • universal - niche
  • international - local
  • lasting - ephemeral
• UK Train Times launched in 2009 when the app store was smaller
  • local - UK not worldwide
  • lasting
  • fairly universal
• Malcolm Tucker app
  • when you open the app there’s one new voicemail waiting for you
  • when you listen to the voicemail it starts a 4 day process with incoming emails & voicemails as Malcolm Tucker tries to find his phone
  • timely
  • fairly niche
  • fairly local
  • so covered costs but not much more
  • but led to a lot of other interesting projects
• does the app have a long tail?
  • lasting appeal
• does it scratch your own itch?
• should have some kind of hook
  • something that’s not been done before
  • something to show off to user’s friends

… for an app?

• when potential clients say “I want an app”, it’s not always true — Dave talks 50% of clients out of
• dead time (5-10 mins)
  • e.g. supermarket line
  • used for QI app
  • book-style interface had larger books with longer content
• we know where you live
  • trip advisor offline city guides
  • nosey parker
  • rightmove app
  • e.g. next train home in UK Train Times
    • one button to home station from around here
• the app that’s always there
  • guitar toolkit
  • imdb: “what was she in?”
  • british red cross first aid app — everyone should download this now!
• ongoing (everyday) use
  • opposite of throwaway app
  • people rely on them
  • UK Train Times
    • get more sales through word of mouth than any other means
    • can still charge £4.99
    • has sold 300,000 copies throughout the UK
    • but losing National Rail icon caused a massive drop in sales
  • twitter clients
  • TuneIn Radio
  • clipboard management apps

how to go about making it?

• lots of platforms to cover
• one approach is PhoneGap, hybrid app builder
• but problem: e.g. featured app Wikipedia
  • doesn’t work in the same way as native apps
  • form controls are different
  • search is not the same for either platform
• @daveaddey’s maxim: “develop once for every device: you get a rubbish app for every device”
• have seen big brands develop PhoneGap apps and then pull them after a month
• if you spend ages fine-tuning your HTML to behave like a native app, then you might as well spend that time writing native
• … but the rule is different for games
  • you can build using cross-platform games engines, e.g. Unity, Marmalade
  • the interface is not specific to the device but specific to the game
• it’s all about the implementation
  • sharing profits based on an initial idea doesn’t make sense…
  • it’s all the little ideas throughout development
• Derek Sivers - cdbaby
  • ideas are worth nothing unless executed
  • they are multipliers
  • http://j.mp/ideaMultiplier
• Sergey Brin: “coming up with an idea is the least important part of creating something great… the execution and the delivery are what’s key” (via The Guardian)
• PhoneGap can be useful for a quick prototype to guage response
• apps can and should make use of HTML5 where appropriate
  • e.g. Malcolm Tucker emails, credits pages
  • QI app content — but displayed using CoreText not a web view
• hybrid approach
  • suggest creating a native app for one platform
  • a mobile web app for the rest
  • choice of one native platform is up to target market
  • use experience of first native to decide next native platform
• don’t muck with user expectations
  • native apps are expected to have native performance & behaviour
  • web sites have different expectations
  • but don’t try and make your mobile web site appear like a native app!
• pricing:
  • getting high value apps going
  • e.g. launching £10 app at £5.99
  • 69p for a UK only app is not going to break even
  • Agant don’t do 69p apps…
• bandwidth, speed, etc
  • saw more of a change between capped & unlimited than for improvements in speed
• biggest failing in App Store is lack of paid upgrades
  • adding new functionality is about finding additional users by re-promotion
  • Agant avoiding freemium because eeurgh :-)
  • but freemium seems to be a side effect of the lack of a paid upgrade option

10 top tips

1. project the risk of everything you do: best and worse case predictions
   • app should have a business plan
2. keep project budget realistic
   • don’t be tempted to spend a fortune
3. it’s important that all partners have a vested financial involvement
   • don’t take on apps for a content provider where they have no risk
4. talk about your idea - it will lead to better ideas
5. value Apple promotions
   • Malcolm Tucker was not promoted due to sweary language
   • QI app did get promoted - massive difference
6. best way to get Apple promotion is to make Apple devices look good
7. create a video that tells people what your app does
   • gives an equivalent to your app that people can share
8. keep updating your app - and give Apple reasons to promote it in each case
   • if you add big content, Apple will treat it as a new app
9. keep it simple and focussed
10. sweat the details
    • “the best way to market your app, is just to build a great app”

Content & tone

Robert Mills, Studio Manager at Bluegg, @RobertMills

Video available on besquare.me

• creating, managing & using content
• need an individual responsible for content
• content first otherwise design won’t fit…
  • see @rellyab, @halvorson
• used slickplan to plan site
  • signed off site map first
  • then got client to provide all content
  • client had to really think about what she was saying
  • she had to think about the whole site up front
• having all content ready means that organising translations is easier
• using content
  • what are you saying and who to?
• managing content
  • can use Google Docs, Dropbox, etc
  • or GatherContent
• doesn’t end after launch
  • need to review & refine
  • audit & strategy
  • ensure consistent & authentic
• auditing content for mobile
  • prioritise content over navigation
  • can prioritise content using traffic lights
  • need to check end use: ask why content is important

Working with Muppets

Ollie Wells, Sequence, @olliewells

• Sequence focus mainly on mobile web sites
• research — use analytics
• stakeholders (esp HIPPOs) can cause problems
  • Blackberry v5 is a pain in the butt
  • can use analytics to persuade them that their use case is not common
• useful functional spec wording (plain English, without version numbers):
  • The website will be built to perform at its best in the most common of modern browsers
  • Bugs that stop the side being usable will be fixed in the latest versions of the above browsers, as well as in 1 older version
  • Any bugs that we find in browsers more than 1 older version of the most common browsers will be looked at on an individual basis. This includes bugs that affect functionality as well as design.
• don’t oversimplify the mobile web site
  • ensure the functionality is still there
  • don’t remove functionality just cos your on mobile
• doing information architecture using sketches on paper
  • good example {picture}
• do prototypes on device
  • click from screen to screen
• frameworks
  • jquery mobile useful for quick prototypes
  • for prototypes, use sass, haml, coffescript and middleman
  • for production, use Mixture, gridset, twitter bootstrap
• Muppets web site for movie
  • all about characters
  • desktop is animation based
  • mobile is much simplified - same content, but static images
  • tablet is same layout as desktop but no animation
• device testing…
  • bluegg looking to open a device lab
  • choose your devices carefully - you can’t support everything
• do double res images for iconography, but not for photography
  • most users wouldn’t see the difference for photos
  • also CSS3 web fonts are useful for iconography

Taking content abroad

Rob Lo Bue, applingua, @roblobue

Video available on besquare.me

• imagine that you’re a french speaking user and you download an app, but it’s in english
  • bad initial impression…
• get your English right
  • get someone else to read it and answer questions
  • check it’s easy to comprehend
• avoid idioms - they don’t translate
• make your units use worldwide standards
  • e.g. include dollars as well as sterling, km as well as miles
  • always include timezone for event times!
• use a clear font for writing
• icons save translation costs!
• support international sharing
  • e.g. qzone (QQ), badoo
• if you have the budget and time, then look at translations
  • get users to translate!
  • but get another user to check
  • can use Google Translate for checking translation (don’t use Google Translate for actual translation!)
• choose languages carefully
  • e.g. most iPhone users in India are English speakers and use their iPhone in English… less ROI on a Hindi translation
• international compatibility

What’s holding the mobile web back, and what are Facebook doing about it?

Simon Cross, @sicross, si@fb.com

Video available on besquare.me

• worked at facebook for about 2.5 years now - makes him one of the old-timers
• digging in to Zuck’s quote from techcrunch disrupt in Sept 2012
  • faceweb v4 built from 2010: webview with extensions
  • at that time, facebook was a web company
  • update at will, one m-web codebase
• reach a point where people hated it because:
  • it was slow — slow*er* than their other apps
  • it pretended to be a native app
• took 6 months to fix it
  • because had to retool the whole company
  • had to slow down the release cycle, which felt wrong
  • had to get used to submitting binaries to Apple & Google
• v5 app (more native UI) went from 1.5 stars to 4 stars in 3 weeks
• …and Zuck’s quote continues to say that there are more people using facebook on mobile web than there are on Android and iOS combined
  • 7000 device types accessing every day
  • mobile users growing twice as fast as desktop
  • 126m mobile-only users
• so how to help developers grow mobile web apps?

distribution

• asked developers at PhoneGapDayEU why they were using PhoneGap: response — to be in the App Store (80%)
• in the app store to get distribution, but also because boss said so…
• mobile usage is different from desktop
  • general browsing is less used
  • instead people solve a problem, or fill some time
• facebook integration is no longer click to share
  • now it’s about publishing structured data
  • where, when, who
• e.g. soundcloud defined 5 actions
  • if you do any of these actions on any of their apps, it publishes that to facebook (if opted in)
  • then comes back as news feed either in app or in facebook app
  • news feed in facebook launches app directly — or else takes you directly to the app store to install it
• e.g. SongPop grew 9.7m users mainly through facebook sharing
• last 30 days, facebook sent users to native app stores 180m times
• also facebook has App Center for mobile web app
  • 170m monthly users
  • social recommendations
• last 30 days facebook sent users to mobile websites ~7m times

performance

• no visual difference from v4 to v5 except speed
  • but got 2x engagement
• Moore’s law still applies to mobile
  • at least to newly released devices
  • due to upgrades & contracts, the actual speed of increase is slightly slower…
• facebook is a founding partner of the W3C coremob community group
  • one of the first priorities is fixing appcache
• also developed ringmark: http://rng.io
  • Ring 0: what we have now
  • Ring 1: what we need to run 8 of the top 10 native Android & iOS apps
  • Ring 2: what we need to build all of the native apps on the mobile web
• 4 months ago, Dolphin Browser Beta for Android succeeded on Ring 1
• browserscope is now tracking ringmark over time

monetisation

• display ads?
  • on mobile? really?
  • they suck - both for size and for intrusion
  • BBC have long narrow columns because they need the right column for ads in the US
• credit cards?
  • too hard
  • cannot compete with native
• carrier billing?
  • can integrate via middlemen (bango, boku, zong)
  • facebook mobile payments layer on top of that
  • Ed: but doesn’t work on Wi-Fi

It started with a browser

Matt Gaunt, Developer Advocate, Google TV, @gauntface

• @AliDriver (Future Platforms designer, now freelance) able to do amazing things with HTML5
• latest devices could do it, but performance always an issue
• now looking at Google TV Spotlight
  • app store for TV optimized web apps
  • apps look really great
  • but developer spent two weeks adding a specific animation…
• just think about screens of different sizes
  • see Jason Grigsby’s article {link here}
• users don’t care if it’s a responsive design or separate mobile & desktop sites
• though probably want to have a catch-all site that will be ok for all situations
  • then add native apps or customized web sites as needed

Is your thinking L-shaped?

Kevin Mears, http://mearso.com, @mearso

• big CRTs meant you needed L-shaped desks - so could fit CRTs into the corner
• but don’t need them anymore for flatscreen monitors
• requirements change, don’t forget to change your tools…
• “Moses said”: my boss says…
  • difficult to argue with someone who isn’t in the room
• politics means that designers & developers can’t just be artists
  • have to sell the work
  • “Design is a Job”
• mobile use case — apply “app thinking” to a web site (Sarah Parmenter, FOWA)
  • what is the single reason for someone using my app?
  • and who are they?
• universities do have lots of different use cases
  • e.g. glamorgan
  • 100 users concurrent active users
  • 100 sub-sites
  • 100+ editors
• teaching people that need to delete stuff that is no longer relevant
  • Ed: but then it’s important to archive stuff on the web too
• basing templates off twitter bootstrap
  • frameworks tend to make you fit the content to the framework

UI for developers

Amber Weinberg, @amberweinberg

Video available on besquare.me

• specialises in mobile web apps
• did audible mobile web site
• pretty much 99% of design briefs Amber is given only include full-size desktop web site
• forget about mockups
  • just make it responsive
• breakpoints are when your site breaks
  • fix all the breakpoints at different sizes
• don’t fake it - you’re not a native app, so don’t pretend to be one
• put content where people can reach it
  • Apple have guidelines showing how people hold iOS devices
• show what’s important
  • e.g. boston globe
  • navigation gets simpler
• use columns
  • can move to less columns before switching to single column
  • compare scroll time with content size
• give extra spacing
  • make sure the text doesn’t hit the edge of the screen
• menus are crucial
  • if there are buttons in the header you may want to keep the menu drop-down and a separate action
  • can also have menus at bottom of page and a jump to bottom link at the top
• choose words or icons, but not both
• reduce images
  • responsive images not yet possible
  • try to use less images and more CSS
• retina-smetina
  • most of the time, users won’t even notice…
  • is it worth the bandwidth?
• buttons
  • read apple’s button guidelines
  • make important buttons bigger, 100% width
  • encourages people to press them!
• hover effects
  • make it clear that hoverable items are interactive
• don’t assume you know what your users are doing
  • but make it easy
• make font sizes appropriate
  • not too big
• don’t disable zooming
  • it’s an accessibility thing
• use sliders - with gestures
  • http://www.woothemes.com/flexslider/
• don’t forget your bookmarklet icon

We, Human

Andrew Spooner, Creative Technologist, Microsoft, @andspo

• works in developer platform evangelism team
• get tech about a year or two before it hits the public
• why do we connect things?
• vannevar bush & the memex…
• internet fridge…
• toaster telling me that the robo-vacuum has picked up the dog being sick behind the sofa
• NEST gives feedback on temperature changes: it will be 21°C in 15 minutes
• in 2008, the number of things connected to the internet exceeded the population of Earth
• latest John Deere cotton picker RFID tags each cotton bale
• microsoft project emporia
  • personalised news editor based on articles that you say you like or don’t like
• kinect
  • daughter thinks kinectimals is a film that she stars in
  • shadow puppet control
  • making people invisible (at least on TV)
  • putting a kinect on a quadrocopter
  • trolley that follows someone on a wheelchair
  • face detection and recognition…
• use with caution
  • what are the standard gestures?
  • cancel?
  • don’t turn up the volume control by whirling your arm round and round
• human capacity is not accelerating like our tools…
• minimise complexity, increase consistency
• design style: http://design.windows.com
  • pride in craftmanship — sweat the pixels
  • fast & fluid — motion & animation
    • custom controls need a lot of extra work
    • we have movement in nature, we expect things to move in the same way on digital screens
    • animation with a purpose
  • authentically digital
    • use sensors
    • iconography can represent digital realm
  • do more with less — get rid of UI chrome
    • make the content the interaction
  • win as one
    • small pieces loosely joined
• summary:
  • contextual & social UX is an expectation
  • understand the human - keep it that way

Design Systems

Laura Kalbag, @laurakalbag

Video available on besquare.me

• moving to responsive design
• but still designing at fixed widths
• shouldn’t be thinking in static
• thinking about devices, not content; deliverables, not process
  • thinking about what they give to the client
• design systems
  • typography
  • layout
  • shape & form
  • colours
• what are you going to keep the same across different viewports, and what will change?
• content is always the same
• for design, might want to start with typography
• then move on to base unit
  • based on width/height of ad unit?
  • used for grids, line height
  • makes site feel consistent across changes
• grid can’t stay the same, but try to keep consistency
  • 6 -> 3 -> 1
  • or 4 -> 2
• shape and form includes textures & illustration style
• colour can be kept the same most easily
• design in the browser
  • brilliant idea
  • can’t do it though…
• tools:
  • share design ideas through style tiles
  • styleguides
  • http://pea.rs
• clients want to know what it looks like on different devices
  • they’re snapshots, not mockups
  • if they like the style tiles, then start prototyping in the browser
• don’t base breakpoints on device widths — should be based on content
  • e.g. videos, images, headings
• “if you’re not ashamed of what you did 3-6 months ago, you’re probably not keeping up”
• another app to try is typecast

a happy grain of sand

Aral Balkan, @aral

Video available on besquare.me

• think about how the whole system works together
• an experience is only as strong as its weakest link
• as a designer, try to remain naive
• washing machine:
  • designers think they’re building a machine that washes clothes
  • users actually want a machine that cleans clothes
  • don’t want or need to know the internals of how or why clothes are washed in different ways
• superman effect:
  • makes the technology disappear
  • and the interaction appear like magic
  • Ed: shouldn’t this be the A. C. Clarke effect…?
• interaction design is about dealing with the loss of a human from an interaction
  • replacing the human with a machine is hard
  • but it’s really important
• focus
  • great design is a symptom of a design-led organisation or organisational structure
  • antoine de st. exupéry: “Perfection is attained, not when no more can be added, but when no more can be removed.”
  • design is not democratic
  • you have to make sacrifices
  • in this day & age, great design is the business plan
• design > test > develop > test > design …
  • keep iterating
  • and don’t forget the vision
  • the user testing needs to be filtered through the vision
  • Ed: e.g. Apple does less user testing as they know that asking people doesn’t always give the right answer
• user empathy:
  • indeterminate spinner isn’t enough — need to show empathy when waiting
• web vs native: http://thelink.is/webvsnative