Intro to Adaptive Web Design [ChaDev Lunch]

INTRO TO

AdaptiveWeb Design

Aaron [email protected]/AaronGustafson

http://twitter.com/aarongustafson

http://twitter.com/aarongustafson

http://slideshare.net/AaronGustafson

http://slideshare.net/AaronGustafson

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

http://blog.jasonsamuels.net/post/21633531278/analytics-confirm-the-need-for-adaptive-web-design-and

http://blog.jasonsamuels.net/post/21633531278/analytics-confirm-the-need-for-adaptive-web-design-and

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

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…“




…but that’s concentrated in30% of households“




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

RWDTo the Rescue!

INTRO TO ADAPTIVE WEB DESIGN

What is RWD?๏ Fluid grids

๏ Flexible media

๏ Media queries

22


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%


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


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


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


What’s in a name?๏ Responsive Web Design

๏ Adaptive Web Design

๏ Progressive Enhancement

๏ Aggressive Enhancement

๏ Responsible Web Design

35


What’s in a name?๏ Responsive Web Design

๏ Adaptive Web Design

๏ Progressive Enhancement

๏ Aggressive Enhancement

๏ Responsible Web Design

36

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

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text & HTTP

HTML

CSS

JavaScript

¶

<>

{}

↖

ARIA

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


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


Content

Semantics

Semantics 101HTML5 introduces several really useful elements and a ton of new APIs.

Please fill out the form below. Note: all fields are required.

I like to work with markup languages because they are simple and easy to read. They also have that certain je ne sais quoi.

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

MobileFirst

ResponsiveWeb Design

:-)

BASIC ADVANCED

Use

r Exp

erie

nce


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


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

“special needs”

can beCONTEXTUAL

“special needs”

BASIC ADVANCED

Use

r Exp

erie

nce


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/

Intro to Adaptive Web Design [ChaDev Lunch]

Technology

Transcript of Intro to Adaptive Web Design [ChaDev Lunch]