Beyond Responsive Web Design“...let a hundred devices bloom...”

Responsive web design?

Responsive Web Design

One HTML file

+ multiple devices and displays______________________________

a range of custom experiences

Responsive Web Design

In keeping with the fundamental ideas of the Web:

Access by anyone, on any device

Separation of content and presentation

Progressive enhancement / Graceful degradation

“A responsive design is composed of three distinct parts:”

ETHAN MARCOTTE (@BEEP), “ON BEING RESPONSIVE”

1. A flexible grid.

Flexible / fluid grids

Break up the site’s layout into modules that can be moved and resized as needed

Size modules proportionately using ems or percentages (or both)

target ÷ context = result

1. A flexible grid.

2. Flexible images. Or more specifically, images that work in a flexible context.

Flexible / fluid images

overflow: hidden

max-width: 100%

JS solutions to load an appropriately-sized image

1. A flexible grid.

2. Flexible images. Or more specifically, images that work in a flexible context.

3. Media queries.

Media queries

Ever make a print stylesheet before?

<link rel=”stylesheet” href=”#” media=”screen” />

<link rel=”stylesheet” href=”#” media=”print” />

Media queriesMore in-depth rules for when styles apply

<link rel=”stylesheet” href=”#”

media=”screen and (min-device-width: 640px)” />

Can be used within a stylesheet too

@media screen and (orientation:landscape) {

#content { ... }

}

Media queries

height

width

device-height

device-width

orientation

aspect-ratio

device-aspect-ratio

color

color-index

monochrome

resolution

scan

grid

“Responsive” redesigns

COLLY.COMDESKTOP > NARROW > MOBILE

INFORMATIONARCHITECTS.JPWIDE DESKTOP > DESKTOP > MOBILE

“Switchy” designs

“Switchy” designsNot responsive designs

COLLY.COMDESKTOP > NARROW > MOBILE

FLUID GRIDFLUID IMAGESMEDIA QUERIES

INFORMATIONARCHITECTS.JPWIDE DESKTOP > DESKTOP > MOBILE

FLUID GRIDFLUID IMAGES?MEDIA QUERIES

Media queries are not enough

Why not?

“Pinch-to-zoom makes any site usable on iPhone/Android”

“Viewport browsing still works on Blackberry”

“Only people with smartphones use the mobile web anyways”

Really?

A bit of perspective...

IPHONE SOLVES ALL PROBLEMS?IPHONE IS JUST A DROP IN THE MOBILE OCEAN

WEBKIT != FULL SUPPORT FOR MEDIA QUERIESWEBKIT SOLVES ALL PROBLEMS?

PROXY BROWSERS CAN ACT LIKE DESKTOP BROWSERSPHONE-NATIVE BROWSERS SOLVE ALL PROBLEMS?

INSANELY TINY TEXT WHEN MEDIA QUERIES FAILTABLETS SOLVE ALL PROBLEMS?

Cold, hard facts

World population, 2010: 6.9 billion

1.96 billion global Internet connections (28.7% of the world: 42% Asia, 24% Europe, 13% NA)

5.1 billion mobile subscriptions (over 4 billion use 2G GSM)

SOURCES: INTERNETWORLDSTATS.COM, BUDDE.COM.AU

1.3 billion mobile Internet users

Almost 1/3 of Internet users access only via mobile (including almost 25% of U.S. users)

Only 21% of mobile users have 3G access

1.96 billion Internet connections...

minus 1.3 billion mobile users...

equals about 500 million broadband Internet connections worldwide

WORLDWIDE MOBILE DEVICE SALESAPPLE? 3%. RIM? 3%. MOTOROLA? 3%. HTC? 2%.

The Jakarta effect

The Jakarta effect

Capital of Indonesia, ~9.6 million people

$100/month ADSL vs. ~$17/month unlimited mobile data

Proximity to China = cheap Shanzhai (“bandit”) phones

The Jakarta effect

~2 million BlackBerry users

Largest Twitter user base worldwide

#2 Opera Mini user base worldwide

#3 Facebook user base worldwide

So what do we do?

- BRYAN RIEGER, “RETHINKING THE MOBILE WEB”

Desktop before mobile is backward!

Mobile devices are less powerful than desktops

Mobile bandwidth is more expensive

So why are we sending more (and more complicated) code for mobile than desktop?

Mobile First

Mobile site + media queries = desktop site

Progressive enhancement

No support for media queriesis the first media queryMedia queries don’t work on most mobile devices

Most desktop browsers support media queries (and are powerful enough to use them without slowing down)

Old desktop browser = less complicated site!

Avoid unnecessary data transfer

NYTimes.com mobile: ~970KB

Avoid unnecessary data transfer

Guardian.co.uk mobile: ~80KB

Avoid unnecessary data transfer

display: none still uses bandwidth

Load images as progressive enhancement instead through media-queried stylesheets

Use JS for progressive enhancement only

Mobile devices are less powerful

Animation takes a lot of processing

Frameworks are big downloads

Use JS for progressive enhancement only

So, avoid JavaScript for mobile whenever possible

Use CSS3 animation instead

Amazon, FB, and Google all launched with no JS in their original designs

Testing!

OPERA MINI

UC WEB

Device-specific emulatorsNokia Symbian

RIM Blackberry

Palm webOS

Windows Mobile

iPhone SDK

Android SDK

Who gets it right?

HICKSDESIGN.CO.UKSUPER-WIDE > WIDE > TABLET > MOBILE (ALL FLUID)

STPAULSSCHOOL.ORG.UKTHREE COLUMN > TWO COLUMN > ONE COLUMN (ALL FLUID, WITH ANIMATION)

YIIBU.COMWIDE > NARROW (FLUID GRIDS + IMAGES GO A LONG WAY)

HUFFDUFFER.COMTWO LAYOUTS (THREE VARIATIONS)

Limitations

Conditional HTML

Image size overhead

Conditional JS behavior

Capabilities detection

“The choice is not between using media queries and creating a dedicated mobile site; the choice is between using media queries and doing nothing at all.”

- Jeremy Keith, “A responsive mind”

Resources

Volkside Wirify

filamentgroup’s “responsive-images” plugin

Sencha Animator

iAd Producer

Websites

Yiibu (and SlideShare page)

A List Apart

Unstoppable Robot Ninja

Mobiforge

Thanks!Kevin Zurawel

@kzurawelarborwebsolutions.com