In the future, the web is going to get smaller and smaller, and clients know this. Having a handful of tips under your belt about mobile web design will give you an advantage. The presentation will be built around a mobile interface Meagan is designing for a new application SimpleBits will be launching.
Meagan Fisher SimpleBits
Meagan works for desktop browsers.
Her boss is working for Dribbble right now. Like a visual twitter. They asked themselves what to do with mobiles. She does this work. Mobile web design seems scary. But is not that difficult. (Alistappart, mobilewebdesign)
3 levels of mobile support:
- naked: just show the content, without style
- add some style
- deck it out
Naked:
- Method: disable all styles / images
- Benefit – set it and forget it
- Benefit – fast download times
- downside – boring user inteface
- downside – different web address
Add some style:
- method – add mobile.css file
- benefit – one file to maintain
- benefit – one web address
- benefit -better user interface
- downside – inconsistent support
Deck it out:
The best way
- method – create a mobile site
- ben – fast download times
- ben – best user interface
- down – another site to maintain
- down – mosti initial dev work
Adding some style is a very good start, anyway.
By starting simple, you can provide a decent inital experience…
Add some style, get mobile glory in 3 steps!:
Step 1: clean accesible html:
(zeldman book)
- Optimized html and css loads fast
- semantic
- avoid images
- include alt tags
- test validate your site
- test view
Step 2: mobilize your layout
- design a onece cvolumn
- keep
- (..)
Twitter example: normal layout and mobile one.
Dribbble example.
Step 3: stay branded
- style a header graphic with your logo
- use borders, bk color
- ttweak typo, text colors
- keep small, compressed images
Flickr example
dribbler example
Notes on implementation:
- handheld stylesheets support is inconsistent
- read bit.ly/mobile-stylesheet
- Plenty of tools available ot aid in this process
- try mobify.me