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

Crap! It doesn't look quite right, or, how I learned to stop worrying and set my mobile web sites free

View more presentations from Lyza Gardner

• 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…?

mobilewood

• 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

• Cloud Four helped set up a device laboratory in downtown Portland
• multiple operators, device manufacturers
• but even a well-stocked device library will not help

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:
  
  • Lyza likes the columnal CSS framework
  • most complex projects end up rolling their own…
• iOS rotation
  
  • use -webkit-text-size-adjust:none;

Lyza is writing a book – Head First Mobile Web