Intro to Adaptive Web Design [ChaDev Lunch]
-
Upload
aaron-gustafson -
Category
Technology
-
view
106 -
download
0
description
Transcript of Intro to Adaptive Web Design [ChaDev Lunch]
![Page 2: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/2.jpg)
© Brad Frost
![Page 3: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/3.jpg)
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
![Page 4: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/4.jpg)
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.“
![Page 5: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/5.jpg)
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.
“
![Page 6: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/6.jpg)
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%.“
![Page 7: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/7.jpg)
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
![Page 8: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/8.jpg)
© Brad Frost
![Page 9: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/9.jpg)
Smartphone sales accounted for nearly 85% of all mobile phone sales in the US in Q1 2013.“
http://www.chetansharma.com/usmarketupdateq12013.htm
![Page 10: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/10.jpg)
Smartphones have reached 50% penetration in the US…“
http://www.chetansharma.com/usmarketupdateq12013.htm
![Page 11: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/11.jpg)
![Page 12: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/12.jpg)
…but that’s concentrated in30% of households“
http://www.chetansharma.com/usmarketupdateq12013.htm
![Page 13: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/13.jpg)
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%
![Page 14: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/14.jpg)
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%
![Page 15: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/15.jpg)
< $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
![Page 16: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/16.jpg)
< $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!
![Page 17: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/17.jpg)
![Page 18: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/18.jpg)
The reality
![Page 19: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/19.jpg)
![Page 20: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/20.jpg)
© Brad Frost
![Page 21: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/21.jpg)
![Page 22: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/22.jpg)
© Brad Frost
![Page 23: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/23.jpg)
RWDTo the Rescue!
![Page 24: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/24.jpg)
INTRO TO ADAPTIVE WEB DESIGN
What is RWD?๏ Fluid grids
๏ Flexible media
๏ Media queries
22
![Page 25: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/25.jpg)
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%
![Page 26: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/26.jpg)
INTRO TO ADAPTIVE WEB DESIGN
Flexible Mediaimg { max-width: 100%; height: auto;}
![Page 27: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/27.jpg)
INTRO TO ADAPTIVE WEB DESIGN
Media Queries@media screen and (min-width:450px) { /* Styles for screen media when browser is 450px wide or larger */}
![Page 28: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/28.jpg)
![Page 29: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/29.jpg)
![Page 30: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/30.jpg)
![Page 31: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/31.jpg)
![Page 32: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/32.jpg)
![Page 33: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/33.jpg)
![Page 34: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/34.jpg)
![Page 35: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/35.jpg)
![Page 36: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/36.jpg)
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
![Page 37: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/37.jpg)
INTRO TO ADAPTIVE WEB DESIGN
What’s in a name?๏ Responsive Web Design
๏ Adaptive Web Design
๏ Progressive Enhancement
๏ Aggressive Enhancement
๏ Responsible Web Design
35
![Page 38: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/38.jpg)
INTRO TO ADAPTIVE WEB DESIGN
What’s in a name?๏ Responsive Web Design
๏ Adaptive Web Design
๏ Progressive Enhancement
๏ Aggressive Enhancement
๏ Responsible Web Design
36
![Page 39: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/39.jpg)
© Brad Frost
![Page 40: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/40.jpg)
We don’t know
![Page 41: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/41.jpg)
Even whenwe thinkwe know,
we’re probably wrong
![Page 42: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/42.jpg)
So howdo we cope?
![Page 43: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/43.jpg)
Content
![Page 44: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/44.jpg)
![Page 45: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/45.jpg)
I like an escalator because an escalator can never break,it can only become stairs.
— Mitch Hedberg
![Page 46: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/46.jpg)
![Page 47: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/47.jpg)
GracefulDegradation
![Page 48: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/48.jpg)
ModernBrowsers
Older Browsers
![Page 49: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/49.jpg)
ModernBrowsers
Older Browsers
![Page 50: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/50.jpg)
![Page 51: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/51.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
![Page 52: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/52.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Content
![Page 53: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/53.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Content
Semantics
![Page 54: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/54.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Content
Semantics
Design
![Page 55: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/55.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Content
Semantics
Design
Interactivity
![Page 56: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/56.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Content
Semantics
Design
Interactivity
Accessibility
![Page 57: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/57.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Text & HTTP
HTML
CSS
JavaScript
¶
<>
{}
↖
ARIA
![Page 58: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/58.jpg)
HTML
![Page 59: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/59.jpg)
HTMLHTML5
Microformats
HTML4
![Page 60: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/60.jpg)
MCMLXXVII
![Page 61: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/61.jpg)
MCMLXXVII(that’s 1977)
![Page 62: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/62.jpg)
![Page 63: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/63.jpg)
![Page 64: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/64.jpg)
![Page 65: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/65.jpg)
HTML CSS
![Page 66: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/66.jpg)
fault tolerancen. a system’s ability to continue to operate when it encounters and unexpected error.
![Page 67: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/67.jpg)
![Page 68: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/68.jpg)
![Page 69: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/69.jpg)
![Page 70: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/70.jpg)
Browsers ignorewhat they don’t
understand
![Page 71: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/71.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Content
![Page 72: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/72.jpg)
Contentis why
we build websites
![Page 73: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/73.jpg)
Users must have access to key
content tasks&
![Page 74: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/74.jpg)
Make sure markup, styles scripts don’t
obscure it.&
![Page 75: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/75.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Content
Semantics
![Page 76: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/76.jpg)
![Page 77: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/77.jpg)
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’t know what">je ne sais quoi</i>.</p>
![Page 78: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/78.jpg)
![Page 79: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/79.jpg)
![Page 80: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/80.jpg)
![Page 81: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/81.jpg)
![Page 82: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/82.jpg)
![Page 83: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/83.jpg)
![Page 84: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/84.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Content
Semantics
Design
![Page 85: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/85.jpg)
![Page 86: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/86.jpg)
![Page 87: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/87.jpg)
![Page 88: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/88.jpg)
![Page 89: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/89.jpg)
![Page 90: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/90.jpg)
MobileFirst
ResponsiveWeb Design
:-)
![Page 91: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/91.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Content
Semantics
Design
Interactivity
![Page 92: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/92.jpg)
![Page 93: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/93.jpg)
![Page 94: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/94.jpg)
But it’s notonly about
no JavaScript
![Page 95: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/95.jpg)
๏Bugs
๏Browser Add-ons
๏Overzealous Firewalls
๏Underpowered devices
๏Page is still loading
![Page 96: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/96.jpg)
SPoF
![Page 97: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/97.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Content
Semantics
Design
Interactivity
![Page 98: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/98.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Content
Semantics
Design
Interactivity
Accessibility
![Page 99: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/99.jpg)
“special needs”
![Page 100: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/100.jpg)
can beCONTEXTUAL
“special needs”
![Page 101: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/101.jpg)
![Page 102: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/102.jpg)
![Page 103: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/103.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Text & HTTP
HTML
CSS
JavaScript
¶
<>
{}
↖
ARIA
![Page 104: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/104.jpg)
![Page 105: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/105.jpg)
Thank you!!!Further Reading
http://is.gd/readlist_awd
![Page 106: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/106.jpg)
codeandcreativity.com
![Page 107: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/107.jpg)
CHADeviceLab.org! @CHADeviceLab
![Page 108: Intro to Adaptive Web Design [ChaDev Lunch]](https://reader033.fdocuments.in/reader033/viewer/2022051819/54c70c474a79593f288b4651/html5/thumbnails/108.jpg)
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/