Adaptive Web Design Workshop [inspire 2011]

ADAPTIVE WEB DESIGN WORKSHOP

The Agenda
๏ Progressive Enhancement

‣ vs Graceful Degradation

‣ How & Why It Works

๏ Content & Organization
๏ Semantics

‣ HTML5

‣ Microformats

2


The Agenda
๏ Design

‣ Parsing Errors

‣ Designing in Layers

‣ Adaptive Layouts

‣ “Mobile First”
๏ Interactivity

‣ Unobtrusive JavaScript
‣ Adaptive Interfaces

‣ Hijax

3


The Agenda
๏ Accessibility

‣ Design Considerations

‣ ARIA

4

fault tolerance
n. a system’s ability to continue to
operate when it encounters and
unexpected error.

Browsers IGNORE
what they don’t
understand

Modern
Browsers
Older Browsers

Progressive
Graceful Degradation Enhancement

Progressive
Enhancement
ISN’T about
browsers.

Browsers and
technologies
COME AND GO

Don’t lose sight
of your USERS

User Experience

BASIC ADVANCED

Browser Capabilities

User Experience

BASIC ADVANCED


Content

User Experience

Semantics
BASIC ADVANCED


Content

User Experience

Design

Semantics
BASIC ADVANCED


Content

User Experience

Interactivity

Design

Semantics
BASIC ADVANCED


Content

User Experience

Accessibility

Interactivity

Design

Semantics
BASIC ADVANCED


Content

User Experience

ARIA

JavaScript

CSS

HTML
BASIC ADVANCED


Text & HTTP

Content
is WHY
we build
websites

Clear,
well-written
prose is key.

Organize
& prioritize
your content

Header

Nav
Features

Extra

Social
Programs
Newsletter

News

Footer

Header

Features Nav

Programs Extra

News Social

Newsletter

Footer


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>


Semantics 101

small


Semantics 101

hr

Organization
<figure id="fig-1">
<img src="photo.jpeg" alt=""/>
<figcaption>Photo of Albert Einstein</figcaption>
</figure>

<figure id="fig-2">
<table>
<caption>2011 Forecast Earnings</caption>

</table>
</figure>

Organization
<section>

</section>

<article>

</article>

Organization
<header>

</header>

<footer>

</footer>


Organization
<nav>
<ol>
<li><a href="#details">Details</a></li>
<li><a href="#lodging">Lodging</a></li>
<li><a href="#location">Location</a></li>
<li><a href="#topics">Topics</a></li>
<li><a href="#contact">Contact Us</a></li>
</ol>
<p><a href="register">Register Now</a>
<b>Only 5 spaces left</b></p>
</nav>

Organization
<article>



<aside>

</aside>

</article>


Implicit sections (HTML4)
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...

<h2> W3C standardization process
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...

<h2> Markup
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...

1 HTML5
1.1 W3C standardization process
1.2 Markup


Explicit sections (HTML5)
<h1> HTML5

section


<h2> Markup
section


1 HTML5
1.2 Markup


<h1> HTML5

section


<h1> Markup
section


1 HTML5
1.2 Markup


<h1> HTML5

section


<h6> Markup
section


1 HTML5
1.2 Markup


Sections
๏ section
๏ article
๏ aside
๏ footer
๏ header
๏ nav

88


Outline limitations in HTML4
<h1> Title
<h2> Subtitle
<p> Text content continues...

1 Title
1.1 Subtitle


Heading groups (HTML5)

hgroup
<h1> Title
<h2> Subtitle

1 Title


Aside: rooted sections
<h1> Title

<h2> Section heading
<blockquote>
<h2> Rooted heading

1 Title
1.1 Section heading


Sectioning roots
๏ body
๏ blockquote
๏ details
๏ fieldset
๏ figure
๏ td

92


Dates & Times
<input type="date" name="dob"/>


Numbers
<input type="number" name="foo"/>

<input type="range" min="1" max="11" name="foo"/>


Format validation
<input type="email" …/> <input type="url" …/>


Format validation
<input type="text"
pattern="d{6}w{3}"
placeholder="6 digits followed by 3 letters"
.../>


Classi cation


Identi cation


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>

Semantics
<div id="header">
<a href="#donate" class="donate-link"
title="Click here to view our donation options">Donate</a>
<a href="http://villagereach.org/feed/" class="rss-link"
title="View our RSS Feed">RSS Feed</a>
<div id="site-title">
<a href="http://villagereach.org" title="Village Reach: Home">
<span>Village Reach</span>
</a>
</div>
</div>

Features

Programs

News

Semantics
<div class="entry-content entry">

<div class="boxes three home">

</div>
<div id="latestNews">

</div>
</div>

Semantics
<div id="hybrid-search-3" class="widget search widget-search">
<div class="widget-inside">
<form method="get" class="search-form" id="search-form"
action="http://villagereach.org/">

</form>
</div>
</div>
<div id="navigation">
<div id="page-nav" class="page-nav">
<ul class="menu sf-menu">

</ul>
</div>
</div>

Semantics
<div id="text-8" class="widget widget_text widget-widget_text">

</div>
</div>

</div>
</div>
<div id="mc_signup_container">

</div>

Semantics
<div id="footer-container">
<div id="footer">
<p class="copyright">Copyright © 2011 <a class="site-link"
href="http://villagereach.org" title="VillageReach"
rel="home"><span>VillageReach</span></a>. - All rights
reserved.</p>
</div>
</div>


Parsing errors

p{
color: red;
}


Parsing errors

p{
color: red;
font-weight: bold;
}


Parsing errors
p {
color: #ccc;
color: rgba( 0, 0, 0, .5 );
}


Parsing errors
html[lang] p {
color: #ccc;
color: rgba( 0, 0, 0, .5 );
}


Parsing errors
@-moz-document url-prefix() {
html[lang] p {
color: #ccc;
color: rgba( 0, 0, 0, .5 );
}
}

#intro {
/* Basic Layout */
}

/* ... */

body[id=css-zen-garden] #intro {
/* Advanced Layout */
}

#intro {
/* Basic Layout */
}

/* ... */

[foo], #intro {
/* Advanced Layout */
}


Parsing errors
@import 'not-for-IE7-or-below.css' screen;

@media screen, print, refrigerator {
/* IE will get these rules */
}


Organization

design


Organization

type color

layout


Organization
/* =Typography */
img {
display: block;
}

/* =Layout */
@media screen {
.frame .inner {
border: 10px solid;
}
}

/* =Color */
.frame .inner {
background-color: rgb(227, 222, 215);
border-color: rgb(227, 222, 215);
}


Organization

type.css

layout.css main.css

color.css


Organization
{embed="styles/typography"}

@media screen {
{embed="styles/layout-screen"}
}

{embed="styles/color"}


Organization
{embed="styles/reset"}

{embed="styles/typography"}

@media screen {
{embed="styles/layout-screen"}
}

@media print {
{embed="styles/layout-print"}
}

{embed="styles/color"}

{embed="styles/effects"}

Monkey-patching
<link rel="stylesheet" href="main.css"/>


Monkey-patching
@-moz-document url-prefix() {

/* GENERATED CONTENT - FF3 doesn't allow positioning */
#extra-mile:before {
content: '';
}
#extra-mile:first-of-type:before {
content: url(extra-mile-sign.png);
}

}


Media Queries


@Media blocks
@media screen {
/* Styles for screen media only */
}


@Media blocks+
@media screen and (max-width:450px) {
/* Styles for screen media when browser
is 450px wide or below */
}


Getting granular
@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 */
}


Mobile First w/ media queries
/* Universal Layout */

@media screen {
/* Styles for all screens */
}

@media screen and (min-width:481px) {
/* Styles for all screens 480px+ width */
}

@media screen and (min-width:754px) {
/* Styles for all screens 754px+ width */
}


Mobile First w/ media queries
#hd {
background: url(hd-bg-small.png) repeat-x 50% 50%;
}
#hd .logo a {
background: url(logo-small.png) no-repeat 50% 0;
display: block;
width: 240px;
height: 109px;
/* … */
}
@media screen and (min-width: 481px) {
#hd {
background: url(hd-bg.png) no-repeat 50% 52px;
}
#hd .logo a {
background-image: url(logo.png);
width: 342px;
height: 155px;
}
}


Sins of our past
<a href="javascript:someFunction();">some text</a>

<a href="javascript:void(null);"
onclick="someFunction();">some text</a>

<a href="#" onclick="someFunction();">some text</a>


A minor improvement
<a href="http://offsite.com"
onclick="newWin( this.href ); return false;">
some text</a>


Event listeners
window.onload = handleExternalLinks;

function handleExternalLinks()
{
var server = document.location.hostname;
var anchors = document.getElementsByTagName("a");
var i, href;
for( i=0; i < anchors.length; i++ )
{
href = anchors[i].href;
if ( href.indexOf("http://" + server) == -1 &&
href.indexOf("https://" + server) == -1 )
{
// HREF is not a file on my server
anchors[i].onclick = function()
{
newWin( this.href );
};
}
}
}


Listen and delegate
document
.getElementsByTagName( 'body' )[0]
.onclick = clickDelegator;

function clickDelegator( e )
{
e = ( e ) ? e : event;
var el = e.target || e.srcElement;
// external links
if ( el.nodeName.toLowerCase() == 'a' &&
el.getAttribute( 'rel' ) == 'external' )
{
newWin( el.href );
}
}


Test for dependencies
function someFunction()
{
if ( !document.getElementsByTagName ) return;

// code that uses document.getElementsByTagName()

}


{
if ( !document.getElementsByTagName ||
!document.getElementById ) return;

/* code that uses document.getElementsByTagName()
and document.getElementById() */

}


{
if ( !document.getElementsByTagName ||
!document.getElementsByTagName('p') ) return;

// code that requires the presence of a P element

}


{
if ( !document.getElementById ||
!document.getElementById('content') ) return;

// code that requires the presence of #content

}


{
if ( typeof( Prototype ) == 'undefined' ||
parseFloat( Prototype.Version ) < 1.5 ) return;

// code that uses Prototype 1.5 or higher

}


window.addEventListener(
'load',
function(){
if ( document.getElementsByTagName &&
document.getElementById )
{
someFunction();
}
},
false
);


Typical hiding schemes
Accessibility
CSS Rules Display E ect
E ect
visibility: hidden; Element is hidden from Content is ignored by screen
view, but is not removed readers
from the normal ow (i.e. it
still takes up the space it
normally would)

display: none; Element is removed from Content is ignored by screen
the normal ow and hidden; readers
the space it occupied is
collapsed

height: 0; Element is collapsed and Content is ignored by screen
width: 0; contents are hidden readers
overflow: hidden;


Accessibility
E ect
text-indent: -999em; Contents are shifted o - Screen readers have access
screen and hidden from to the content, but the
view, but links may “focus” content is limited to text and
oddly and negative indent inline elements
may not prove long enough
to fully hide content

position: absolute; Content is removed from Screen readers have access
left: -999em; the normal ow and shifted to the content
o the left-hand edge; the
space it occupied is
collapsed


Accessibility
E ect
position: absolute; Content is positioned Screen readers have access
/* IE6, IE7 */ absolutely (and is removed to the content
clip: rect(
1px 1px 1px 1px from the normal ow), but
); remains in place and is
/* W3C */ clipped to become invisible
clip: rect(
1px, 1px, 1px, 1px
);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;


“Fixing” libraries
(function(){
var $button = $('#myButton'),
$text = $('#myText'),
visible = true;
$button.click(function(){
if ( visible ) {
$text.slideUp('fast');
} else {
$text.slideDown('fast');
}
visible = ! visible;
});
})();


“Fixing” libraries
(function(){
var $button = $('#myButton'),
$text = $('#myText'),
visible = true;
$button.click(function(){
if ( visible ) {
$text.slideUp('fast',function(){
$text.addClass('accessibly-hidden')
.slideDown(0);
});
} else {
$text.slideUp(0,function(){
$text.removeClass('accessibly-hidden')
.slideDown('fast');
});
}
visible = ! visible;
});
})();


Managing focus
<div tabindex="0">
<p>This <code>div</code> can now receive focus using a
keyboard’s <kbd>tab</kbd> key. How cool is that?</p>
</div>

<div tabindex="-1">
<p>This <code>div</code> won’t be focused by a user via the
<kbd>tab</kbd> key, but JavaScript can <code>focus()</code> it.
Nifty, huh?</p>
</div>


Mobile interfaces


Swapping content
var trigger = 659;

// …

function toggleDisplay()
{
var width = $window.width();
if ( showing == 'old' &&
width <= trigger )
{
$old_nav.replaceWith($new_nav);
showing = 'new';
}
else if ( showing == 'new' &&
width > trigger )
{
$new_nav.replaceWith($old_nav);
showing = 'old';
}
}


Semantics
<ul>
<li>
<a href="#"><img src="…" alt="" /></a>
<span>Your new online source for information
on our progress</span>
</li>
<li>
<span>VillageReach Announces Mozambique
National Expansion</span>
</li>
<li>
<span>VillageReach's innovative approach
for last mile communities</span>
</li>
…
</ul>


Style?
<ul style=”height: 300px;”>
<li style=”height: 300px;” >
</li>
</li>
</li>
…
</ul>


Style?
<ul class="jcarousel-skin-vr" style=”height: 300px;”>
<li style=”height: 300px;”>
</li>
</li>
</li>
…
</ul>


Script
<ul id="vr-carousel">
<li>
</li>
<li>
</li>
<li>
</li>
…
</ul>


Script
$j('#vr-carousel').jcarousel({
auto: 6,
visible: 1,
animation: 0,
wrap: 'both',
scroll: 1,
initCallback: vrCarousel_initCallback,
itemFirstInCallback: vrCarousel_itemFirstInCallback,
itemFirstInCallback: vrCarousel_fadeIn,
itemFirstOutCallback: vrCarousel_fadeOut
});


Script
function vrCarousel_initCallback( carousel, item, idx, state )
{
// Pause autoscrolling if the user moves
// with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});

$j('.jcarousel-item').css('opacity', 0);
};


Script
function vrCarousel_initCallback( carousel, item, idx, state )
{
var $i = carousel.list.find(‘img’), h = 0;

// get the max h
$i.each(function(){
var test = $j(this).height();
if ( test > h ){ h = test; }
});

// …

carousel.list.height(h);
$j('.jcarousel-item').css({
opacity: 0, height: h
});

};

http://flex.madebymufffin.com

“special needs”
can be
CONTEXTUAL


What is it?


What is it?

<button>Tweet</button>

<a class=”button”>Tweet</a>


What is it?

<button>Search Mail</button>

<div>Search Mail</div>


ARIA maps the OS to the web

All the web’s a play…
<section id="main" role="main">

</section>


Semantic comparison
Ad-hoc ARIA Role HTML5

#header, #top banner header (kind of)

#main, #content main none

#extra, .sidebar complementary, note aside

#footer, #bottom contentinfo footer

#nav navigation nav

.hentry article article


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>


What is it?

<a role=”button”>Tweet</a>
class=”button”>Tweet</a>


What is it?

<a role=”button”>Tweet</a>


What’s happening?

B B
(off) (on)

<span>
<img src="bold-off.png" alt="bold" />
</span>
<span>
<img src="bold-on.png" alt="bold" />
</span>


What’s happening?

B B
(off) (on)

<span>
<img src="bold-off.png" alt="not bold" />
</span>
<span>
</span>


What’s happening?

B B
(off) (on)

<span role="button" aria-pressed="false">
<img src="bold-off.png" alt="not bold" />
</span>
<span role="button" aria-pressed="true">
</span>


Complex 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>

Cleaner approach
<div class="tabbed">
<h2>Overview</h2>
<img src="pie.jpg" alt="" />

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


No JS, basic CSS


Widget logic

Page


Widget logic

Page

JS?


Widget logic

Page

JS? No


Widget logic

Split Page
the content &
make some
tabs

JS?
Yes No

On DOM ready
<div class="tabbed-on">
<section>
<h2>Overview</h2>
<img src="pie.jpg" alt="">

</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>


Adding ARIA
role="tablist"

228


Adding ARIA

role="tab"
aria-selected="true"
aria-controls="folder-1"


Adding ARIA role="tab"
aria-selected="false"
aria-controls="folder-4"


Adding ARIA

role="tabpanel"
aria-hidden="false"
aria-labelledby="folder-1-tab"


Adding ARIA

role="application"
aria-activedescendant="folder-1"


Result!


Hey! Over here!


Hey! Over here!

<input class="tweet-counter" value="140" disabled="disabled">


Hey! Over here!

<span id="chars_left_notice" class="numeric">
<strong id="status-field-char-counter"
class="char-counter">140</strong>
</span>


Hey! Over here!

<span class="tweet-counter">140
<b class="hidden"> characters remaining</b></span>

.hidden {
position: absolute;
left: −999em;
}


Hey! Over here!

<span class="tweet-counter">maximum of 140 characters</span>

<span class="tweet-counter">140
<b class="hidden"> characters remaining</b></span>


Hey! Over here!

<span aria-live="polite" aria-atomic="true"
class="tweet-counter">140<b class="hidden">
characters remaining</b></span>

ARIA Roles
<div id="header">
<a href="#donate" class="donate-link"
title="Click here to view our donation options">Donate</a>
<a href="http://villagereach.org/feed/" class="rss-link"
title="View our RSS Feed">RSS Feed</a>
<div id="site-title">
<a href="http://villagereach.org" title="Village Reach: Home">
<span>Village Reach</span>
</a>
</div>
</div>

ARIA Roles
<div class="entry-content entry">

<div class="boxes three home">

</div>
<div id="latestNews">

</div>
</div>

ARIA Roles
<div id="hybrid-search-3" class="widget search widget-search">
<form method="get" class="search-form" id="search-form"
action="http://villagereach.org/">

</form>
</div>
</div>
<div id="navigation">
<div id="page-nav" class="page-nav">
<ul class="menu sf-menu">

</ul>
</div>
</div>

ARIA Roles

</div>
</div>

</div>
</div>
<div id="mc_signup_container">

</div>

ARIA Roles
<div id="footer-container">
<div id="footer">
<p class="copyright">Copyright © 2011 <a class="site-link"
href="http://villagereach.org" title="VillageReach"
rel="home"><span>VillageReach</span></a>. - All rights
reserved.</p>
</div>
</div>


ARIA Roles & States
<div class="jcarousel-container jcarousel-container-horizontal"
style="display: block; ">
<ul id="vr-carousel">
<li>
</li>
<li>
</li>
…
</ul>
</div>


ARIA Roles & States
<div id="jcarousel-control">
<div class="jcarousel-prev jcarousel-prev-horizontal"
style="display: block; " disabled="false"></div>
<span id="jcarousel-control-caption">
VillageReach Announces Mozambique National Expansion
</span>
<div class="jcarousel-next jcarousel-next-horizontal"
style="display: block; " disabled="false"></div>
</div>

Adaptive Web Design
Workshop
by Aaron Gustafson

More of the same:
http://adaptivewebdesign.info
http://easy-designs.net
http://blog.easy-designs.net
http://aaron-gustafson.com

Slides available at
http://slideshare.net/AaronGustafson

© Aaron Gustafson. All Rights Reserved.

Adaptive Web Design Workshop [inspire 2011]

More Related Content

What's hot (19)

Similar to Adaptive Web Design Workshop [inspire 2011] (20)

More from Aaron Gustafson (20)

Recently uploaded (20)

Adaptive Web Design Workshop [inspire 2011]