In this Workshop, Aaron Gustafson will teach you everything you need to know about modern web design with progressive enhancement. Whether you are a novice or an experienced professional, you will walk away from this workshop with a greater understanding of what progressive enhancement is and how to implement this philosophy in your own work.
During the course of the workshop, Aaron will mentor you on best practices as you work together to build a web page from the content out.
51. Header
Nav
Features
Extra
Social
Programs
Newsletter
News
Footer
52. Header
Features Nav
Programs Extra
News Social
Newsletter
Footer
53. User Experience
Semantics
BASIC ADVANCED
Browser Capabilities
Content
54.
55. ADAPTIVE WEB DESIGN WORKSHOP
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>
62. ADAPTIVE WEB DESIGN WORKSHOP
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>
<!-- a bunch of data -->
</table>
</figure>
63. ADAPTIVE WEB DESIGN WORKSHOP
Organization
<section>
<!-- pretty much anything can go here -->
</section>
<article>
<!-- pretty much anything can go here -->
</article>
70. ADAPTIVE WEB DESIGN WORKSHOP
Organization
<header>
<!-- titles, etc. go here -->
</header>
<footer>
<!-- meta/supplementary information goes here -->
</footer>
85. ADAPTIVE WEB DESIGN WORKSHOP
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
86. ADAPTIVE WEB DESIGN WORKSHOP
Explicit sections (HTML5)
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h2> W3C standardization process
section
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...
<h2> Markup
section
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...
1 HTML5
1.1 W3C standardization process
1.2 Markup
87. ADAPTIVE WEB DESIGN WORKSHOP
Explicit sections (HTML5)
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h1> W3C standardization process
section
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...
<h1> Markup
section
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...
1 HTML5
1.1 W3C standardization process
1.2 Markup
88. ADAPTIVE WEB DESIGN WORKSHOP
Explicit sections (HTML5)
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h4> W3C standardization process
section
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...
<h6> Markup
section
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...
1 HTML5
1.1 W3C standardization process
1.2 Markup
89. ADAPTIVE WEB DESIGN WORKSHOP
Sections
๏ section
๏ article
๏ aside
๏ footer
๏ header
๏ nav
84
90. ADAPTIVE WEB DESIGN WORKSHOP
Outline limitations in HTML4
<h1> Title
<h2> Subtitle
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
1 Title
1.1 Subtitle
91. ADAPTIVE WEB DESIGN WORKSHOP
Heading groups (HTML5)
hgroup
<h1> Title
<h2> Subtitle
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
1 Title
92. ADAPTIVE WEB DESIGN WORKSHOP
Aside: rooted sections
<h1> Title
<p> Text content continues...
<p> Text content continues...
<h2> Section heading
<p> Text content continues...
<blockquote>
<h2> Rooted heading
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
1 Title
1.1 Section heading
93. ADAPTIVE WEB DESIGN WORKSHOP
Sectioning roots
๏ body
๏ blockquote
๏ details
๏ fieldset
๏ figure
๏ td
88
136. ADAPTIVE WEB DESIGN WORKSHOP
@Media blocks
@media screen {
/* Styles for screen media only */
}
137. ADAPTIVE WEB DESIGN WORKSHOP
@Media blocks+
@media screen and (max-width:450px) {
/* Styles for screen media when browser
is 450px wide or below */
}
138. ADAPTIVE WEB DESIGN WORKSHOP
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 */
}
139. ADAPTIVE WEB DESIGN WORKSHOP
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 */
}
140.
141.
142.
143.
144. ADAPTIVE WEB DESIGN WORKSHOP
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;
}
}
145. Header
Nav
Features
Extra
Social
Programs
Newsletter
News
Footer
149. ADAPTIVE WEB DESIGN WORKSHOP
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>
150. ADAPTIVE WEB DESIGN WORKSHOP
A minor improvement
<a href="http://offsite.com"
onclick="newWin( this.href ); return false;">
some text</a>
152. ADAPTIVE WEB DESIGN WORKSHOP
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 );
};
}
}
}
167. ADAPTIVE WEB DESIGN WORKSHOP
Anchor-include pattern
Source of blog entry page
<a href="/archives/{entry_date format='%Y/%m/%d'}/{url_title}/
comments/#comments"
data-replace="/comments/{url_title}/">View comments on this
entry and add your own</a>
{if segment_4=="comments"}
<section id="comments" class="focal">
{embed="inc/.comments" url_title="{url_title}"}
</section>
{if:else}
{comment_loader}
{/if}
Examples use ExpressionEngine tags
168. ADAPTIVE WEB DESIGN WORKSHOP
Anchor-include pattern
Source of /comments/{url_title} (technically /pages/comments/{url_title})
{embed="inc/.comments" url_title="{segment_3}"}
Example uses ExpressionEngine tags
174. ADAPTIVE WEB DESIGN WORKSHOP
Remember stu like this?
<a href="foo.html"
style="color:blue;"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'">Foo</a>
175. ADAPTIVE WEB DESIGN WORKSHOP
Remember stu like this?
<a href="foo.html"
style="color:blue;"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'">Foo</a>
a, a:link, a:visited {
color: blue;
}
a:hover {
color: red;
}
176. ADAPTIVE WEB DESIGN WORKSHOP
Isn’t this the same?
for( i=0; i<objects.length; i++){
objects[i].style.display = 'none';
}
177. ADAPTIVE WEB DESIGN WORKSHOP
Small improvement
for( i=0; i<objects.length; i++){
objects[i].style.position = 'absolute';
objects[i].style.left = '-999em';
}
179. ADAPTIVE WEB DESIGN WORKSHOP
Maintenance options
๏ external style rules added to your CSS le (by hand)
๏ external CSS le added to the document (by hand)
๏ external CSS le added to the document via script
๏ embedding CSS in the document via script
168
180. ADAPTIVE WEB DESIGN WORKSHOP
Option 1: Add by hand
/* =START WickedCool Script CSS (do not remove) */
.wicked {
color: red;
font: bold 4em/2 "Comic Sans";
}
.cool {
color: blue;
font: bold 4em/2 "Comic Sans";
}
/* =END WickedCool Script CSS */
181. ADAPTIVE WEB DESIGN WORKSHOP
Option 2: Include by hand
<script src="WickedCool.js"></script>
<link rel="stylesheet" href="WickedCool.css" />
182. ADAPTIVE WEB DESIGN WORKSHOP
Option 2: Include by hand
<script src="WickedCool.js"></script>
<link rel="stylesheet" href="WickedCool.css" />
<head>
<!-- … -->
<link rel="stylesheet" href="WickedCool.css" />
</head>
<body>
<!-- … -->
<script src="WickedCool.js"></script>
</body>
183. ADAPTIVE WEB DESIGN WORKSHOP
Option 3: Scripted include
function FindPath( filename )
{
var path = false;
var scripts = document.getElementsByTagName( 'script' );
for( var i=0; i<scripts.length; i++ )
{
if( scripts[i].getAttribute( 'src' ) &&
scripts[i].getAttribute( 'src' )
.indexOf( filename ) != -1 )
{
path = scripts[i]
.getAttribute( 'src' )
.replace( new RegExp( filename ), '' );
break;
}
}
return path;
}
184. ADAPTIVE WEB DESIGN WORKSHOP
Option 3: Scripted include
var WickedCool = {
jsFile: 'WickedCool.js',
cssFile: 'WickedCool.css',
initialize: function(){
// determine the path
var path = FindPath( this.jsFile );
// add the CSS file
var css = document.createElement( 'link' );
css.setAttribute( 'rel', 'stylesheet' );
css.setAttribute( 'href', path + this.cssFile );
document.getElementsByTagName( 'head' )[0]
.appendChild( css );
// do the rest of the wicked cool stuff
}
};
185. ADAPTIVE WEB DESIGN WORKSHOP
Option 4: Scripted embed
function addCSS( styles )
{
var el = document.createElement( 'style' );
el.setAttribute( 'type', 'text/css' );
if ( el.styleSheet )
{
el.styleSheet.cssText = styles;
}
else
{
el.appendChild( document.createTextNode( styles ) );
}
document.getElementsByTagName( 'head' )[0]
.appendChild( el );
}
186. ADAPTIVE WEB DESIGN WORKSHOP
Option 4: Scripted embed
var WickedCool = {
_css: '.wicked { color: red; ' +
' font: bold 4em/2 "Comic Sans"; } ' +
'.cool { color: blue; ' +
' font: bold 4em/2' "Comic Sans"; }',
initialize: function()
{
// add the CSS
addCSS( this._css );
// do the rest of the wicked cool stuff
}
};
based on the work of Nicholas Zakas
188. ADAPTIVE WEB DESIGN WORKSHOP
How do we do that?
.TabInterface-folder {
/* ... */
}
#TabInterface .tab {
/* ... */
}
#TabInterface .tab.active {
/* ... */
}
176
189. ADAPTIVE WEB DESIGN WORKSHOP
How do we do that?
Tactic Default Activated
add “-on” to the class .tabbed .tabbed-on
add an activation class .auto-submit .auto-submit.active
change the form of the
.replace-me .replaced
class
203. ADAPTIVE WEB DESIGN WORKSHOP
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);
};
204. ADAPTIVE WEB DESIGN WORKSHOP
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
});
};
220. ADAPTIVE WEB DESIGN WORKSHOP
All the web’s a play…
<section id="main" role="main">
<!-- The primary content for the page would go here -->
</section>
231. ADAPTIVE WEB DESIGN WORKSHOP
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
232.
233. ADAPTIVE WEB DESIGN WORKSHOP
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>
234. ADAPTIVE WEB DESIGN WORKSHOP
What is it?
<a role=”button”>Tweet</a>
class=”button”>Tweet</a>
241. ADAPTIVE WEB DESIGN WORKSHOP
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>
242. ADAPTIVE WEB DESIGN WORKSHOP
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed">
<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>
243. ADAPTIVE WEB DESIGN WORKSHOP
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed">
<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>
245. ADAPTIVE WEB DESIGN WORKSHOP
Widget logic
Split Page
the content &
make some
tabs
JS?
Yes No
246. ADAPTIVE WEB DESIGN WORKSHOP
On DOM ready
<h1>Pumpkin Pie</h1>
<div class="tabbed-on">
<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>
262. ADAPTIVE WEB DESIGN WORKSHOP
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;
263. ADAPTIVE WEB DESIGN WORKSHOP
Typical hiding schemes
Accessibility
CSS Rules Display E ect
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
264. ADAPTIVE WEB DESIGN WORKSHOP
Typical hiding schemes
Accessibility
CSS Rules Display E ect
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;
265. ADAPTIVE WEB DESIGN WORKSHOP
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;
269. ADAPTIVE WEB DESIGN WORKSHOP
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>