Multiple Design Strategies for Multiple Screens

  • View

  • Download

Embed Size (px)


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

Text of Multiple Design Strategies for Multiple Screens

  • 1. Multiple Strategies For Multiple ScreensJanine WarnerWeb: Twitter: @janinewarner

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