multiple design strategies for multiple screens
DESCRIPTION
A review of mobile design trends, including a comparison of the Responsive and Adaptive design approaches.TRANSCRIPT
![Page 1: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/1.jpg)
Multiple StrategiesFor Multiple Screens
Janine WarnerWeb: DigitalFamily.com Twitter: @janinewarner
![Page 2: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/2.jpg)
People use mobile devices for 3 reasons
![Page 3: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/3.jpg)
To save time
![Page 4: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/4.jpg)
To connect with others
![Page 5: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/5.jpg)
To Kill Time
![Page 6: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/6.jpg)
Designing for the Mobile Web
![Page 7: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/7.jpg)
![Page 8: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/8.jpg)
![Page 9: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/9.jpg)
San Francisco Chronicle in 1996 used a very simple design(as you can see in the Internet Archive http://www.archive.org/)
![Page 10: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/10.jpg)
Today, web sites are much more complicated, but not always better designed
![Page 11: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/11.jpg)
Should web pages still be designed to fit above the fold?
![Page 12: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/12.jpg)
Where is ‘the fold’ today?
![Page 13: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/13.jpg)
When ING redesigned their website, they made it more modular
![Page 14: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/14.jpg)
Modular Design
The best web designs today are long pages, divided into sections
![Page 15: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/15.jpg)
Critical content is ‘above the fold’
![Page 16: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/16.jpg)
Content is divided into sections
![Page 17: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/17.jpg)
Tap on any section on the Apple website and it enlarges to fill the iPhone screen
![Page 18: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/18.jpg)
Just because you can open a site on an iPhone, does mean it’s ‘mobile friendly’
![Page 19: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/19.jpg)
The Harvard and Stanford University websites represent two good approaches to mobile navigation
![Page 20: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/20.jpg)
Massachusetts Institute of Technology comparisonNative App on iPhone Mobile Web App on iPhone
![Page 21: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/21.jpg)
Native App on iPhone Mobile Web App on iPhone
Massachusetts Institute of Technology comparison continued
![Page 22: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/22.jpg)
Fat Finger-Proof
![Page 23: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/23.jpg)
The best mobile designs:
• Are simple
• Use large font sizes
• Modular structure
• Big, touchable, buttons
![Page 24: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/24.jpg)
Designing for Multiple ScreensAdaptive & Responsive Design
![Page 25: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/25.jpg)
WML
In the early days of mobile design, the Wireless Markup Language was required.
WML is no longer usedfor most mobile sites.
![Page 26: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/26.jpg)
Markup Language : A History Lesson• WML
Wireless Markup Language
• HTML MP HTML mobile profile
• HTML5 & CSS3Version 5 of the HyperText Markup Language& Cascading Style Sheets
![Page 27: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/27.jpg)
Today’s most popularchoice for mobile
web design.
Superhero HTML 5and
Sidekick: CSS3 Cascading Style Sheets
![Page 28: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/28.jpg)
Design for Portrait and Landscape views
![Page 29: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/29.jpg)
Today the challenge is to design for large screens and small screens
![Page 30: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/30.jpg)
![Page 31: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/31.jpg)
Soon we’ll have to design for devices that support augmented reality
![Page 32: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/32.jpg)
And Corning Glass can turn any glass surface into a monitor
![Page 33: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/33.jpg)
Responsive Designs
Adjust the design tobest fit the browser window size
Using CSS Media Queries to targetScreen size
![Page 34: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/34.jpg)
Responsive Design 1 HTML page + 3 (or more) Sets of CSS
![Page 35: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/35.jpg)
![Page 36: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/36.jpg)
With Responsive Design, the challenge is to develop a modular structure that enables you to rearrange the elements to best fit each screen size.
![Page 37: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/37.jpg)
Adaptive Design
Requires a scripton the web server & a device database
Enables differentdesigns optimizedfor each device
![Page 38: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/38.jpg)
Adaptive Design
The only way to reach the broadest mobile audience
Because CSS does not work on feature phones
![Page 39: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/39.jpg)
Most mobile web surfing is done on
smart phones & tablets
Because it is so hardto surf on handsets with such limited
input options
![Page 40: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/40.jpg)
Responsive Design
You rearrange thedesign elements based on screensize
Works best with a simple design
![Page 41: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/41.jpg)
But even big, complicated sites are using Responsive Design now
The Boston Globeone of the firstNewspapers to useResponsive Design
They use RESS =Responsive + Server Side
![Page 42: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/42.jpg)
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
![Page 43: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/43.jpg)
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…
![Page 44: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/44.jpg)
Content is “Princely”
Goal: The most valuable content toeach audiencewith the best design for each device
![Page 45: Multiple Design Strategies for Multiple Screens](https://reader030.vdocuments.mx/reader030/viewer/2022012910/5497f247b47959212d8b46bf/html5/thumbnails/45.jpg)
Janine [email protected]