Search

Meagan Fisher - FOWD London 2009

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    5 Favorites

    Meagan Fisher - FOWD London 2009 - Presentation Transcript

    1.  
    2. Mobile web expert! Beginner! meagan fisher,
    3. DESKTOP Browsers experienced designer for
    4. the mobile web is a HOT TOPIC 107% 15-20% 8x 4M
    5. Dan Cederholm
    6.  
    7. Dan Cederholm MOBILE? Excited Girl Pick me!
    8. Mobile Web DESIGN seems scary
    9. Fear not, Friends!
    10. 3 LEVELS OF MOBILE SUPPORT Naked Add some style Deck it out
    11. 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
    12. 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
    13. 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
    14. 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
    15. 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
    16. “ 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
    17. add some style, GET MOBILE GLORY! in 3 steps or less
    18. 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
    19. http://validator.w3.org
    20. Dribble with styles off
    21. 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
    22. 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)
    23.  
    24.  
    25.  
    26.  
    27. 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
    28.  
    29.  
    30. STEP 1: CLEAN, accessible HTML STEP 2: Mobilize your layout STEP 3: Stay Branded
    31. 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
    32. 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

    + Carsonified TeamCarsonified Team, 6 months ago

    custom

    1201 views, 5 favs, 0 embeds more stats

    Designing Effective Mobile Interfaces

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1201
      • 1201 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 5
    • Downloads 0
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved