Designing Effective Mobile Interfaces – FOWD

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:

1. naked: just show the content, without style
2. add some style
3. 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

Tags: Biko, congreso, diseño, fowd, Future of Web Design, handheld, London, móvil