Meagan Fisher - FOWD London 2009

Mobile web expert! Beginner! meagan fisher,

DESKTOP Browsers experienced designer for

the mobile web is a HOT TOPIC 107% 15-20% 8x 4M

Dan Cederholm

Dan Cederholm MOBILE? Excited Girl Pick me!

Mobile Web DESIGN seems scary

Fear not, Friends!

3 LEVELS OF MOBILE SUPPORT Naked Add some style Deck it out

3 LEVELS OF MOBILE SUPPORT Naked
METHOD - Disable all styles/images
BENEFIT - Set it and forget it
BENEFIT - Fast download times
DOWNSIDE - Boring user interface
DOWNSIDE - Different web address

3 LEVELS OF MOBILE SUPPORT Add some style
METHOD - Add mobile.css file
BENEFIT - One file to maintain
BENEFIT - One web address
BENEFIT - Better user interface
DOWNSIDE - Inconsistent support

3 LEVELS OF MOBILE SUPPORT Deck it out “ Arguably the best level of support, this method puts “ context before aesthetics ” “ function before form “ and “ presents users with a customized “ experience relevant to mobility .” - Cameron Moll, Mobile Web Design

3 LEVELS OF MOBILE SUPPORT Deck it out
METHOD - Create a mobile site
BENEFIT - Fast download times
BENEFIT - Best user interface
DOWNSIDE - Another site to maintain
DOWNSIDE - Most initial dev work

3 LEVELS OF MOBILE SUPPORT Add some style
METHOD - Add mobile.css file
BENEFIT - One file to maintain
BENEFIT - One web address
BENEFIT - Better user interface
DOWNSIDE - Inconsistent support

“ By starting simple , you can provide a decent initial experience , solicit user feedback , and iterate toward a more mobile-friendly design ." - Dominique Hazael-Massieux, Return of the Mobile Stylesheet

add some style, GET MOBILE GLORY! in 3 steps or less

STEP 1: CLEAN, accessible HTML Buy this!
Optimized HTML and CSS loads fast
Be semantic; use headings, lists, etc.
Avoid images for navigation
Include alt tags
TEST validate your site
TEST view without styles

http://validator.w3.org

Dribble with styles off

STEP 1: CLEAN, accessible HTML Buy this!
Optimized HTML and CSS loads fast
Be semantic; use headings, lists, etc.
Avoid images for navigation
Include alt tags
TEST validate your site
TEST view without styles

STEP 2: Mobilize your layout
Design a one column layout
Keep your most important content up top
Hide any irrelevant content
Disable large images (in css and markup)

STEP 3: Stay Branded
Style a header graphic with your logo
Use borders, background-color
Tweak typography, text colors to fit brand
Keep small, compressed images

STEP 1: CLEAN, accessible HTML STEP 2: Mobilize your layout STEP 3: Stay Branded

notes on implementation
Handheld stylesheets support is inconsistent
READ http://bit.ly/mobile-stylesheet
Plenty of tools available to aid in this process
TRY http://mobify.me

Thank you!
READ http://delicious.com/tag/fowd09research
FOLLOW ME http://twitter.com/meaganfisher
SIGN UP http://dribbble.com
SEE ALSO http://simplebits.com
SEE ALSO http://meaganfisher.com

Meagan Fisher - FOWD London 2009

by Carsonified Team on May 07, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 24

Statistics

Meagan Fisher - FOWD London 2009 — Presentation Transcript

http://lanyrd.com	15
http://www.slideshare.net	9