Monday, 19 November 2012

Handheld Conference 2012

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.

handheld conference

cardiff bay panorama

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
  • 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
  • the app that’s always there
  • 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
  • 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…
  • 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
  • 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
  • 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
  • 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:
  • 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

Sunday, 28 October 2012

Droidcon London 2012, Day Two

The second day of Droidcon London — and they kept us going from 9am until 7pm with a full programme! As with the previous day, the keynotes were focussed on how Android is being used in non-phone devices — extending the rule of configurable software over fixed hardware.

I’d really like to add the slides to these notes — the Flurry presentation especially has loads of useful information that I didn’t catch. If any of the authors read this — please get in touch via twitter or leave a comment and I’ll add a link!

Future of Android - Vendscreen

Paresh Patel

http://www.vendscreen.com/

  • touchscreen device that fits as an extension on any vending machine
  • accepts credit cards via swipe + tap to pay
    • chip & pin coming later
  • network connected — makes the machine smarter
  • can cluster machines
    • e.g. lots of machines in a hotel
    • customers can get inventory from their phone
    • energy management — can turn off some
  • example: sold small artwork pieces in a vending machine
    • people weren’t surprised
    • prices didn’t have to be low
    • people paid up to $99 by swiping their card
  • right now running Android 2.3.4
  • minor modifications:
    • got rid of desktop
    • added a recovery screen

Future of Android - Parrot Asteroid

Frederic Albinet

http://www.parrot.com/uk/products/hands-free-car-kits/parrot-asteroid

  • parrot asteroid Android car radio
  • classic & mini using Android 1.5(!!?!)
  • tablet and smart devices using Android 2.3 (still old…)
  • does voice recognition search for contacts and music
    • music searches across connected device and also the internet radio stations and other sources
  • parrot app market
    • will be live from november
    • can browse from PC or from device
  • looking to extend to dynamic network between vehicles
    • though this would depend on other cars having devices with the same protocol…

ADzero phone launch

http://www.justadzero.com/

  • world’s first bamboo smartphone
  • quad core device
  • full HD screen
  • bamboo feels really good to hold
  • flash innovation: circle around the camera — works much better for macro

building songkick

Akshay Dashrath and Jamie McDonald, Novoda

  • took 2 devs 3 months to build initial version
  • agile process, two week iterations
  • tools used:
    • pivotal tracker
    • github
    • maven
  • third party libs:
    • ActionBarSherlock
    • ViewPagerIndicator
    • Novoda ImageLoader & Novocation
    • NovodaTime — dealing with Joda Time problems

user experience design

  • spent a lot of time finding pain points in initial install process using paper prototypes
  • found out that putting buttons in the action bar were not found by users
    • mocked up on an actual device to see how it felt
  • can set a custom notification light colour (works well with branding!)
  • styled login web view to look like rest of app
  • first launch experience:
    • had a scan screen with an OpenGL animation to keep the user entertained while the initial artist information is found
  • used external apps that expose content providers
    • google music — got artist names using a projection and flexjson to push it to songkick server
    • last.fm

caching & location

  • used novoda’s novocation location library
  • used Jackson mixture of streaming & tree model to avoid memory issues
  • data from web calls loaded into database, then database loaded into views with cursor loaders
  • detachable result receiver — google IO 2011 app
    • lets you deal with rotating views and re-attaching the new activity to the old cursor loader
  • all visited content cached using Reto Meier’s Big Cookie approach (see Making Good Apps Great)
    • “Just Added” concerts sync in the background
  • if offline, then shows a transparent banner at the bottom of the page
    • send out a sticky broadcast if an online query fails
    • broadcast cleared if the app gets a good response
  • Big Cookie caching can build up too much data
    • data removed on a daily basis by removing old data — e.g. past concerts, etc

testing

  • manual QA for most stuff
  • automated tests were more for stress testing
  • also did observational user testing (one-way mirror room)
  • put UI options in a debug menu so could easily do A/B testing
  • build machine runs instrumentation tests on however many devices are plugged into it
  • used Eclipse Memory Analysis Tool to check memory allocation
    • used to fix large back stack activity
    • enabled StrictMode to deal with issues with Google Analytics & Joda Time
    • Joda Time used the UI thread for DST settings (can be fixed — see Stack Overflow)
  • got featured in Play
    • installs went 400 / day -> 20,000 / day!

soundcloud audio in Android

Jan Berkel and Jon Schmidt, SoundCloud

playback

  • Java MediaPlayer talks to C layer MediaPlayerService
    • check out the C source code to see what’s going on
  • underneath this uses PacketVideo OpenCore up to 2.2, then Google Stagefright
    • shouldn’t have to care about underlying implementation but if you’re doing something complicated you do…
    • OpenCore
      • mature, stable but limited
      • seekTo doesn’t work in streams
    • Stagefright (default from 2.2 and beyond)
      • fixes seeking
      • but not available in all devices…
  • when launched shortly after 2.3 released decided to support 2.1+ so that could cover 75-80% of devices
  • to find out which mediaplayer, tried to read /system/build.prop
  • however, some phones had both frameworks!
    • one for streaming and one for encoding…
    • playing locally would behave differently than streaming from a server
  • so to actually find out, connect the MediaPlayer to a local socket and read the user agent on the other end…
  • built a StreamProxy local server
    • could cache and fetch chunks from CDN
    • MediaPlayer then talks to proxy
    • inspired by NPR android app
    • but still no control over buffering (may want to alter it depending on network conditions)
    • different versions of Android behave differently
      • ICS has a huge buffer so takes ages before it starts playing…
  • bundled Android HttpClient is broken (it’s an old snapshot, not a proper release)
    • have to catch NPE from execute!
    • recommended to use standard Java URLConnection
    • bundled HttpClient has now been deprecated

recording

  • live encoding options on earlier Android versions — just AMR AB
    • only good for voice
    • narrow range, low quality — sounds like a phone call
  • instead recorded in PCM and used 3rd party lib to encode it before uploading
  • chose ogg vorbis
    • good for licenses
    • java port is slow (and incomplete)
    • would take 4x length of audio to encode!!
  • from 2.3.3 Android introduced AAC encoding
  • new requirements involved getting at the actual audio data — simple editing, resuming record
  • had to write own native layer for codecs and audio processing (Java too slow)
    • used C-based Vorbis Encoder & Decoder with a thin wrapper
    • also added a native amplitude analyzer
  • tried to avoid sending data back and forth too often
  • but… now had to deal with CPU flavours
    • armv5 on older devices has no floating point support
    • have to build native pieces for various architectures (armv7, mips, x86)
    • older devices fall back to old-style encode later style
  • Jelly Bean has new media encoding APIs
    • will be useful in the future…
  • some sony devices have a patched media framework that behaves differently…

bug detection

  • robolectric
  • bugsense crash reports
  • get a load of devices and get people to use them

The fly-in app menu for designer and developer

Cyril Mottier @cyrilmottier

  • watch out for activity back stack
    • recommended to only use fly-in menu at root level
    • but still want the back button to exit the app without going via the fly-in menu
  • libraries (all on github)
    • android-undergarment
    • slidingmenu
    • android-menudrawer
  • don’t slide the actionbar
    • you’d need a custom actionbar…
  • or create your own: need a custom view group & view
  • see “making of prixing”
  • make the slid out activity inactive
    • click on it to make it visible again
  • may need to think about right-to-left languages having right-sliding menus

Who needs thumbs? Android Instrumentation and Reverse Engineering

David Teitelbaum http://blog.apkudo.com/

I only caught the very end of this, but it looked like it could be a really useful talk — worth chasing down the slides

Android and Arduino

Fei Manheche, Robobo

  • 3 steps:
    1. build basic circuit & test it from PC (use serial monitor via direct connection or Bluetooth)
    2. build basic arduino software to set it up to be controlled from Android
    3. build Android app to talk to Arduino
  • bluetooth modules available for £6-10
  • use amarino library to simplify bluetooth between android and arduino
    • can also use amarino app to test basic bluetooth connection
  • don’t send too much data to the arduino at once (unless you write buffering serial code on the arduino…)

Memory Analyzer: avoiding memory leaks

Felipe Ferraz, CESAR

  • each process on Android has its own Dalvik VM
  • the Zygote process is forked for each app
    • it already has common libraries mapped into it, so they’re shared as read-only between all apps
  • use adb to make a heap dump (kill -10 <pid>)
    • or use Eclipse…
  • useful to create multiple heap snapshots to tell story of memory leak
  • http://www.eclipse.org/mat/
  • make sure to null Callables inside Images

Using Ubuntu to develop cloud-connected android apps

Victor Palau, Ubuntu

  • juju: https://juju.ubuntu.com/
  • orchestrates groups of servers deployed to cloud systems
  • can deploy a local instance or to Amazon ECS (or any other OpenStack compatible service)
  • local deployment uses zookeeper to set up containers on a single machine

Mobile Analytics - taking your Android app to the next level

Simon Podd, Director of Sales, Flurry EMEA

  • according to EMF there are 2Bn “affluent adults” in the world
  • 17% of time spent in Android apps is in Europe
  • time spent in apps is increasing month by month (94mins/day in Dec 2011)
  • social networking category is growing fast (equal to games in Q1 2012)
  • Flurry tracking 220K apps across 660m devices
  • iPad makes up 88% of top 3 tablet sessions
  • of the top 20 Android devices by worldwide sessions (May 2012), the top 3 are:
    1. Galaxy SII
    2. Galaxy Ace
    3. Moto Defy
  • worldwide 2011 app revenue (iOS & Android):
    • 52% in-app purchases
    • 24% mobile advertising
    • 25% app sales
  • advertising revenue (from Flurry’s ad slots):
    • iOS $6-10 eCPM
    • Android $20-30 eCPM

gaming category stats

  • ages 13-34 spend most time in apps
    • 18-24 & 25-34 about even
    • fairly even gender split
  • more money spent by 25-34yo men (29%)
  • average transaction sizes fairly constant across ages, and higher than you might think:
    • M: $15.60
    • F: $11.90
  • customers download on average 50-85 apps during a device lifetime
  • but they only use 5-10 apps a day
  • there’s an app discovery issue on the device

flurry tracking

  • can use ranges for event parameters…

Applying lean principles to enterprise mobile development

Dave Slocombe @daveslocombe — Head of Mobile Channel, lastminute.com

  • product scorecards
    • 5 or 6 key goals for the year
    • see Marty Cagan, SVG
  • keep time to release short
    • don’t miss the opportunity to innovate
  • avoid big bang releases
  • essentials: co-location & cross-functional

generating and managing ideas

  • ideas should come from all sides of the business
  • need to have a massive bucket of ideas
  • make them visible so you can choose amongst them
    • great for managing HiPPos (highest paid persons)
    • they can see that their idea is on the board
  • doesn’t mean that you have to work on them!
  • prioritise ideas
    • use the product scorecard

selecting ideas for development

  • UX team does customer insights
    • qualitative: what problems are we solving? is there a market?
    • quantitative: talking to data analysts
    • looking for strong signals
  • product owner reviews customer insights
  • UX team create designs in iterations, increasing fidelity as they go
    • want to be able to ditch bad ideas before spending too much time on them
    • try guerilla testing: take it to someone in a coffee shop and ask them what they think
    • get marketing and devs involved as well
  • get UX ideas out without using developer time
    • use axure or similar
  • have an internal site of proposed designs
    • available to exec team
  • play back early stage designs to other teams, like finance and supply
    • surface problems and feedback early
  • if ideas are generated, they can go back onto the ideas board (don’t deal with them right now)

development processes

  • retrospectives
    • done every two weeks
    • if you leave it longer, the issues get bigger and harder to solve
    • more frequent = smaller, easier to fix issues
    • e.g. found that they needed a “design issues” wall
      • edge cases found missing by the designer, not captured
      • introduced “creative coding” — designer + developer pairing, making a first pass of the UI
      • brings designers into what’s possible on mobile
      • helps devs understand value of brand & aims of user experience
  • Dave was originally a skeptic of pairing, but converted:
    • sharing knowledge
    • repeatability, consistency
    • drives out “hero developer” mentality

testing & releasing

  • “release process is the metronome that drives progress”
  • continuous deployment
    • every check-in should be deployable
    • repeatable consistent environments
    • currently 12mins to deploy to production
  • devices are tiered for testing:
    1. automated tests, max experience, manual test
    2. automated tests, optimum, limited manual
    3. observe trending, monthly testing, graceful fallback
  • just pushed iOS 3 down a level
  • looking at webdriver to generate PDFs for visual check

tying it together

  • showcase every two weeks
    • include other departments
    • no roadmap items, just value added in the last two weeks
  • focus on what your customers say, not what the industry says is cool
    • apps vs web — choose from your own analytics
    • e.g. for travel, 3x more likely to book on web
  • stats:
    • seen 10% month on month growth in Android, compared to iOS
  • ensure product always gives tech team 20% tech debt time

Replacing the Android emulator

Daniel Fages, Genymobile

http://androvm.org/

  • built on top of android-x86
  • has an emulated WiredSSID wi-fi connection
  • can use OpenGL 2.0 using hardware
    • works really well - can emulate Angry Birds
  • just added injecting sensors from attached Android device (accelerometer, etc)
  • currently working on management tool and other features
  • looking for feedback on next features
    • network
  • also can install VM on other people’s machines without having to worry about SDK
  • will be working to integrate with Jenkins
    • could be great for creating a snapshot when something goes wrong
  • not working:
    • multitouch
    • NFC, Bluetooth
    • GSM pieces: SMS & voice

Developing accessible apps for Android

Gary Readfern-Grey, RNIB

  • many people are relying on apps as the only way to do crucial things in life
  • talkback comes with Jelly Bean
  • problem:
    • icon-based buttons don’t have proper audio labels (“icon 39”, “icon 19”) so can’t find what is on the screen
    • watch out for “jump back button button
  • accessibility came in on Donut 1.6
    • relied on physical keyboard and trackball
    • touching the screen behaved as normal and gave no feedback
  • Talkback and Eyes-free-keyboard added more recently
    • eyes-free added in Gingerbread
  • ICS brought in explore-by-touch
  • Jelly Bean brings in gestures:
    • moving focus
    • back, home, recent apps
    • notification shade
  • WebView is harder
    • Jelly Bean & ICS have an additional “allow web accessibility” checkbox

testing your app

  • download talkback from google play
    • Jelly Bean has it installed (at least on Nexus 7)
    • settings / accessibility / turn on Talkback
  • check that views are focusable and have content descriptions
  • custom views need hover events

documentation

  • Google I/O 2012 making android apps accessible on youtube
  • developer.android.com: making applications accessible
  • android 4.1 accessibility APIs

top things to do:

  • add content descriptions to your widget
    • can do in XML layout using android:contentDescription attribute
    • or use setContentDescription
    • latest linter should check for this
  • make sure you can get to all elements of the app through a keyboard
    • will also help for Google TV
  • don’t depend on colour alone…
    • e.g. “correct the field that’s coloured red”
  • test it! try out Talkback
  • RNIB Innovation can help you
    • RNIB offer paid consultancy
    • if they’re doing something that RNIB really want and aren’t in a position to pay, then they could offer free help too
    • innovation@rnib.org.uk

Droidcon London 2012, Day One

The first day of Droidcon London was a barcamp, though one with lots of pre-prepared presentations.

The main highlights for me were finding out about useful libraries and services developed by the Android community — RoboSpice, TestDroid and Dr. Power — that and meeting more Android developers (apparently there were over 1000 there!).

immersion haptics

  • haptic effect preview app available on google play
  • immersion started with game controllers
    • e.g. logitech steering wheels
  • also have automotive
  • android just has vibrate on and off
  • immersion sdk extends the vibrate method
  • http://immersion.com/haptic/sdk
    • adds about 400Kb to app…
  • deals with all different vibration methods
  • copes with devices with no motors (just doesn’t do anything…)
  • best tweet about haptics @hapticsdev wins a galaxy note 2
  • navigation queues
  • battery usage — about 3% for an hour of vibrate usage during a game
    • goes down to 1% for piezo vibrators
  • but don’t use the motor the whole time — it just annoys the user and dulls their senses
  • leave the haptics and sound options separate (so people can play silently but keep haptics)
  • standardisation of patterns for accessibility?
    • library of 124 effects is a default standard
    • up to RNIB to come up with semantics

robospice

  • library for making async network requests easy
  • https://github.com/octo-online/robospice
  • intro guide
  • available on maven central
  • AsyncTasks not so useful as the activity can change while the task is still processing
    • e.g. if device rotates while running, then asynctask could update the wrong activity
    • leads to memory leaks
  • Loaders are an alternative
    • but designed for database access not networking
    • can’t keep the response if the activity changes
    • no exception handling by default
  • RoboSpice uses a background service
    • activity creates a request and a request listener
    • request passed across to the service by the spice manager
    • requests can last beyond a single activity, so can pass results to the newly rotated activity
  • each context that needs a remote call will have its own SpiceManager, each of which binds to the SpiceService individually
    • can have a SpiceManager in an activity, a service, a fragment, etc
  • SpiceService keeps results in a cache so can respond immediately
  • integrates with Spring RestTemplate for Android

text layout for localisation

By Kotikan, developers of SkyScanner

Charles & Robert@charlessharley

  • different languages have radically different word lengths for the same concept
  • best solution is to guide your translators to use shorter text lengths
  • sometimes not possible…
  • built-in truncation only operates on the whole string — can skip out important words or syllables
  • created custom TextViews
    • resizes text to fit (keeps on getting smaller)
    • flexible truncation using markup
  • code currently not available as open-source, though Charles & Robert trying to persuade their company that this would be a good idea…

resizing to fit

  • need to separately subclass TextView, Button & CheckedTextView
    • put resizing logic into a common utility class
    • decreases size (down to minimum) until fits
  • also have harmonisation to keep consistent text size amongst similar widgets
    • have a harmoniser that listens to text size changes across a group of widgets
    • sets text size of all to smallest of group
  • also used XML group ID to define harmonising groups in layout
    • include a new namespace
    • defined as res-auto so will be populated with package name
    • can be used to add additional attributes
    • key needs to be group ID and context so that XML files across the activity can be grouped together
      • context must be declared as a weak reference to avoid memory leak

flexible truncation

  • check need to truncate first
  • then parse markup to split sections
  • measuring each section
  • truncate sections to fit space available
  • cache text panes

KirinJS

James Hugman @jhugman http://bit.ly/kirin-github

  • most apps James has written are fairly IO bound
    • so performs fine for them
    • obviously, games would not be suitable
  • Glasto 2011 app stored JSON data into SQLite
  • other similar approaches:
    • Calatrava — similar to Kirin but from a web dev point of view
    • j2objc — compile java into Objective-C
      • under heavy development…
    • Ejecta.js — write to canvas, renders in OpenGL

Sony SmartWatch

Jerker Lindgren Götsten jerker.lindgren.gotsten@sonymobile.com

SDK available at http://sonymobile.com/developer (also available as ADT extensions)

  • notification & control APIs are shared with SmartWatch + Smart Wireless Headset
  • notification is stateful, with a central database on the phone
  • battery life is an issue — watch can last less than a day if over-used…
  • also frame rate is 6-7 FPS for full screen images
    • faster for partial updates
  • extensions can be started either by an app on the phone, or by the user on the watch
  • you get a Pause event if a high priority input happens (e.g. phone call)
  • SDK has utility classes to receive sensor events or send updates
  • music player also available as open source
  • host app searches Google Play looking for extensions that include LiveWare… phrases
  • sports apps are working really well in Google Play
  • other apps:
    • remote camera viewfinder
    • tic tac toe, puzzle
  • popular in Japan — with other small technologies :-)

OpenCV for Android

Erik Hellman

  • Android library is a wrapper on top of native API
    • includes armv5, armv7 and x86 variants
  • object detection
    • face, hand, eyes, edges
  • optical flow lets you track points in a moving video
  • lots of alternative classifiers available (search online)
    • haar cascade is a little bit slower than lbpcascade
  • in Android, front facing camera is 1, main is 0
  • better to work with smaller preview window size
    • 320x480 is often enough
  • faster to reuse bitmaps & matrices (avoids lots of allocations)

New Samsung developments

Manfred Bortenschlager http://developer.samsung.com

  • planning to have Samsung apps on fridges, washing machines, air conditioners as well as phones and cameras

galaxy camera

  • 21X optical zoom
  • Android 4.1,
  • basically a Galaxy S3 with a camera attached!
    • still has 3G and Wi-Fi
    • feels fairly hefty for a compact camera
  • software control gives you additional camera features:
    • automatic zoom to moving object
    • zoom while taking picture (for effect)
    • slow sync to enable light writing
    • voice control
  • current API (work in progress):
    • ParametersEx class with 130 methods…
    • setAperture, setShutterSpeed, setIso, etc
  • sample usage: camera = Camera.open() params = new ParametersEx(mCamera) params.set... params.updateParameters()

Stella SDK

ChatON & AllShare

  • ChatON: online chat
  • AllShare: online media storage & sharing

Big Fat Soft-Key

Giovanni Bisutti http://inputdynamics.com/

  • using microphone & accelerometer to detect taps on phone case
  • works on back or front of phone
  • expect SDK to be released next year
  • uses up to 7% of CPU when in use… (though more optimisation required)
  • new app being demoed next month
    • mostly native code
  • looking for an Android developer to help develop the SDK…

Future of Android - OUYA Game Console

Julie Hurman @jhurman

http://ouya.tv/

  • made $8.5m on kickstarter… ($1m in 8h22m!)
  • disrupting a market that hasn’t changed in 30 years
    • consoles and games are both expensive to purchase
  • OUYA is about openness for both gamers and developers
    • all games will be free to try
    • developers build for Android (no cost for SDK)
    • every single OUYA is a debug console
  • working with NVIDIA to have best Tegra3 performance
  • will have its own storefront
    • will curate content (review for copyright infringement, spyware, etc)
    • will not have ads
  • schedule
    • first units are coming off the production line
    • dev units will be out in December
    • kickstarter backers will receive units in March
    • aiming for full roll-out in April
  • goal is to potentially refresh OUYA on a yearly basis
    • won’t have a 6-7 year lifecycle of existing consoles
    • some of the audience were concerned about whether a stock NVIDIA chip would be able to have an impact in the living room when facing custom hardware from the likes of Sony. But as John Carmack has said, “technology doesn’t hold back game designers anymore.”
  • store will have cryptographic controls for securing content, but they’re working to allow root access to the device as well (could be interesting)
  • will be able to show the games that have had most time played in them
  • going for 70/30 revenue share
  • majority of SDK is in-app payment API

Demo Camp

This was lots of very short (1 or 2min) product demos. Some better than others…

  • testdroid app crawler
  • palerta — private social smart friend alerter
    • doesn’t overshare your location
    • by Little Fluffy Toys
    • also make location library
  • Tawkon - Dr. Power
    • can see power usage on individual processes of each app
  • secret.dj
    • 300 venues
    • see what’s playing & add to playlist
    • gamification to gain credits & jump queue

Thursday, 25 October 2012

MomoSho: Mobile technology: art or science?

The second Mobile Monday Shoreditch (and my first). I think Helen (@technokitten) is aiming for these sessions to have an edgier, less corporate feel than the bigger Mobile Monday London events. The sofas for the panel certainly made it feel more intimate — and there were many fewer suits in the audience than at the typical Momolo. I’ll be coming back!

Vic Keegan

http://www.victorkeegan.com/ @vickeegan

Alfie Dennen

@Alfie

  • QR codes feel clunky
  • Layar is pretty but do you use it after the first couple of times?
  • Google Glasses
    • hipster nightmare - being followed by a million bots
  • bionic contacts
    • closer than you think: a man already has an electronic camera eye!
  • makies
    • can extend with arduino & raspberry pi
  • the whole of human history has been about craft
    • we’ve stopped crafting in the last couple of generations
    • 3D printing may be bringing this back
  • Bus Tops
    • computer art in local context
    • project unfortunately coming to an end
  • Big Art Mob
    • attempt to catalogue all public art in the world
  • Street Ghosts
    • take pictures of people from street view and paint them on the wall of the actual place
  • mobile is more an extension of computing into ubiquitous technology than anything different by itself

Panel

Creativity

  • AB: agile & lean seem to get rid of creativity - it’s seen as waste
  • JN: coding is creating too, not just visual
  • BK: anyone can create something now
  • AD: it normally just starts with a stupid idea!
  • BK: always looking to innovate within boundaries
    • would love to start with just a crazy idea but would probably get lynched!
  • JN: boundaries & constraints often inspire creativity
    • demoscene, 5K awards
  • AB: a creative person should know their tools
    • just coming up with an idea and having no idea how to make it doesn’t work as well

Alfie: “All mobile art is shit!”

  • AD: the art for mobile should involve using the sensors that make mobile different from desktop — otherwise just digital art
  • VK: not completely true: using a phone to draw & zoom in to add detail
    • also poems made for phones — short and fit the screen
  • JN: Japan has lots of book written for and on mobiles
    • JĂĽrgen Scheible mobispray: virtual spray can using a projector and an N95
  • AB: for me, art is in a room with lighting
  • BK: guy using darts to recreate a Jackson Pollock style piece of artwork that others can join in to create

Creativity

  • BK: iAd platform hooking into gestures & gyroscope
    • improving engagement
    • recent project — recreating a universe with gyroscope: achieved 90s engagement per unit
  • AB: brand slickness can get in the way of creativity — afraid to show things internally without making the UI slick
  • JN: a lot of people have a hard time imagining low-fi mockups as the real thing

Ilicco Elia: has anyone seen any decent mobile ads?

  • Mobile is like TV advertising at the beginning — started as presenters reading out adverts on air
    • seems to be web ads squeezed down into mobile screen
  • JN: South Korea — lunchtime sun sculpture
    • at noon, the shadows made a QR code that gave you a voucher
  • BK: hooking in to where am I and what is my context?
    • how can consumers create content that feeds into the campaign?
  • AB: don’t want banners — haven’t clicked on one for years
    • create a service, a site, an app that does something useful to engage people
  • VK: people don’t want banners on mobile
    • location-based advertising full of potential — and will be full of potential for years to come…

What in the last week, created by mobile that stuck in your head?

  • AB: lenticular image, move the device to see around
  • AD: art spotter
    • not focussed on selling stuff
  • JN: robot game that just looked so beautiful
  • BK: creatives project — james alloban
    • using your voice to select objects and create art

Social input?

  • HK: Tracey Moberly — artwork from instagram
  • AD: Normalize: the de-instagrammer app
  • BK: ascii art through twitter — playing out a car journey
  • VK: making art out of the spare bandwidth in QR codes
  • HK: social is reinvigorating arts & crafts
    • we can share the learning — it’s on the internet
  • JN: open source & creative commons
    • created an open source RPG with various international collaborators

some of the best art comes from taking a poke at society

  • harder in mobile? squandered due a need to monetize
    • flashmobs one counterexample
  • HK: rich people sponsoring art?
  • VK: certainly, but other sources of revenue available
    • last column in Guardian: can you make an app cheaply?
    • cost £300 in total
    • profit share is an alternative (Ed: but still profit driven)
  • JN: lot of people just create stuff for fun or a hobby
  • AD: technology has decimated artistic creativity
    • artists left behind by technological development
    • arts trying to address it through Digital R&D fund
    • trying to retrain visual artists digitally
    • my projects funded by people who will give me money for them!
    • starting with friends
  • BK: technology is not expensive, ideas are free, the hurdle is learning
    • “just learn enough to get you over the next hurdle”

gamification & serious games?

  • AD: Jane McGonagall turns the whole world into a game
    • academically led premise
  • AB: contextual tips as you’re playing are a great way to learn
  • VK: toby roland games manufacturer
  • AD: game where you play a real guitar at the device to progress (Rock Prodigy?)

MomoLondon: HTML vs Native

A lively and exciting debate (despite the old material!), well-run by Ewan MacLeod, Editor, Mobile Industry Review @ew4n

Panel

Team HTML5

  • Andrew Betts @triblondon
    • HTML5 apps for FT
  • Simon Arora, Biz Dev Mgr, Keynote DeviceAnywhere @devanywhere
    • Initially all about native
    • More and more customers asking for HTML5
    • More platforms with a single codebase
    • No need for appstore or marketplace certification
    • Wider reach to monetise services
  • Jose Valles, Head of Bluevia @josevalles49
    • Been an HTML5 supporter for a long time
    • Launching FirefoxOS device

Team Native

  • Alex Caccia, President, Marmalade @marmaladeapps
    • one of the leading cross-platform build platforms
    • take advantage of ARM instruction set…
    • two of top three games in US app store built using marmalade
    • HTML5 just doesn’t provide enough power - need native for performance
    • HTML5 does not solve fragmentation
  • Chris Book, Bardowl @bookmeister
    • native gives close access to device APIs
    • deal with different network situations
    • HTML5 doesn’t work for audio streaming and caching
  • Nick Barnett, CEO, Mippin @docnickb
    • make app builders for operators and manufacturers
    • provide both HTML5 and native app builders
    • it’s more about the business model and distribution
      • if you want to be in the app store, you have to be native

Last app you paid for?

  • AB: Open House London
    • because their website is appalling and doesn’t work
  • SA: Travel Deluxe
    • native london travel
  • JV: probably a skateboarding app, or tripit or spotify
  • AC: Expense Calculator
  • CB: New Star Soccer
    • 10 games free, then in-app purchases
  • NB: International Rules of Yacht Racing
    • native

All native apps. If you want to buy an app, it has to be in an app store…

What about Facebook?

  • AC: Hardware platform is moving faster than anything else
    • If you come up against an issue, you’re against the browser
    • The only way past is to know the details of the insides of the browser
    • Can’t solve it by logic (terrible for project management!)

FT web app UX

  • EM: FT webapp has to go through local cache expanding step before starting
  • AB: equivalent to installing an app from the store
    • if you say no, it still works; but in a potentially limited way
    • actually a benefit: allows levels of access

Stats from deviceanywhere

  • SA: out of 100 customers, top 25 are looking at HTML5
    • have a lot of enterprise customers
    • looking to increase their reach
  • NB: these customers already have iOS and Android apps?
  • SA: yes, looking to extend reach across devices without decent appstores

HSBC Business Banking

  • EM: it’s an utterly crap HTML5 experience
    • banks say they’d love to do HTML5, but security say no!
  • JV: why then do they have online banking?
    • want to keep customer experience
  • CB: native NatWest app is better than web experience…
    • haven’t been able to update their website in 12 years!
    • loads of apps where you use native app first rather than web site
      • e.g. Hailo, National Rail Enquiries
  • NB: cross-platform HTML5 is a nonsense
    • at Mippin, we build web app builders for each platform separately
  • AB: that’s just ‘cos you’re not doing it very well!
    • FT use same codebase for Android, iPhone, iPad
  • NB: but Windows Phone 7 UX is completely different from iOS
    • customers expect something different
    • so you need to write your UI differently anyway
    • may as well write it natively each time

How do we resolve vested interests? And designing for format?

  • AB: each format and each channel will have differing expectations
    • if you define your constraints narrowly enough, natively will always be better
    • if you have a broad strategy and vision, then web technology will win
    • what about TV? what about kiosks?
    • a single web technology solution will adapt to those situations
    • single code base works with touch, keyboard and gestures too!
    • at a recent hackday, FT Labs connected a Kinect and controlled the app without touching the screen
    • the FT webapp works in the way that the people reading the paper are used to — independent of device expectations
  • AC: want a fine degree of control over what it looks like and how it behaves
    • in gaming environment, you really want to make the app shine
  • CB: isn’t this all about the 30% that Apple want to take out of the subscription?
  • AB: it’s not (exclusively) about the 30% — it’s more about a direct relationship with the customer
    • enables customers to switch devices without losing their subscription
  • CB: but Spotify have native apps and still go cross platform whilst keeping relationship with customers
  • AB: if Apple changed their rules to say that Spotify would have to give a percentage of their revenue, then Spotify would be stuffed
  • NB: if the Daily Mail went the FT route would people get their news elsewhere?

Is it fair to say that HTML5 is destroying usability of mobile platforms?

  • JV: no, it’s building something
  • CB: Google Maps browser version just not as good as previous native version

Hybrids?

  • NB: mippin use unique per platform wrappers
    • PhoneGap works well for iOS, not so well for Android
    • BlackBerry has WebWorks
    • hardcore gaming is a pretty specialist use case
  • CA: use the right tool for the right job
    • SDK supports HTML5 content within an app
    • and then you can switch out and use the native with ease
  • Audience: built a PhoneGap app and was appalled by performance
    • scrolling 50-100 names was just not good enough

Native provides consistent experience?

  • Spotify on some platforms lets you order playlist, Android doesn’t
  • if been written on HTML5, then would have worked fine
  • AB: people put 70% of budget into iOS
    • then 20% into Android
    • then 5% into Windows and Blackberry…
    • not surprising that non-iOS apps are crap

Discovery…

  • JV: 700K apps in Apple appstore, so discovery there is hard too
    • don’t see a difference
  • AB: FT not in a unique position – shared by lots of big brands
    • for small companies, app store is probably a good thing
    • FT have specialist native apps in the store which point users in the direction of the web app

Prisoners of the market owners?

  • NB: usual retail model: retailer takes 30-40% of revenue
    • and benefits can be considerable!
    • if you’re in Brazil in 2 years time with Boot2Gecko devices, then the mindset could be completely different
  • Dan Appelquist: isn’t that the issue — app stores are dragging us back into the old model that the open internet is breaking us out of
  • CB: yes, the dominance is worrying
    • but it’s a business making opportunity for startups
  • CA: native is not closed
    • hardware manufacturers trying to make best user experience

Security in native?

  • CB: difficult to securely store offline data
    • premium audio streaming is not yet possible in HTML5
  • EM: a bank developer said “the security people want a native app for encryption reasons”
  • AB: why does the online banking not just work on the phone?
    • yes, you can have encrypted storage, but do you need it

Best way in for mobile development

  • NB: use an app template toolkit for a size that fits
    • learn to be a mobile developer…
  • what if you just want to see your idea?
  • CA: most dangerous word when you start is “just”…
  • AB: the reason for the standard layouts on web is ads
    • have to build the design to fit the adverts
    • there’s been a boost in design creativity from moving to new formats
    • you can take that newfound focus on user experience and bring it back to the desktop
    • you’d never expect a mobile app to have big gutters down the side
    • unless it’s an iOS 5 app on an iPhone 5…

Notifications

  • NB: issue for HTML5 apps
  • AB: W3C working on notifications as a spec…

New users from India, China & Brazil won’t be in Apple or Google’s ecosystem

  • NB: won’t be a technology decision — more of a distribution

Javascript libraries?

  • NB: 85% of development in HTML5 apps goes into javascript

Great new debugging suites for Android Chrome and iOS Safari

  • Dominic Travers: great time to develop HTML5 apps!

Will we still be arguing in 5 years’ time?

  • AB: native will always be able to innovate faster
    • web will be behind, but standardised
    • FT’s Android app is partly native for performance
    • as soon as the browser catches up, they’ll remove the native part

Announcements

  • W3C coremob.org community group
  • UKTI Competition Final 29th October
  • 7th Anniversary in November

dConstruct 2012

Catching up on publishing my notes from the last few months… Here’s dConstruct 2012 — a conference more about inspiring and provoking new ideas than specific technology.

The highlights were Scott Jenson demanding we come up with a better way to discover UIs for the Internet of Things; Tom Armitage telling us why we should build toys (and why they are different from prototypes); and James Burke (yes, that James Burke) taking us on a tour de force whirlwind journey through the history of technology. Not to mention Seb Lee-Delisle turning the entire audience into a giant fireworks display!

The audio for all the talks is available from the dConstruct archive. What follows is my rough notes covering the points that caught my interest.

The Flower, The Field and The Stack

Ben Hammersley @benhammersley

  • “if your code isn’t elegant, it’s probably wrong”
  • levels above individual UX:
    • social UX
    • what the experience does to the rest of society
  • how do we make those layers beautiful & elegant?
  • media does affect society
    • we deny the Daily Mail fearmongering
    • but build gamification, add marketing, etc
    • you are changing society in some way
  • what messages can or should we put out?
  • first generation in the history of humanity to have exponential growth in our capabilities (Moore’s law)
  • yet we are ruled by people who don’t quite understand that…
  • government wants us to be individual billionaires
  • but it’s not like that — the web is all community based
  • think about how to expose the interconnectedness — the symmetries

Cure for the Common Code

Jenn Lukas @jennlucas

Beyond Mobile - Beyond Web

Scott Jenson @scottjenson

  • no way that 60s mainframe guys would understand mobile phones
    • even if we told them about it they still wouldn’t understand
  • default thinking
    • e.g. when TV first came out, they read radio plays in front of the camera…
  • Scott was first mobile designer at Google
    • worked on Google Maps
  • felt tectonic plates changing from mobile OSes, to apps, to web
  • built a simple test and sent it out to a google mailing list
    • got 90,000 results in a few hours…
    • web-based — viral spreading
  • whole new world opening up and apps is an old world model

what’s happening:

  1. app glut: is there really going to be an app for every different thing?
    • the apps are like the Hitchhiker’s Guide mice – experimenting on us
    • value must be greater than pain
      • SMS: great pain but bigger value
      • Google making page load 0.4s faster: reducing pain
      • if you get pain down to zero then people usage
  2. size & cost reduction
    • e.g. pill bottle that calls your phone if you don’t open it each day!
  3. smart devices leverage other platforms
    • e.g. withings scale has interface on your phone

seen this before? where’s it going?

  • yahoo: catalogued links — grew too big
  • google: just search
  • RFID & sensors in everything (Bruce Sterling spimes)
  • triggers from physical locations
    • e.g. at bus stop want to see that departure board, not the whole app…
  • just in time interactions
    • use it, then lose it

paradigm shift

  • kuhn cycle:
    1. normal science
    2. model drift
    3. model crisis
    4. model revolution (because old science still works for most stuff)
    5. paradigm shift
    6. and back again…
  • software: if it’s so important, you have to reuse it
  • need to move to experience: discover, use, discard
  • trapped in the browser:
    • awesome experience with a command-line on top!
    • doesn’t really work so well on mobile without a proper keyboard…

suggestion

  • asking for a detente between native and web
    • phones should have a discovery service
    • google my room rather than my world
    • access a list of nearby services
  • get the pain down to zero so I can get to the web as soon as possible
  • but web apps suck!
    • native is awesome and will always be more so than web
    • but talking about basic small things that can’t do apps
    • toasters, movie posters, etc
  • smart toaster, really?
    • because pain is low, the value doesn’t have to be high
    • change the “done” sound
  • use my phone all the time?
    • once you’ve got the “digital soul” of a thing
    • you can access it from anywhere
    • e.g. Sonos system: only accessible from phone with app…
  • no company will do this, no money…
    • have to think in layers
    • discover
    • interact
    • export/communicate
    • organise

chicken & egg

  • need to start building it from both ends
  • are we all going to be using iPhones 30 years from now?
  • no company will make this:
    • we are the next Apple!

The Hacker’s Guide To The Galaxy

Ariel Waldman @arielwaldman

  • black holes are like super-massive hackerspaces
    • spewing out all sorts of stuff
  • SETI are starting to look for light pulses as well as radio waves
  • planethunters - find exoplanets using human pattern detection
  • instead of discovering life in the universe, what if we put it there…?
  • astrobiology
    • water bears can survive for several days in the vacuum of space
    • lichen good at breaking down bare rock surfaces, and can live in the surface conditions of Mars
  • citizens in space
    • cubesats: 10cm^3 mini satellites
    • gathering ideas to send into space
  • university rover challenge
    • annual competition for universities to build next-gen robots
  • beard detector at science hackday
    • USB microscope connected to OpenCV
    • picked up by particle physicist to detect cosmic rays in a cloud chamber

Pixels People Play

Seb Lee-Delisle @seb_ly

  • PixelPhones
    • synchronizes phones across wifi
    • then detects positions using camera
    • open source on github
    • nyancatch — catch the nyan cat as he goes past your pixel phone
  • MMOsteroids (multi-player asteroids)
    • but not actually real…
  • digital fireworks based on motion detection at the bottom of the screen
  • using digital media to bring people together in interesting ways
    • phones normally put you in your own private world
    • pixelphones makes a gathered experience using the same
  • putting power in the control of the audience
  • web-based games: playing with the audience
    • your expectation of the other players changes your experience

Imagined Futures

Lauren Beukes @laurenbeukes

  • “those who can’t imagine the future are doomed to fuck it up”
  • the Cosby Show laid the way for Nelson Mandela
    • he made it possible for racist white south africans to see black people as people
  • Novel: Moxyland
    • looking at the gaps between the rich and the poor
    • how an apartheid state might come into being again
  • science fiction’s imagination
  • makes the future personal
  • focusing on a single person allows you to get close and understand a shocking event
  • fiction allows you greater empathy than journalism
  • re-imagining monsters
  • “the universe is made of stories not atoms”

The Save Button Ruined Everything

Backing up our digital heritage

Jason Scott, Computer Historian, owner of @sockington

  • “when my cat was being interviewed for People magazine…”
  • the floppy disk icon has no meaning to kids these days
    • they don’t know what it is
  • Timeshare system designed at MIT 1964
    • based on IBM 7094
    • SAVE command to save status
  • originally saving was a slow process
  • http://archiveteam.org
    • saving geocities etc
  • don’t delete things just because you think you’re done with them
  • it’s a responsibility
  • always provide an export function

Making Friends: Toys, Toying and Toymaking

Tom Armitage @tom_armitage, http://infovore.org

  • father worked as an amateur woodworker — made toys
    • very impressive ones too — I’m jealous!
  • “I wonder if I make toys today because my dad made toys for me”
  • what is a toy: something you can fiddle with — a simulation
  • SimCity: not actually a good simulation of a city
    • but does expose the moving parts
    • stuff left out also important
  • caricatures:
  • Toys as Culture: Brian Sutton-Smith
  • modern day
    • The Demoscene
    • elevated by RGBA (4k program)
    • craft by Linus Ă…kesson (runs off a 9V battery)
  • free of work constraints
  • restricted by other constraints (file size, hardware, etc)
  • often have no utility
  • but definitely have purpose
  • Ghostcar
    • a foursquare account of yourself - timeshifted from a year ago
    • made Tom checkin more ‘cos he wanted good data
  • a time lapse video, with the scrubbing controlled by how close the viewer is to the screen
  • “we expose purpose and meaning through the making”
  • seamful design
    • emphasising the edges and transitions
  • LEGO is seams everywhere
  • so is twitter: it’s a messaging bus
  • tower bridge twitter account
    • exposed seams by its interactions with other people
    • followed by cab drivers so they knew not to drive across when it was open
  • Toca Boca: helicopter taxi
  • Chris O’Shea: makego — incomplete car
  • Makies: custom dolls
  • Toys are finished, not prototypes
    • they have seams but not rough edges
  • Thomas Heatherwick (designer of the Olympic Cauldron):
    • get things into the world quickly
    • don’t keep things in your imagination
  • Toys are small scope — that’s important: it means you can finish more stuff
  • when you’re making a toy, you have to imagine the player
    • you have to play with it while you’re making it
  • problem-solving is convergent but it’s obeying the problem
  • toy making is divergent… creative
  • making is playing is making

Does Prediction Have A Future? Admiral Shovel and the Toilet Roll

James Burke

These notes in no way capture James’s talk. Please listen to the audio recording and marvel!

  • focus is for computers
  • creativity and imagination is humans’ strong point
  • Burke working on a learning system
    • 2800 historical figures, events & ideas
    • connected 35,000 ways
  • Laplace: you want me to predict everything? fine! tell me everything
    • may soon be possible to gather, look at links and spot inconsistencies
    • but institutions often exist to maintain the status quo

Scarcity

  • representative democracy
    • invented because roads were slow…
    • now we have much faster comms
  • most of our social and organisational systems are based on scarcity
  • but the nanotech cornucopia machine will turn that into abundance
  • what happens to us socially? all the organisations and processes?
  • we may have only 40 years to work it out!