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

Related Post

Una vez más nos hemos vuelto locos en Biko para fe... Han sido unos días de locos, organizar los rodajes, montar la sala de rodajes (gracias Massada por la sala, gracias Oiane -pedazo de chroma-, y gracia...
El sofá almacenaje de Daisuke Motogi Si uno de tus accesorios indispensables es el guardamandos de Ikea, ¡con este sofá ya no lo echarás de menos! Está creado para capturar o escon...
Designing Obama, el libro – Ya falta menos // Hace unos meses vi en Kickstarter un proyecto al que no me resistí aportar dinero. Lo decisivo fue que el dinero aportado se vería convertido en un...
Andrew Joyce, ilustrador colorista Hay veces que parece que todo se confabula para indicarte algo. Esta vez me ha pasado con Japón. Si ayer venía el tema japonés por la despedida de Zoc...

Deja un comentario