It seems like new browsers and devices are invented every day. This reality leaves us with a couple paths: ignore them but fall behind, or face ‘em head-on.
The problem is, trying to stay on top of these innovations can feel a bit like battling Sauron’s army. (And for those who don’t get the movie quip: very, very daunting.)
Fortunately, progressive enhancement is the way forward for web design — especially on mobile devices. By starting simple and building up, we can craft amazing experiences that work regardless of the capabilities or deficiencies of a given device.
And Aaron Gustafson is just the man to describe how proven techniques like mobile first, responsive design, and adaptive UI can fit into your process while expanding your skill set.
Aaron will talk about:
* Shifting your thinking to architect adaptive experiences right away
* Designing to take advantage of what’s possible on today’s mobile platforms
* Considering alternative ways to interact with UI components you design
* Using JavaScript smartly to avoid creating a “house of cards”
This talk focuses on designing for mobile - a portion of what his workshop topic will cover.
14. “ 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 Samuels
IT Manager,
National Council on Family Relations
Source
15. “ 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.
16. “ The percentage visiting from a mobile
device or tablet … was just
0.1% in 2008. It has since grown
exponentially,
200-400% per year,
to 6.2% today.
17. “ 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%.
18. “ In the second quarter of 2008
we detected 71 different
screen resolutions among our
visitors. In the first quarter of
2012 we detected
830
21. 31% 40% 21%
Out of
Out of
home Out of home home
69%
At home
60%
At home
79%
At home
54% of our daily
Computer media interactions
Smartphone Tablet
http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
22. MOBILE IS NOT
ISOLATED
90 %
of people use
multiple screens
sequentially
http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
23. starting place for online activities
Started on
smartphone
65% 63% 65% 47% 59% 66% 56%
Searching Browsing Shopping Planning Managing Social Watching an
for Info the Internet Online a Trip Finances Networking Online Video
Continued
on a PC 60% 58% 61% 45% 56% 58% 48%
Continued
on a tablet 4% 5% 4% 3% 3% 8% 8%
http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
24. MOBILE = OPPORTUNITY
Often this is for “spur-of-the-moment” activity
Often this is for “spur-of-the-moment” activity
Spontaneous vs. Planned Search Search
Spontaneous vs. Planned
20% 20%
Planned Planned
48% 48%
Planned Planned
80%80%
Spontaneous
Spontaneous
52% 52%
Spontaneous
Spontaneous
44%44% 43%43%
of all spontaneous searchessearches
of all spontaneous of all spontaneous
of all spontaneous
on smartphones were to were to
on smartphones searchessearches on PCs were to
on PCs were to
accomplish a goal a goal
accomplish accomplish a goal a goal
accomplish
http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
Base: Total Answering, Follow-Up Occasion (Search) –Occasion (Search)Smartphone (216); Tablet not shown due to smallshown dueQ. Wouldbase consider your use of
Base: Total Answering, Follow-Up PC/Laptop (492); – PC/Laptop (492); Smartphone (216); Tablet not base size. to small you size. Q. Would you consider your use of
35
45. “The commoditization of smartphone
hardware is just the beginning … of a
huge new wave of cheap devices
about to invade our lives—a zombie
apocalypse of electronics, if you will.
— Scott Jenson
46. Um… I think I’ll just
build an iPhone app.
kthxbye.
93. BUILDING ADAPTIVE DESIGNS NOW
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>
94. BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
<video poster=”poster.png”>
<source src=”video.m4v”/>
<source src=”video.webm”/>
<source src=”video.ogv”/>
<img src=”poster.png” alt=””/>
<ul>
<li><a href="video.m4v">Download MP4</a></li>
<li><a href="video.webm">Download WebM</a></li>
<li><a href="video ogv">Download Ogg</a></li>
</ul>
</video>
95. BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
<img src=”poster.png” alt=””/>
<ul>
<li><a href="video.m4v">Download MP4</a></li>
<li><a href="video.webm">Download WebM</a></li>
<li><a href="video ogv">Download Ogg</a></li>
</ul>
96. BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
<input type="date" name="dob"/>
I get it! I don’t get it :-(
97. BUILDING ADAPTIVE DESIGNS NOW
PE with Microformats
<section class="vcard">
<figure>
<img class="photo" src="aaron-gustafson.jpg" alt=""/>
</figure>
<h1 class="fn">Aaron Gustafson</h1>
…
<p>Aaron … is <b class="role">Group Manager</b> of the
<a class="org" href="http://webstandards.org">Web
Standards Project (WaSP)</a> ….</p>
</section>
98.
99.
100.
101. BUILDING ADAPTIVE DESIGNS NOW
PE with HTML & ARIA
<header role=”banner”>
<h1><img src="i/logo.png"/></h1>
<nav role=”navigation”>
<ol>
<li><a href="#details">Details</a></li>
<li><a href="#schedule">Schedule</a></li>
<li><a href="#instructors">Instructors</a></li>
<li><a href="#lodging">Lodging</a></li>
<li><a href="#location">Location</a></li>
</ol>
</nav>
</header>
102. BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seek
<span role="button">OK</span>
<div role="alert">
<p>Something went wrong.</p>
</div>
<div role="alertdialog">
<p>Something went wrong.</p>
<img src="x.png" alt="dismiss" role="button" />
</div>
115. BUILDING ADAPTIVE DESIGNS NOW
@Media blocks+
@media only screen and (max-width:450px) {
/* Styles for screen media when browser
is 450px wide or below */
}
116. BUILDING ADAPTIVE DESIGNS NOW
Don’t do this
@media
screen and (min-device-width:1024px)
and (max-width:989px),
screen and (max-device-width:480px),
screen and (max-device-width:480px)
and (orientation:landscape),
screen and (min-device-width:481px)
and (orientation:portrait) {
/* Layout for narrower desktop (below 990px)
or
iPhone running iOS 3 (or equivalent)
or
iPhone running iOS 4 (or equivalent) in “landscape” view
or
iPad (or equivalent) in “portrait” view */
}
117. BUILDING ADAPTIVE DESIGNS NOW
Mobile First w/ media queries
/* Universal Layout */
@media screen {
/* Styles for all screens */
}
@media only screen and (min-width:481px) {
/* Styles for all screens 480px+ width */
}
@media only screen and (min-width:754px) {
/* Styles for all screens 754px+ width */
}
120. BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
<input class="tweet-counter" value="140" disabled="disabled">
121. BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
<span id="chars_left_notice" class="numeric">
<strong id="status-field-char-counter"
class="char-counter">140</strong>
</span>
122. BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
<span class="tweet-counter">140
<b class="hidden"> characters remaining</b></span>
.hidden {
position: absolute;
left: 999em;
}
123. BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
<span class="tweet-counter">maximum of 140 characters</span>
<span class="tweet-counter">140
<b class="hidden"> characters remaining</b></span>
124. BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript & ARIA
<span aria-live="polite" aria-atomic="true"
class="tweet-counter">140<b class="hidden">
characters remaining</b></span>
127. BUILDING ADAPTIVE DESIGNS NOW
Traditional approach
<h1>Pumpkin Pie</h1>
<div class="container">
<div class="section">
<h2>Overview</h2>
<img src="pie.jpg" alt="">
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
</div>
<!-- ... -->
<ul class="tabs">
<li><a href="#">Overview</a></li>
<li><a href="#">Ingredients</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Nutrition</a></li>
</ul>
</div>
128. BUILDING ADAPTIVE DESIGNS NOW
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface">
<h2>Overview</h2>
<img src="pie.jpg" alt="" />
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep
dish pie crust</li>
<li> cup white sugar</li>
<!-- ... -->
</ul>
<h2>Directions</h2>
<!-- ... -->
</div>
129. BUILDING ADAPTIVE DESIGNS NOW
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface">
<h2>Overview</h2>
<img src="pie.jpg" alt="" />
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep
dish pie crust</li>
<li> cup white sugar</li>
<!-- ... -->
</ul>
<h2>Directions</h2>
<!-- ... -->
</div>
135. BUILDING ADAPTIVE DESIGNS NOW
On DOM ready
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface TabInterface-enabled">
<section>
<h2>Overview</h2>
<img src="pie.jpg" alt="">
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
</section>
<!-- ... -->
<ul class="tabs">
<li><a href="#">Overview</a></li>
<li><a href="#">Ingredients</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Nutrition</a></li>
</ul>
</div>
152. Building Adaptive Designs Now
by Aaron Gustafson
@AaronGustafson
Further reading:
http://adaptivewebdesign.info
http://blog.easy-designs.net
http://mobilewebbestpractices.com
Slides available at
http://slideshare.net/AaronGustafson
This presentation is licensed under
Creative Commons
Attribution-Noncommercial-Share Alike 3.0
except where otherwise noted
flickr Photo Credits
http://www.flickr.com/photos/aarongustafson/galleries/72157629846428745/