Multiple Design Strategies for Multiple Screens

5,027 views

Published on

A review of mobile design trends, including a comparison of the Responsive and Adaptive design approaches.

Published in: Self Improvement
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
5,027
On SlideShare
0
From Embeds
0
Number of Embeds
439
Actions
Shares
0
Downloads
56
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Multiple Design Strategies for Multiple Screens

  1. 1. Multiple Strategies For Multiple Screens Janine WarnerWeb: DigitalFamily.com Twitter: @janinewarner
  2. 2. People use mobile devices for 3 reasons
  3. 3. To save time
  4. 4. To connectwith others
  5. 5. To Kill Time
  6. 6. Designing forthe Mobile Web
  7. 7. San Francisco Chronicle in 1996 used a very simple design(as you can see in the Internet Archive http://www.archive.org/)
  8. 8. Today, web sites are much more complicated, but not always better designed
  9. 9. Should web pages still be designed to fit above the fold?
  10. 10. Where is ‘the fold’ today?
  11. 11. When ING redesigned their website, they made it more modular
  12. 12. Modular DesignThe best web designstoday are long pages,divided into sections
  13. 13. Critical content is ‘above the fold’
  14. 14. Content is divided into sections
  15. 15. Tap on any section on the Apple website and it enlarges to fill the iPhone screen
  16. 16. Just because you can open a site on aniPhone, does mean it’s ‘mobile friendly’
  17. 17. The Harvard and Stanford University websitesrepresent two good approaches to mobile navigation
  18. 18. Massachusetts Institute of Technology comparisonNative App on iPhone Mobile Web App on iPhone
  19. 19. Massachusetts Institute of Technology comparison continued Native App on iPhone Mobile Web App on iPhone
  20. 20. Fat Finger-Proof
  21. 21. The best mobile designs: • Are simple • Use large font sizes • Modular structure • Big, touchable, buttons
  22. 22. Designing for Multiple ScreensAdaptive & Responsive Design
  23. 23. WMLIn the early days of mobiledesign, the Wireless MarkupLanguage was required.WML is no longer usedfor most mobile sites.
  24. 24. Markup Language : A History Lesson• WML Wireless Markup Language• HTML MP HTML mobile profile• HTML5 & CSS3 Version 5 of the HyperText Markup Language & Cascading Style Sheets
  25. 25. Today’s most popular choice for mobile web design. Superhero HTML 5 and Sidekick: CSS3Cascading Style Sheets
  26. 26. Design for Portrait and Landscape views
  27. 27. Today the challenge is to design for large screens and small screens
  28. 28. Soon we’ll have to design for devices that support augmented reality
  29. 29. And Corning Glass can turn any glass surface into a monitor
  30. 30. Responsive DesignsAdjust the design tobest fit the browserwindow sizeUsing CSS MediaQueries to targetScreen size
  31. 31. Responsive Design1 HTML page + 3 (or more) Sets of CSS
  32. 32. With ResponsiveDesign, thechallenge is todevelop a modularstructure thatenables you torearrange theelements to best fiteach screen size.
  33. 33. Adaptive DesignRequires a scripton the web server& a device databaseEnables differentdesigns optimizedfor each device
  34. 34. Adaptive DesignThe only way toreach the broadestmobile audienceBecause CSS doesnot work onfeature phones
  35. 35. Most mobile web surfing is done on smart phones & tabletsBecause it is so hardto surf on handsets with such limited input options
  36. 36. Responsive DesignYou rearrange thedesign elements basedon screensizeWorks best with asimple design
  37. 37. But even big, complicated sites are using Responsive Design now The Boston Globe one of the first Newspapers to use Responsive Design They use RESS =Responsive + Server Side
  38. 38. Responsive Design• Simpler to design, but limited to smart phones and tables devices• One HTML document• Multiple sets of style rules• Media Queries make it possible to apply CSS based on screen size• Most designers target at least 3 to 6 screen sizes: small, medium, large• Best designs work on tiny cell phone screens as well as giant monitors
  39. 39. Adaptive Design• More complex, but reaches the broad audience• Device detection based on “user agents”• Requires a device database• Ability to generate multiple page designs based on device capabilities• Most developers target 5 to 15 device profiles• Best option if you need to reach low end devices because Media Queries don’t work on feature phones…
  40. 40. Content is “Princely” Goal: The most valuable content to each audience with the best design for each device
  41. 41. Janine Warnerjanine@DigitalFamily.com

×