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

2009 2010 2011 2012

6.8 Billion

2009

2010

2011

http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/a#subscribers

2012

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

© Brad Frost

© Brad Frost

RWDTo the Rescue!

INTRO TO ADAPTIVE WEB DESIGN

What is RWD?๏ Fluid grids

๏ Flexible media

๏ Media queries

19

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.

31

INTRO TO ADAPTIVE WEB DESIGN

What’s in a name?๏ Responsive Web Design

๏ Adaptive Web Design

๏ Progressive Enhancement

๏ Aggressive Enhancement

๏ Responsible Web Design

33

© 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(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

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

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/