Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Meagan Fisher - FOWD London 2009

3,818 views

Published on

Designing Effective Mobile Interfaces

Published in: Technology

Meagan Fisher - FOWD London 2009

  1. 2. Mobile web expert! Beginner! meagan fisher,
  2. 3. DESKTOP Browsers experienced designer for
  3. 4. the mobile web is a HOT TOPIC 107% 15-20% 8x 4M
  4. 5. Dan Cederholm
  5. 7. Dan Cederholm MOBILE? Excited Girl Pick me!
  6. 8. Mobile Web DESIGN seems scary
  7. 9. Fear not, Friends!
  8. 10. 3 LEVELS OF MOBILE SUPPORT Naked Add some style Deck it out
  9. 11. 3 LEVELS OF MOBILE SUPPORT Naked <ul><li>METHOD - Disable all styles/images </li></ul><ul><li>BENEFIT - Set it and forget it </li></ul><ul><li>BENEFIT - Fast download times </li></ul><ul><li>DOWNSIDE - Boring user interface </li></ul><ul><li>DOWNSIDE - Different web address </li></ul>
  10. 12. 3 LEVELS OF MOBILE SUPPORT Add some style <ul><li>METHOD - Add mobile.css file </li></ul><ul><li>BENEFIT - One file to maintain </li></ul><ul><li>BENEFIT - One web address </li></ul><ul><li>BENEFIT - Better user interface </li></ul><ul><li>DOWNSIDE - Inconsistent support </li></ul>
  11. 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
  12. 14. 3 LEVELS OF MOBILE SUPPORT Deck it out <ul><li>METHOD - Create a mobile site </li></ul><ul><li>BENEFIT - Fast download times </li></ul><ul><li>BENEFIT - Best user interface </li></ul><ul><li>DOWNSIDE - Another site to maintain </li></ul><ul><li>DOWNSIDE - Most initial dev work </li></ul>
  13. 15. 3 LEVELS OF MOBILE SUPPORT Add some style <ul><li>METHOD - Add mobile.css file </li></ul><ul><li>BENEFIT - One file to maintain </li></ul><ul><li>BENEFIT - One web address </li></ul><ul><li>BENEFIT - Better user interface </li></ul><ul><li>DOWNSIDE - Inconsistent support </li></ul>
  14. 16. “ By starting simple , you can provide a decent initial experience , solicit user feedback , and iterate toward a more mobile-friendly design .&quot; - Dominique Hazael-Massieux, Return of the Mobile Stylesheet
  15. 17. add some style, GET MOBILE GLORY! in 3 steps or less
  16. 18. STEP 1: CLEAN, accessible HTML Buy this! <ul><li>Optimized HTML and CSS loads fast </li></ul><ul><li>Be semantic; use headings, lists, etc. </li></ul><ul><li>Avoid images for navigation </li></ul><ul><li>Include alt tags </li></ul><ul><li>TEST validate your site </li></ul><ul><li>TEST view without styles </li></ul>
  17. 19. http://validator.w3.org
  18. 20. Dribble with styles off
  19. 21. STEP 1: CLEAN, accessible HTML Buy this! <ul><li>Optimized HTML and CSS loads fast </li></ul><ul><li>Be semantic; use headings, lists, etc. </li></ul><ul><li>Avoid images for navigation </li></ul><ul><li>Include alt tags </li></ul><ul><li>TEST validate your site </li></ul><ul><li>TEST view without styles </li></ul>
  20. 22. STEP 2: Mobilize your layout <ul><li>Design a one column layout </li></ul><ul><li>Keep your most important content up top </li></ul><ul><li>Hide any irrelevant content </li></ul><ul><li>Disable large images (in css and markup) </li></ul>
  21. 27. STEP 3: Stay Branded <ul><li>Style a header graphic with your logo </li></ul><ul><li>Use borders, background-color </li></ul><ul><li>Tweak typography, text colors to fit brand </li></ul><ul><li>Keep small, compressed images </li></ul>
  22. 30. STEP 1: CLEAN, accessible HTML STEP 2: Mobilize your layout STEP 3: Stay Branded
  23. 31. notes on implementation <ul><li>Handheld stylesheets support is inconsistent </li></ul><ul><li>READ http://bit.ly/mobile-stylesheet </li></ul><ul><li>Plenty of tools available to aid in this process </li></ul><ul><li>TRY http://mobify.me </li></ul>
  24. 32. Thank you! <ul><li>READ http://delicious.com/tag/fowd09research </li></ul><ul><li>FOLLOW ME http://twitter.com/meaganfisher </li></ul><ul><li>SIGN UP http://dribbble.com </li></ul><ul><li>SEE ALSO http://simplebits.com </li></ul><ul><li>SEE ALSO http://meaganfisher.com </li></ul>

×