How do you plan for the unknown? The answer is obvious—you can’t—but that’s not a bad thing. Unknowns can be scary, but they also create opportunity.
On the web, it’s tempting to focus our effort around what we know (or think we know) about our customers based on analytics data we’re collecting and our own experience of the web. Similarly, we often get hung up on trying to give every customer the exact same experience of our product. What we need to realize, however, is that analytics and anecdotal knowledge only get you so far. Our customers’ access and experience of the web is highly variable, deeply personal, and, more often than not, completely out of our control.
But take heart, all is not lost. By being flexible in our approach and embracing the unknown, we can create user experiences that are intended to vary from device to device, browser to browser, and network to network.
In this workshop, Aaron Gustafson will explain the ins and outs of crafting rich web experiences that adapt to the capabilities and peculiarities of our customers and their devices, while maintaining your sanity in the process. You’ll leave with:
* an understanding of the challenges (and possibilities) presented by the wide range of browsers and devices being used to access the web;
* a fresh perspective on interface design, grounded in the progressive enhancement philosophy;
* ideas around how to tailor experiences based on device capabilities;
* solid strategies for determining how common UI components can be re-imagined in an adaptive fashion; and
* a practical knowledge of how HTML, CSS, and JavaScript can be deployed in the service of adaptive user interfaces.
3. 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
4. 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.“
5. 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.
“
6. 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%.
“
7. In the second quarter of 2008
we detected 71 different
screen resolutions among our
visitors. In the first quarter of
2012 we detected
“ 830
34. “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
74. PLANNING ADAPTIVE INTERFACES
No need to link
<figure id="fig-1">
<img src="/path/small.png"
data-enlarged="/path/large.png"
alt="">
<figcaption>
<h6>Retreats 4 Geeks</h6>
<p>We built this site for our intimate retreat series.</p>
</figcaption>
</figure>
77. PLANNING ADAPTIVE INTERFACES
Make the connection
<figure id="fig-1">
<img src="/path/small.png"
data-enlarged="/path/large.png"
alt=""
class="enlargable">
<p class="enlarge"><a href="#enlarge">Click to Enlarge</a></p>
<figcaption>
<h6>Retreats 4 Geeks</h6>
<p>We built this site for our intimate retreat series.</p>
</figcaption>
</figure>
80. PLANNING ADAPTIVE INTERFACES
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>
81. PLANNING ADAPTIVE INTERFACES
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>
82. PLANNING ADAPTIVE INTERFACES
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>