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:
- 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
- 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
- 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
- reordering – moving navigation around
- 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
- 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!
- content like water
- frameworks:
- Lyza likes the columnal CSS framework
- most complex projects end up rolling their own…
- iOS rotation
- use
-webkit-text-size-adjust:none;
- use
Lyza is writing a book – Head First Mobile Web
