Meagan Fisher - FOWD London 2009

3,792 views

Published on

Designing Effective Mobile Interfaces

Published in: Technology
1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total views
3,792
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
0
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

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>

×