Tuesday 4 October 2011

Over The Air 2011: Crap! It doesn't quite look right!

Or… how I learned to stop worrying and set my web sites free

Lyza Danger Gardner, co-founder Cloud Four @lyzadanger

  • Founder of Cloud Four in 2007
  • Explicitly for mobile web
  • Lyza was on the team that built the Obama app
  • Went through the app and realised that there was nothing in the app that couldn’t be done with the web
  • hautelook.com – high performance mobile web
  • deschutes brewery – one web
    • uses geolocation to find where to buy the beer
  • mobile web is hard and getting harder
    • and it’s not just phones any more…
    • car radios, televisions, …
  • and there’s a whole stack every time (any of which can change)
  • in the 1990s, took print ideas and applied them – pixel perfect
    • customers believed that we had control…
    • “could you move the logo a half pixel to the right?”
  • no one can possibly know enough – devices are continually appearing and you still have to deal with the old stuff
  • how do you deal with WYSIWYG for customers…?


  • 10 highly experienced mobile developers
  • working on where we wanted the mobile web to go
  • built http://futurefriend.ly
  • three pages, two images, no interactivity
  • 100 man hours
  • -> not scaleable!

testing is very hard

take heart!

  • relinquish control over a few things we thought we had down pat

  • four considerations:
    1. content like water
      • consider wireframes that demonstrate the flow and flex of content across a continuum of device and window sizes
      • design approach: like proportion – not pixel perfect
      • build functional mockups, so you can show (not tell)
      • it will be an iterative process
      • will not be an overnight change – it’s not a brochure, despite what we told you earlier
      • it’s often surprising how willing customers will be to adapt or modify their content APIs
      • try using textile or markdown in CMS
    2. essentials first
      • not just mobile – pare down to the essentials
      • not just about design – about process, performance, experience for every user
      • start serene and simple
    3. arm the weapons!
      • responsive web design
      • fluid media: 100% width images
      • fluid grids
      • use media queries to enhance (mobile first)
      • see also Responsive Images (by Scott Jehl)
      • Boston Globe is a showcase
      • it’s ok to leave unmanaged gutter in % widths
      • use Modernizr’s modular approach (don’t test everything)
        • but it’s not infallible
      • use server-side work:
        • reordering – moving navigation around
          • android devices are too buggy
        • reduction – smaller images
        • respect – your users: don’t download graphics if you don’t use them
      • user agent sniffing – it ain’t perfect, but it gets the job done
      • don’t be afraid to do some server-side optimization
      • optimise!
        • especially your htaccess or apache config
        • use YSlow
        • make sure you gzip everything you can (not just html)
        • cache manifests are a little tricky to deal with
      • Cloud Four images:
        • server side sizing using WURFL for major sizes
        • common images are then cached
        • then 100% fluid sizing
    4. draw the line
      • set expectations with your customers
      • explain how you don’t have control over everything
      • don’t be afraid to pull out egregious hacks!
      • be ready to fail gracefully
      • this isn’t religion!
  • frameworks:
  • iOS rotation
    • use -webkit-text-size-adjust:none;

Lyza is writing a book – Head First Mobile Web

No comments: