Intro to Adaptive Web Design [ChaDev Lunch]

INTRO TO

AdaptiveWeb Design

Aaron Gustafson@aarongustafsonslideshare.net/AaronGustafson

© Brad Frost

Just four years ago the majority of our visitors saw our website in Internet Explorer on a Windows computer on a minimum 1,024 pixel wide screen. Times have really changed.“

Jason SamuelsIT Manager,National Council on Family RelationsSource

Windows users used to comprise 93.5% of our web visits. Now that percentage is 72.4%. Visitors using a Mac have more than tripled.“

The percentage visiting from a mobile device or tablet … was just0.1% in 2008. It has since grown exponentially,

200-400% per year,to 6.2% today.

“

Four years ago 75.5% of our web visitors used Internet Explorer. That number has fallen to 37%. Firefox now comprises 25.5%, Safari 19.5%, and Chrome 15.3%.“

In the second quarter of 2008 we detected 71 di"erent screen resolutions among our visitors. In the #rst quarter of 2012 we detected“

830

© Brad Frost

Smartphone sales accounted for nearly 85% of all mobile phone sales in the US in Q1 2013.“

http://www.chetansharma.com/usmarketupdateq12013.htm

Smartphones have reached 50% penetration in the US…“

http://www.chetansharma.com/usmarketupdateq12013.htm

…but that’s concentrated in30% of households“

http://www.chetansharma.com/usmarketupdateq12013.htm

U.S. Smartphone penetration #sreleased in February

http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/

< $30k47%

$30-50k53%

$50-75k61%

>$75k81%

U.S. Smartphone penetration #sreleased in February

http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/

$30k = Average US income 2013

< $30k47%

$30-50k53%

$50-75k61%

>$75k81%

< $30k47%

$30-50k53%

$50-75k61%

>$75k81%

0

30000

60000

90000

120000

<30k $30-50k $50-70k >$70k

Popu

latio

n (in

tho

usan

ds)

8,767

U.S. Smartphone vs. Income distribution

< $30k47%

$30-50k53%

$50-75k61%

>$75k81%

0

30000

60000

90000

120000

<30k $30-50k $50-70k >$70k

Popu

latio

n (in

tho

usan

ds)

8,767

U.S. Smartphone vs. Income distribution

Opportunity!

The reality

© Brad Frost

© Brad Frost

RWDTo the Rescue!

INTRO TO ADAPTIVE WEB DESIGN

What is RWD?๏ Fluid grids

๏ Flexible media

๏ Media queries

22

INTRO TO ADAPTIVE WEB DESIGN

Fluid Grids

100%

48% 48%

32% 66%

32% 32% 32%

6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5%

INTRO TO ADAPTIVE WEB DESIGN

Flexible Mediaimg { max-width: 100%; height: auto;}

INTRO TO ADAPTIVE WEB DESIGN

Media Queries@media screen and (min-width:450px) { /* Styles for screen media when browser is 450px wide or larger */}

INTRO TO ADAPTIVE WEB DESIGN

But That’s the Easy Stu"๏ Content strategy

๏ Page weight

๏ JavaScript support

๏ Interaction methods

๏ Network latency & performance

๏ Hardware performance

๏ Screen resolution

๏ Sensor availability

๏ etc.

34

INTRO TO ADAPTIVE WEB DESIGN

What’s in a name?๏ Responsive Web Design

๏ Adaptive Web Design

๏ Progressive Enhancement

๏ Aggressive Enhancement

๏ Responsible Web Design

35

INTRO TO ADAPTIVE WEB DESIGN

What’s in a name?๏ Responsive Web Design

๏ Adaptive Web Design

๏ Progressive Enhancement

๏ Aggressive Enhancement

๏ Responsible Web Design

36

© Brad Frost

We don’t know

Even whenwe thinkwe know,

we’re probably wrong

So howdo we cope?

Content

I like an escalator because an escalator can never break,it can only become stairs.

— Mitch Hedberg

GracefulDegradation

ModernBrowsers

Older Browsers

ModernBrowsers

Older Browsers

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

Content

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

Text & HTTP

HTML

CSS

JavaScript

¶

<>

{}

↖

ARIA

HTML

HTMLHTML5

Microformats

HTML4

MCMLXXVII

MCMLXXVII(that’s 1977)

HTML CSS

fault tolerancen. a system’s ability to continue to operate when it encounters and unexpected error.

Browsers ignorewhat they don’t

understand

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

Content

Contentis why

we build websites

Users must have access to key

content tasks&

Make sure markup, styles scripts don’t

obscure it.&

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

Content

Semantics

INTRO TO ADAPTIVE WEB DESIGN

Semantics 101<p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p>

<p>Please fill out the form below. <strong>Note: all fields are required.</strong></p>

<p>I like to work with markup languages because <strong>they are simple and easy to read</strong>. They also have that certain <i lang="fr" title="I don&#8217;t know what">je ne sais quoi</i>.</p>

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

Content

Semantics

Design

MobileFirst

ResponsiveWeb Design

:-)

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

Content

Semantics

Design

Interactivity

But it’s notonly about

no JavaScript

๏Bugs

๏Browser Add-ons

๏Overzealous Firewalls

๏Underpowered devices

๏Page is still loading

SPoF

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

Content

Semantics

Design

Interactivity

Accessibility

“special needs”

can beCONTEXTUAL

“special needs”

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

Text & HTTP

HTML

CSS

JavaScript

¶

<>

{}

↖

ARIA

Thank you!!!Further Reading

http://is.gd/readlist_awd

codeandcreativity.com

CHADeviceLab.org! @CHADeviceLab

Intro to Adaptive Web Designby Aaron Gustafson@AaronGustafson

Further reading:http://adaptivewebdesign.info

http://blog.easy-designs.nethttp://mobilewebbestpractices.com

Slides available athttp://slideshare.net/AaronGustafson

This presentation is licensed underCreative Commons

Attribution-Noncommercial-Share Alike 3.0except where otherwise noted

flickr Photo Creditshttp://www.!ickr.com/photos/aarongustafson/galleries/72157637122441956/