Thursday, 25 October 2012

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!

Monday, 17 September 2012

Over The Air 2012

Only just noticed (in September) that I hadn’t posted my notes from Over The Air 2012 in June!

I had a fantastic time — and so did my dad and my son! We had three generations at the same tech conference :-)

I need to write a separate blog post about the LEGO hacks that people put together during and following my LEGO Mindstorms workshop, but in the meantime, here's my notes from the other sessions:

Hacking Science and Space

Ariel Waldman @arielwaldman

invisibility

  • dark energy pushing us apart
  • dark matter keeping us together…
  • invisible superpowers:
    • belt that vibrates when you face north
    • synaesthesia for those that don’t have it…
    • syneseizure — feel vision through a gimp mask!
    • particle windchime
    • what would particle collisions sound like?
    • being used as an augmentation interface in collision labs

cyborgs

  • your phone has loads of sensors, available all the time
  • quake canary
    • monitor on your phone

interstellar

  • humans are really good at pattern recognition
    • galaxy zoo
    • planet hunters
    • the work you do actually gets credited to you!
    • grean peas galaxies
    • discovered as galaxy zoo lets you drill down into data behind images
  • NASA makes stuff available, but not necessarily accessible
    • spacelog.org
    • takes PDFs of transcripts and makes them come to life

science hack day

  • weekend hack day
    • isodrag: a typeface where all the letters have the same wind drag
    • DNAckery: cocktail of extracted Strawberry DNA…
    • arm alarm: won’t shut off until your pulse is angry
    • near death lamp: lights up when an asteroid gets close to the Earth

Open Web Device

Francisco Jordan @mepartoconmigo, O2 Labs

Slides available

  • still lots more people with feature phones than smart phones
    • 4 billion feature phones will be sold between 2011 & 2015
  • mainly because they can’t afford a smart phone
  • especially in Latin America, where Telefonica is trying to grow
  • want to provide a phone for $60-70!
  • Open Web Device - based on Boot 2 Gecko
  • plan to launch in Brazil at beginning of next year
  • Also partnering with Qualcomm to provide the chipset
  • still haven’t decided the OEM(s) who will be manufacturing
  • all open source: http://wiki.mozilla.org/B2G
  • can build your own ROM based on Android 3.0 or 4.0 kernel/driver backends
  • can also build B2G for desktop
  • Gaia is Mozilla’s front-end for B2G (also open source)
  • don’t have to use Gaia — B2G doesn’t even have to look like a phone
  • the keyboard itself is an application
    • you can replace the keyboard with another web app!
  • most new APIs in B2G are also finding their way into Firefox for desktop
    • just download Firefox nightly to see what’s available
  • apps are just webapps in a directory with a manifest.webapp JSON file
    • can use appcache to store stuff locally as well
  • using Sumon as a demo webapp
    • runs about 3x faster on B2G than on iOS!
  • Marketplace: http://marketplace.mozilla.org
    • open for developers, but not yet for users
  • or install from web: navigator.mozApps.install(manifesturl);
    • install an app from directly a web page

Anyone Can Code an Embedded Controller

Nicholas Herriot @nicholasherriot

Example device: connected printer — text questions to it and it will print them out!

  • Vodafone trying to bring connectivity to embedded controllers
  • Arduino and other microcontrollers exploding since 2005
  • mbed (http://mbed.org/) similar to Arduino, but started by ARM
    • 96MHz
    • ARM Cortex M3
    • can run USB host and I2C slave
  • online compiler & tool chain - works cross platform
  • easy to install & run code:
    • runs as a USB mass storage device
    • just copy code across and press restart button
  • can export from mbed online IDE to other toolchains:
    • CodeRed: eclipse & gcc based
    • others
  • wanted to set up a platform for microcontrollers
  • online IDE has a built-in SVN repository per project
  • built-in libraries has lots of common stuff
  • can extend with downloadable libraries (search available through online IDE)
  • Vodafone has an M2M network - GDSB
    • used by Kindle, TomTom
    • SIMs don’t expire, don’t need to top up
  • trying to open GDSB to developers…

You do know it is a phone, don’t you? (Adding voice to your mobile apps)

Tim Panton @Steely_Glint, Tropo

Tropo API

  • SaaS for server-side phone handling
    • Voice (PSTN, VoIP/SIP, Skype, iNum)
    • SMS
    • Other services via HTTP or XMPP
    • Multi-lingual (with multiple voices in each language)
  • SaaS provided by Voxeo
  • Web API is JSON/javascript based
  • also scripting APIs for Python, Ruby, etc
  • example uses:
    • making calls without sharing phone numbers (e.g. speaking to taxi driver)
  • scripting vs web api
    • scripting runs on Tropo servers and has no access to external data
    • web api runs on your servers - can access your data
  • also a REST API to start outgoing calls and other control & management services

Phono

  • jQuery plugin to make phone calls from the browser
  • open source client
  • picks up microphone from computer
  • can use server-side voice recognition…
  • can also pick up messaging from the tropo service
  • requires a back-end (but same API for all)
    • Flash
    • Java applet - takes much longer to load
    • Panda (Flash with echo cancellation)
    • WebRTC - native in Chrome Canary
    • PhoneGap/Cordova plugin
    • iPad/iPhone actually works better than most laptops
    • pot luck on Android < 3.2
    • much better on Android >= 3.2
    • early version of native iOS (available in github/phono/phonosdk)
  • can run both Tropo & Phono from a car battery
    • has been done at Burning Man

Development costs

  • in the US can make free calls
  • outside the US, need to ping Tropo for permission
  • they will often let you run a demo server with small number of minutes for no money

Mobile Websites Can Have Nice Fonts Too…

Laura Kalbag @laurakalbag, front-end designer

slides available here

  • typefaces can evoke emotional responses
    • not just in typographers!
  • iOS app: Fonts by AppEngines — shows you all the fonts available on your device
  • embed them on mobile using @font-face in CSS, just like on desktop browsers
    • works on opera mobile, android mobile >4
    • doesn’t work on IE Mobile, Opera Mini
  • sources of fonts:
    • fontsquirrel - all free
    • fontspring - one off license per domain
    • myfonts - one off license per domain
  • but can have a high impact on performance
    • and can flicker when load, etc
  • tips for better performance:
  • hosted fonts:
    • google web fonts - loads of free ones, but not so good quality
    • typekit, fonts.com, fontdeck are better - but pay subscription costs
    • but loaded using javascript… can be laggy
  • watch out for missing fonts on mobile (e.g. no Arial on Android)
  • and fonts can render differently on different devices

choosing a good font

  • heineman: designed for people with dyslexia
  • want to make something that’s really inviting to read, but then just sit back and actually read it easily
  • what makes a typeface relevant?
    • context of content & features of typeface
  • old style or humanist serif: based on early printing presses
  • transitional serif: high contrast, sharp
  • modern serif: modern classic, magazines, high class sophistication
  • egyptian/slab serif: marketing, shouting, very bold
  • humanist sans: clean & easy to read
  • transitional sans: utilitarian, clinical, swiss
  • geometric sans: clean, slick, structural, slightly childlike
  • script: lots of variety, generally not good for body text, better for logos or headers
  • novelty or themed: lack any subtlety, cheesy, decoration on a poster
  • watch out for free fonts — they’ll most likely be overused
  • choose the weight carefully:
    • too heavy is hard to read
    • too light may disappear on smaller screens

laura’s taste

  • easy to read
  • attention to detail
  • subtle
  • well-balanced, consistent & uniform
    • nothing jumps out too much

ePatient 101

Mark A M Kramer @mamk

  • a lot of healthcare is based on communication between the doctor and the patient
  • often doctor communication is not very effective
    • slow responses to email
    • constrained mobile devices due to privacy & security issues
  • big issues just scheduling appointments
  • quantified self — capturing and logging health information:
    • especially body monitoring
    • apps that take photos of food, confirm the food, then estimate the calories
  • Dan Appelquist: most mHealth is focused on the hospital & medical enterprise