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

Mobile Camp London: Vodafone Transcoding

Terence Eden, Deputy Production Manager - Portal Content Management @ Vodafone

Terence did a reasonable job of explaining Vodafone's position and of apologising for mucking up the user agent header. There weren't too many rabid developers in the audience so he got quite an easy ride...

why transcode?

popular website e.g. slashdot -- very big to download (esp. if you're not on unlimited data) and hard to navigate

instead, do transcoding:

• cut down file size

• reformat the page to make it long and thin

• starts the user on the right bit of the page (knock out the navigational part and get to the meat - don't waste time & money downloading it)

• My thoughts: On a Nokia N95 (the first demo device), the Nokia WebKit browser can zoom in and out of the non-transcoded page and dive straight into the bits that interest you. The transcoding saves you some bandwidth and some time, but you lose context and familiarity.

• Opera Mini does a very good job of dealing with the whole site, with its mix of transcoding and clever browser functionality: you get to see the whole context when you first get to the page (as zoomed out), but the text columns are made to fit the device width when you zoom in.

also works on Nokia 6230i

• wouldn't be able to download the slashdot page at all

• My thoughts: but is still almost completely unusable on the Nokia 6230i -- only four lines of text on the screen gives you no context at all. Even if you know exactly where to get to on the page, you're still stuffed 'cos the transcoder mucks around with the ordering!

Supposedly, the first time you go to an off-portal site, you get offered a choice of whether you want the full version or the transcoded version.

You also get a navigation bar at the top and bottom of every transcoded page. The top one allows you to skip around the separate pages created by the transcoder; the bottom one allows you to go to the raw site without transcoding.

examples:

If a customer enters "www.facebook.com" into their phone, which site do they want to go to? the mobile one or the full website?

• Maybe. What if they enter facebook.com? Shouldn't that decision be up to the people who run the site?

Another example: british airways automatically redirect mobile browsers to their wap site, wap.ba.com. However, this displays the message "BA no longer provide a WAP site" and will not let you try to get at the main web site even if you have a fancy phone with a powerful browser... Vodafone customers then complain to Vodafone, saying "Why have you broken the BA site?"

• Surely this is a situation where Vodafone should use its muscle to knock BAs head against the wall, or else to write a specific rule in their transcoder...

how does it figure out which bit to go where?

• transcoder guesses using names of DIVs + formatting hints

• also there's cheating: transcoder can be given hard-coded rules for specific sites (did this with bebo.com)

customer research:

• most people don't know how to open a URL on their phone, so offer them a form to go to one

• also have a service called follow-me where you can add URLs to vodafone live website and have them appear on your mobile

• people want my websites on my phone

• the stats show that web usage has gone up

user agent woes (why change it?)

• decision was made to change user agent for any site that gets transcoded

• because there are more sites that say "you're not IE, you can't have anything" than there are mobile-specific sites

• currently have to send Vodafone an email if you want the transcoder to leave your site alone

• on a personal level that's not a good way to interact with website developers

• on a professional level, we're evaluating the options

• Question: isn't it a paradox, that you support the sites that say "bog off you're not a web browser", and penalise the sites that are making money and doing good mobile work?

• Terence gets down on his knees and promises that he will never hide the user agent again :-)