multiple design strategies for multiple screens

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 Warnerjanine@DigitalFamily.com