$30 off During Our Annual Pro Sale. View Details »

Designing for the mobile web

makenosound
September 27, 2011

Designing for the mobile web

Given at Swipe 2011. An iOS and Mac development conference.

makenosound

September 27, 2011
Tweet

More Decks by makenosound

Other Decks in Design

Transcript

  1. Max Wheeler
    Icelab
    Designing for the
    mobile web

    View Slide

  2. View Slide

  3. I am designer.

    View Slide

  4. I am designer.
    (web)

    View Slide

  5. Sorry
    .

    View Slide

  6. I have designed:
    * the Water Storages app for the Bureau of Meteorology
    * Decaf Sucks

    View Slide

  7. St
    a
    te of the
    mobile web
    * Rapid change
    * Pre-iPhone, poor HTML/CSS support

    View Slide

  8. WML, basic
    HTML/CSS.
    * Wireless Markup Language
    * Last 4 years we have gained enormous set of in-browser functionality

    View Slide

  9. Canv
    as, video &
    A
    udio, geoloca
    tion,
    Orient
    a
    tion, CSS3,
    Transition,
    Anima
    tions,
    Transforms (2d+3d),
    Hardware accel,
    localstorage,
    offline support,
    SVG, History API,
    Media queries,
    Touch events.
    * Some of the features available in Mobile Safari.
    * New things

    View Slide

  10. WebGL 3d drawing,
    File API, Web
    workers, Device
    camera API.
    * These features are ready for prime time
    * No legacy of older browsers, it’s a golden age

    View Slide

  11. HTML & CSS.
    * Why aren't we building our mobile experiences in web technologies rather than Objective-C.
    * HTML/CSS very powerful
    * Cocoa/UIKit sucks for styling (esp. mixed content areas)

    View Slide

  12. HTML & CSS.
    (yay!)

    View Slide

  13. Do you really
    need an app
    for tha
    t?
    * We need something shiny for the CEO/minister
    * Consider real purpose
    * Will people use it?

    View Slide

  14. Maybe.
    * Maybe
    * You *need* a mobile web site/app
    * Customers will come with their devices, you don’t know what they are
    * iOS can’t be your only choice

    View Slide

  15. 1. Switch to
    the App Store
    2. Click buy
    3. Enter their
    p
    assword
    4. Wait for it
    to download
    5. La
    unch it
    You’re asking them to
    1. Switch to the App Store
    2. Click buy
    3. Enter their password
    4. Wait for it to download
    5. Launch it

    View Slide

  16. Apps are not
    websites.
    App are not websites.

    View Slide

  17. Nada.
    * Do nothing
    * We can do better

    View Slide

  18. Go responsive.
    * Responsive design is the future
    * Use media queries to TRANSFORM your content based on device capabilities

    View Slide

  19. View Slide

  20. Jon Hicks’ site: hicksdesign.co.uk

    View Slide

  21. Jon Hicks’ site: hicksdesign.co.uk

    View Slide

  22. Jon Hicks’ site: hicksdesign.co.uk

    View Slide

  23. Food Sense: foodsense.is

    View Slide

  24. Food Sense: foodsense.is

    View Slide

  25. Food Sense: foodsense.is

    View Slide

  26. Swipe! swipeconference.com.au

    View Slide

  27. Swipe! swipeconference.com.au

    View Slide

  28. Swipe! swipeconference.com.au

    View Slide

  29. @media  screen  and
    (max-­‐device-­‐width:  320px)  {
       /*  iPhone  specific
             stuff  goes  here.  */
    }
    * Simple example: checking device screen width

    View Slide

  30. * Get your mitts on Ethan Marcotte's book "Responsive web design"
    * The right way: device and resolution agnostic
    * Problems: you’re reshaping content, if you want a different experience, you need a separate
    “app”
    * m.domain.com

    View Slide

  31. Build
    web apps.
    The original promise of the iPhone app ecosystem *was* the web.

    View Slide

  32. – Steve jobs, wwdc 2007
    “The full Safari engine is inside of iPhone. And so, you can
    write amazing Web 2.0 and Ajax apps that look exactly and
    behave exactly like apps on the iPhone. And these apps can
    integrate perfectly with iPhone services. They can make a
    call, they can send an email, they can look up a location on
    Google Maps....
    ...And guess what? There’s no SDK that you need! You’ve got
    everything you need if you know how to write apps using the
    most modern web standards to write amazing apps for the
    iPhone today. So developers, we think we’ve got a very sweet
    story for you. You can begin building your iPhone apps
    today.”
    * MobileSafari is still the best mobile browser
    * iOS gives developers features that can make web apps feel at home
    * Surprise surprise: Apple’s focus is on their own platform

    View Slide

  33. Gmail
    * Lots of work to make it feel at home on iOS
    * Touch not mouse events
    * More natural scrolling
    * Pull down to refresh

    View Slide

  34. Facebook has multiple mobile sites
    * m.facebook.com
    * touch.facebook.com
    * Doesn’t overreach: it’s a website

    View Slide

  35. Gowalla
    * m.gowalla.com
    * Geolocation API
    Why are we building native apps?

    View Slide

  36. Ceci n'est p
    as
    une applica
    tion.
    * Ceci n’est pas une application
    * Using these apps in earnest, they break quickly
    * Gmail loses state a lot of the time, shows old data, refreshes poorly and logs out often.
    * It’s getting better
    * People expect their browser to function in a certain way

    View Slide

  37. 22px
    60px
    44px
    * You’re in the context of a real native app: the browser
    * Interface you can’t avoid

    View Slide

  38. “Add to home
    screen”
    * Add to homescreen
    * iOS the only platform that offers this. Some Android devices let you in bookmarks.

    View Slide

  39. app-­‐capable"  content="yes"  />
    * Uses tags
    * No browser chrome
    * Icons
    * Splash screen

    View Slide

  40. * UIWebView sans-browser chrome

    View Slide

  41. if(window.navigator.standalone)  {
      //  Do  stuff
    }
    * Exposed as a JavaScript object
    * Web apps can have the same weight and presence on Springboard
    * I’m skeptical
    * How many of you use a web app that’s pinned to your homescreen?
    * I use one. That I built.

    View Slide

  42. A little
    help from
    my friends.
    * iOS bred a series of libraries that attempt to replicate the look, feel and feature set of native
    apps.

    View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. * There are literally hundreds of them
    * And by and large they all fail
    * “nearly” native

    View Slide

  50. Uncanny
    V
    alley
    * We end up in the Uncanny Valley.

    View Slide

  51. * The concept of the “Uncanny Valley” applies to any attempt to replicate the appearance or
    experience of something else.
    * If it looks like an native app, quacks like a native app, but doesn't move like a native app...
    * Break expectations
    * Users become frustrated, confused and afraid

    View Slide

  52. Tom Hanks in Polar Express = Mobile web app that pretends to be native

    View Slide

  53. Tom Hanks in Polar Express = Mobile web app that pretends to be native

    View Slide

  54. Tom Hanks IRL = Native app

    View Slide

  55. Tom Hanks IRL = Native app

    View Slide

  56. mobile.twitter.com
    * Looks great, feels odd
    * The hierarchy in a native app isn’t the same as on the web
    * Back/forward buttons do unexpected things

    View Slide

  57. * Clicking on the status bar does the wrong thing.

    View Slide

  58. View Slide

  59. * One of thousands of articles that ring the death knell of the App Store and Apple's
    ecosystem at the hands of HTML and CSS

    View Slide

  60. “HTML5 will
    kill the
    App Store”

    View Slide

  61. “Mobile Web
    spells doom
    for Apple”
    * Blah blah blah blah
    * It hasn't happened

    View Slide

  62. * The dream of cross-platform
    * Business centric, not user centric
    * A fallacy to begin with: you’ll have to fork your code

    View Slide

  63. Bridges.
    JavaScript bridges to Objective-C:
    * Titanium: http://appcelerator.com/
    * NimbleKit: http://nimblekit.com/

    View Slide

  64. * Take JavaScript and compile it down into Objective-C.
    * Lure is strong
    * Fool’s errand

    View Slide

  65. View Slide

  66. * Writing Objective-C: Panic and run away.
    * Memory management, square brackets
    * Can never be as good as a native app
    * Icelab tried it, got burnt
    * How long will it take Titanium to support iCloud APIs?

    View Slide

  67. Striving for
    grea
    tness.
    We want to create great things.

    View Slide

  68. * This is true: the App Store is full of rubbish, and the web is filled with rubbish
    * It doesn’t mean either platform is broken
    * Bridges are a half-baked approach
    * I don’t want to be “good enough”

    View Slide

  69. – Freeman Dyson
    “There is a great satisfaction in building
    good tools for other people to use.”

    View Slide

  70. “Don’t Half-ass
    a fea
    ture”

    View Slide

  71. * Currency.io
    * Built by ab+c
    * Simple, standalone web app
    * Quick quick quick
    * Feels responsive

    View Slide

  72. * Booki.sh
    * Vastly more complex
    * Web-based ebook reader

    View Slide

  73. * Save books to homescreen
    * Offline caching
    * All the features of a native reader
    * An ENORMOUS amount of work
    * Faster to build native apps for all platforms?
    * Business model means they can’t go native

    View Slide

  74. * Financial Times
    * Readability
    * Basecamp
    * Netflix
    * Side-stepping the App Store is a great reason to choose the web
    * 37Signals do what they’re good at
    * Netflix consolidating their code and knowledge base
    * Make a *conscious* choice

    View Slide

  75. Monkey see,
    Monkey do.
    * Web developers jumping to the app store remind me of print designers doing the same

    View Slide

  76. * Fail by trying to replicate their original medium

    View Slide

  77. View Slide

  78. Apps that get it right:
    * Flipboard
    * The Age/SMH

    View Slide

  79. * Native wrapper
    * Mostly web views
    * Uses native controls for fluidity, uses the web (HTML/CSS/JavaScript) for what it’s good at

    View Slide

  80. * It’s easy to compartmentalise
    * Native app therefore “A”
    * Website therefore “B”

    View Slide

  81. How I
    learned to
    stop worrying
    and love
    the web.
    * These technologies can work in concert
    * Our technologies choices don’t have to be dogmatic

    View Slide

  82. How I
    learned to
    stop worrying
    and love
    the web.
    Objective-c

    View Slide

  83. Do the
    right thing.
    * It's OK to build hybrid things

    View Slide

  84. The mobile
    web is ready
    .
    * Mobile browsers are catching up
    * iOS is not a stationary target
    * We’ll be waiting a while for iCloud access via JavaScript API
    * Accept the things your technology choice is good (and bad) at.
    * Your tools are your tools and that's fine, they’re not necessarily the right tools for every
    situation

    View Slide

  85. Thanks.

    View Slide