multiple design strategies for multiple screens
DESCRIPTION
A review of mobile design trends, including a comparison of the Responsive and Adaptive design approaches.TRANSCRIPT
Multiple StrategiesFor Multiple Screens
Janine WarnerWeb: DigitalFamily.com Twitter: @janinewarner
People use mobile devices for 3 reasons
To save time
To connect with others
To Kill Time
Designing for the Mobile Web
San Francisco Chronicle in 1996 used a very simple design(as you can see in the Internet Archive http://www.archive.org/)
Today, web sites are much more complicated, but not always better designed
Should web pages still be designed to fit above the fold?
Where is ‘the fold’ today?
When ING redesigned their website, they made it more modular
Modular Design
The best web designs today are long pages, divided into sections
Critical content is ‘above the fold’
Content is divided into sections
Tap on any section on the Apple website and it enlarges to fill the iPhone screen
Just because you can open a site on an iPhone, does mean it’s ‘mobile friendly’
The Harvard and Stanford University websites represent two good approaches to mobile navigation
Massachusetts Institute of Technology comparisonNative App on iPhone Mobile Web App on iPhone
Native App on iPhone Mobile Web App on iPhone
Massachusetts Institute of Technology comparison continued
Fat Finger-Proof
The best mobile designs:
• Are simple
• Use large font sizes
• Modular structure
• Big, touchable, buttons
Designing for Multiple ScreensAdaptive & Responsive Design
WML
In the early days of mobile design, the Wireless Markup Language was required.
WML is no longer usedfor most mobile sites.
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
Today’s most popularchoice for mobile
web design.
Superhero HTML 5and
Sidekick: CSS3 Cascading Style Sheets
Design for Portrait and Landscape views
Today the challenge is to design for large screens and small screens
Soon we’ll have to design for devices that support augmented reality
And Corning Glass can turn any glass surface into a monitor
Responsive Designs
Adjust the design tobest fit the browser window size
Using CSS Media Queries to targetScreen size
Responsive Design 1 HTML page + 3 (or more) Sets of CSS
With Responsive Design, the challenge is to develop a modular structure that enables you to rearrange the elements to best fit each screen size.
Adaptive Design
Requires a scripton the web server & a device database
Enables differentdesigns optimizedfor each device
Adaptive Design
The only way to reach the broadest mobile audience
Because CSS does not work on feature phones
Most mobile web surfing is done on
smart phones & tablets
Because it is so hardto surf on handsets with such limited
input options
Responsive Design
You rearrange thedesign elements based on screensize
Works best with a simple design
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
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
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…
Content is “Princely”
Goal: The most valuable content toeach audiencewith the best design for each device
Janine [email protected]