Multiple Design Strategies for Multiple Screens
Download as PPTX, PDF2 likes5,590 views
The document discusses the evolution of mobile web design, emphasizing the need for responsive and adaptive designs that cater to various devices. It highlights the importance of modular structures, simple designs, and large touch-friendly elements for optimal user experience. The text also contrasts responsive design, which adjusts to screen sizes, with adaptive design, which tailors content for specific devices, particularly focusing on the accessibility of content across a broad audience.
Multiple Design Strategies for Multiple Screens
- 1. Multiple Strategies For Multiple Screens Janine Warner Web: DigitalFamily.com Twitter: @janinewarner
- 2. People use mobile devices for 3 reasons
- 3. To save time
- 5. To Kill Time
- 6. Designing for the Mobile Web
- 9. San Francisco Chronicle in 1996 used a very simple design (as you can see in the Internet Archive http://www.archive.org/)
- 10. Today, web sites are much more complicated, but not always better designed
- 11. Should web pages still be designed to fit above the fold?
- 12. Where is ‘the fold’ today?
- 13. When ING redesigned their website, they made it more modular
- 14. Modular Design The best web designs today are long pages, divided into sections
- 15. Critical content is ‘above the fold’
- 16. Content is divided into sections
- 17. Tap on any section on the Apple website and it enlarges to fill the iPhone screen
- 18. Just because you can open a site on an iPhone, does mean it’s ‘mobile friendly’
- 19. The Harvard and Stanford University websites represent two good approaches to mobile navigation
- 20. Massachusetts Institute of Technology comparison Native App on iPhone Mobile Web App on iPhone
- 21. Massachusetts Institute of Technology comparison continued Native App on iPhone Mobile Web App on iPhone
- 22. Fat Finger-Proof
- 23. The best mobile designs: • Are simple • Use large font sizes • Modular structure • Big, touchable, buttons
- 24. Designing for Multiple Screens Adaptive & Responsive Design
- 25. WML In the early days of mobile design, the Wireless Markup Language was required. WML is no longer used for most mobile sites.
- 26. 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
- 27. Today’s most popular choice for mobile web design. Superhero HTML 5 and Sidekick: CSS3 Cascading Style Sheets
- 28. Design for Portrait and Landscape views
- 29. Today the challenge is to design for large screens and small screens
- 31. Soon we’ll have to design for devices that support augmented reality
- 32. And Corning Glass can turn any glass surface into a monitor
- 33. Responsive Designs Adjust the design to best fit the browser window size Using CSS Media Queries to target Screen size
- 34. Responsive Design 1 HTML page + 3 (or more) Sets of CSS
- 36. With Responsive Design, the challenge is to develop a modular structure that enables you to rearrange the elements to best fit each screen size.
- 37. Adaptive Design Requires a script on the web server & a device database Enables different designs optimized for each device
- 38. Adaptive Design The only way to reach the broadest mobile audience Because CSS does not work on feature phones
- 39. Most mobile web surfing is done on smart phones & tablets Because it is so hard to surf on handsets with such limited input options
- 40. Responsive Design You rearrange the design elements based on screensize Works best with a simple design
- 41. 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
- 42. 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
- 43. 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…
- 44. Content is “Princely” Goal: The most valuable content to each audience with the best design for each device