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

Comments

comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *