intro to adaptive web design [edui 2013]
DESCRIPTION
For years, designers and developers have griped about the difficulties they encountered in supporting the numerous desktop browsers out there, but mobile is even more fragmented. Phones, tablets, media players, video game systems—each device (and in some cases each browser on each device) has its own dimensions, quirks and capabilities. It can make your brain hurt just thinking about it. Thankfully, going mobile doesn’t have to be a painful experience. In this session, Aaron Gustafson will introduce you to the concept of progressive enhancement and demonstrate why it is the way forward for web design, especially on mobile devices. In the course of his talk, he’ll walk you through progressive enhancement’s layered approach and show you how the latest techniques—mobile first, responsive design, and adaptive UI—fit in to the process. Note: If you plan to take participate in Aaron’s workshop, Adaptive Web Design: Layer by Layer, you will want to attend this session or read the first chapter of Aaron’s book (free download) in order to get the necessary background. What You'll Learn: * What progressive enhancement is * How it’s different from ‘graceful degradation’ * How progressive enhancement leads to a better user experienceTRANSCRIPT
© 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’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/