$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. I have designed: * the Water Storages app for the

    Bureau of Meteorology * Decaf Sucks
  2. St a te of the mobile web * Rapid change

    * Pre-iPhone, poor HTML/CSS support
  3. WML, basic HTML/CSS. * Wireless Markup Language * Last 4

    years we have gained enormous set of in-browser functionality
  4. 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
  5. 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
  6. 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)
  7. Do you really need an app for tha t? *

    We need something shiny for the CEO/minister * Consider real purpose * Will people use it?
  8. 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
  9. 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
  10. Go responsive. * Responsive design is the future * Use

    media queries to TRANSFORM your content based on device capabilities
  11. @media  screen  and (max-­‐device-­‐width:  320px)  {    /*  iPhone  specific

             stuff  goes  here.  */ } * Simple example: checking device screen width
  12. * 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
  13. – 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
  14. Gmail * Lots of work to make it feel at

    home on iOS * Touch not mouse events * More natural scrolling * Pull down to refresh
  15. 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
  16. 22px 60px 44px * You’re in the context of a

    real native app: the browser * Interface you can’t avoid
  17. “Add to home screen” * Add to homescreen * iOS

    the only platform that offers this. Some Android devices let you in bookmarks.
  18. 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.
  19. 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.
  20. * There are literally hundreds of them * And by

    and large they all fail * “nearly” native
  21. * 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
  22. 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
  23. * 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
  24. * The dream of cross-platform * Business centric, not user

    centric * A fallacy to begin with: you’ll have to fork your code
  25. * 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?
  26. * 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”
  27. * Currency.io * Built by ab+c * Simple, standalone web

    app * Quick quick quick * Feels responsive
  28. * 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
  29. * 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
  30. Monkey see, Monkey do. * Web developers jumping to the

    app store remind me of print designers doing the same
  31. * Native wrapper * Mostly web views * Uses native

    controls for fluidity, uses the web (HTML/CSS/JavaScript) for what it’s good at
  32. 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
  33. 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