Responsive Design Studio [Mountain View 2013]

“

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

“

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 just
0.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 different
screen resolutions among our
visitors. In the first quarter of
2012 we detected

830

6.8 Billion

2011

2012

2010

2011

2010

2009
2009

2012

http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/a#subscribers

“

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…

“

…but that’s concentrated in

30% of households


Responsive Design Studio [Mountain View 2013]

RESPONSIVE DESIGN STUDIO

What is RWD?
๏

Fluid grids

๏

Flexible media

๏

Media queries

23


Fluid Grids
6.5%

6.5%

6.5%

6.5%

32%

6.5%

6.5%

6.5%

6.5%

6.5%

6.5%

32%

32%

32%
66%

48%

48%
100%

6.5%

6.5%


Flexible Media
img {
max-width: 100%;
height: auto;
}


Media Queries
@media screen and (min-width:450px) {
/* Styles for screen media when browser
is 450px wide or larger */
}


But That’s the Easy Stuff
๏

Content strategy

๏

Page weight

๏

JavaScript support

๏

Interaction methods

๏

Network latency & performance

๏

Hardware performance

๏

Screen resolution

๏

Sensor availability

๏

etc.
35


What’s in a name?
๏

Responsive Web Design

๏

Adaptive Web Design

๏

Progressive Enhancement

๏

Aggressive Enhancement

๏

Responsible Web Design

37

When is RWD
a good fit?
When is it not?

How does
RWD fit into
project workflows?

Strategy: it’s more
important than
ever.

But it’s not about
the documents you
make.

It’s about having
clarity, purpose,
and focus.

Thinking about
content makes
RWD much easier.

“

We need to shed the notion that we
create layouts from a canvas in.
We need to flip it on its head, and
create layouts from the content
out.
—Mark Boulton, “A Richer Canvas”

This doesn’t mean
having all the
content first.

It means having a
shared vision of
what’s important.


Finding Your Focus
๏

Why do we have this website?

๏

Who are we speaking to?

๏

What do they need from us?

๏

What do we need to say most? What’s less important?

๏

How will we know if we’re successful?

48


This helps you
develop a core
strategy.


From Content Strategy for the Web
by Kristina Halvorson and Melissa Rach
50

Your core guides
every decision that
follows.


Why is this so critical for RWD?
๏

Prioritization: What do you display first on a small screen?

๏

Calls to action: What do we want people to do? How do we keep that
central when size changes?

๏

Brevity: How can we create the greatest impact with the least content?

52

Activity:
Setting Strategic
Direction

How does a user’s
relationship with
you unfold over
time?

How does their
typical path lead
them to/through
your website?


Audiences
๏

Potential/current institutional donors (e.g. NGOs)

๏

Potential/current individual donors

๏

3. Partner organizations (e.g. local health authorities)

๏

4. Public health/international development agencies (e.g. WHO)

๏

5. Members of the media

61


Audiences and Scenarios
1. A program director from the Bill & Melinda Gates Foundation.
2. A couple who met while serving in the Peace Corp in Mozambique.
3. The director of a regional health service in Tanzania.
4. A committee at the WHO.
5. A journalist from the Atlantic.

63

“

Fitting a complex, multi-level
navigation onto small screens is
difficult no matter what way you
slice it.
—Brad Frost, “Complex Navigation
Patterns for Responsive Design”

How can
we make
this easier
to slice?

“

For all of the fear that organizations
have...[mobile] is also an opportunity.
It’s also a chance to sweep away bad,
outdated desktop content.
— Karen McGrane

“

GOV.UK...has been planned, written,
organised and designed around
what users need to get done, not
around the ways government want
them to do it—providing only the
content they need and nothing
superfluous.
— Francis Maude,
Minister for the Cabinet Office

www.ﬂickr.com/photos/stevendepolo/5190591885

Redundant
Outdated
Trivial
71

www.ﬂickr.com/photos/atomicjeep/22208897/

Meaningless
72


Not just
pages
www.ﬂickr.com/photos/peroshenka/408997641


Which
content?
www.ﬂickr.com/photos/tdd/4493216417

75

www.ﬂickr.com/photos/28478778@N05/5728474385/

Representative
content
76

This would help
every site. But it’s
critical for RWD.


designers
aren’t
inﬁnite.
78


Patterns Become Content Types
Events
๏ Shows
๏ Blog Posts
๏ Articles
๏ Profiles
๏ Bios
๏ Help Modules
๏ Press Releases
๏ Directory Listings
๏ Recipes
๏ Products
๏ News Briefs
๏ Research Papers
๏

Abstracts
๏ Courses
๏ Interviews
๏ FAQs
๏ Instructions
๏

80

Content types
become repeatable.

And allow us to
anticipate
responsive needs.

Activity:
Content patterns
and types

“

People think it's this veneer —
that the designers are handed
this box and told, 'Make it look
good!' That's not what we think
design is. It's not just what it
looks like and feels like. Design
is how it works.
— Steve Jobs


Mobile First?
๏

The growth of mobile is a huge opportunity to reach more people than
ever.

๏

The constraints of the mobile medium force us to focus on what really
matters.

๏

The capabilities of mobile create opportunities to innovate.

89


I want a mobile first website.
— A. Client
๏

Start with mobile wireframes

๏

Cut anything not used in the mobile version

๏

Don’t use any interface elements that don’t work on mobile

90

“

…our job is to take
responsibility for the
complete user experience.
And if it’s not up to par, it’s
our fault, plain and simply.
— Steve Jobs


Mobile First
A philosophy—applied to responsive
design—where the display and structure of
content and functionality are defined by
key user tasks and priorities.

96

Users must have
access to key
content tasks

&

Make sure
markup, styles
scripts don’t
obscure it.

&


Agile UX & Prototyping

100


Design Overview
๏

Transition & Gesture

๏

Layout & Chrome

๏

Navigation & Controls

๏

Type & Icons

๏

Media & User Interface
101



102


Best Practices
๏

React immediately, without pause

๏

Transition changes in the interface

๏

Gestures should be obvious and natural

103


React Immediately

104

“

The real art of conducting consists in
transitions.
— Gustav Mahler


Transition Changes

111


contentsmagazine.com
112


Obvious Gestures

113


disney.com
114


disney.com
115


Touch Gesture Reference Guide
Tap

Press

Pinch
OR

Multi-finger
drag
OR

Multi-finger
tap

OR

Squeeze

Press
and tap
Two-finger
drag
1

Double tap

Drag

Press
and
drag

Spread

2

Lasso
and
cross

Press
and tap,
then drag
1

Splay

Flick

OR

1

2

2

Rotate

OR

OR

Supporting materials for this guide can be found online at: http://www.lukew.com/touch/

116


Layout & Chrome
header

nav

article

aside

footer

117


Layout & Chrome
Best Practices
๏

Collapse Into Fewer And Fewer Columns

๏

Keep Section Short

๏

Think Fluid

๏

Respond to Portrait and Landscape

๏

Use CSS for styles
118


Choosing Breakpoints
๏

Common Screen Widths: 1024px, 760px, 600px, 480px, and 320px

๏

Relative Widths: Ems or %

๏

Natural Breakpoints: Eyeball it and choose the points that work best
for the interface you design

119


Collapse Columns

123


unitedpixelworkers.com
124


125


126


127


Collapse Columns
๏

Eliminates horizontal scroll

๏

Allows better use of available space

128


Keep Sections Short

129


Shorter
Section
s
^
Keep Sections Short

129


etchapps.com
130


etchapps.com/
131


etchapps.com/
132


Shorter
Section
s
^
Keep Sections Short
๏

Easier to scan.

๏

Easier to collapse.

133


Think Fluid

134


gov.uk
135


gov.uk
136


gov.uk
137


Think Fluid
๏

Allows for fluid designs that scale to meet exact widths without getting
too wide or too narrow.

๏


138


Respond to Orientation

139


activetheory.net
140


activetheory.net
141


richbrown.info
142


richbrown.info
143


Respond to Orientation
๏

Portrait and landscape are different contexts

๏

Allows for fluid designs that scale to meet exact widths without getting
too wide or too narrow.

๏


144


Use CSS for styles

145


seia.org/
146


seia.org/
147


seia.org/
148


Use CSS for styles
๏

Designs that do not rely on images for style are easier to scale.

๏

Gradients and borders and shadows, oh my!

149

CTA

Header
Nav
Promotions
Blog

Prog1

Prog2

Prog3

Social

Newsletter

News

Footer

CTA

Nav

Header

Social

Promotions

Prog1

Prog2

Prog3

News
Blog

Newsletter
Footer

Header Nav
CTA

Promotions
Social

Prog1

Prog2

Prog3
News
Blog
Newsletter
Footer



+

154



+

Option 1
Option 2
Option 3

154


Patterns
๏

“Do Nothing”

๏

Footer anchor

๏

Drop-down Menu

๏

Top slide menu

๏

Side slide menu
155


NAVIGATION PATTERN

Top Nav aka. “Do Nothing”

156


yokedesign.com.au
157


yokedesign.com.au
158


yokedesign.com.au
159


NAVIGATION PATTERN

Top Nav aka. “Do Nothing”
๏

PRO: Simple

๏

PRO: No JavaScript

๏

CON: Hard Scale

๏

CON: Hard To use

160


NAVIGATION PATTERN

Footer Anchor

161


162


163


164


NAVIGATION PATTERN

Footer Anchor
๏

PRO: Simple

๏

PRO: No JavaScript

๏

CON: Awkward jump can be disorientating to the user

๏

CON: Difficult to scale

165


NAVIGATION PATTERN

Drop-down Menu

166


thenextweb.com
167


thenextweb.com
168


NAVIGATION PATTERN

Drop-down Menu
๏

PRO: Frees Space

๏

PRO: Scalable

๏

PRO: Can be fixed at top or bottom

๏

CON: Requires JavaScript

169


NAVIGATION PATTERN

Top-slide Menu

170


starbucks.com
171


starbucks.com

starbucks.com
172


NAVIGATION PATTERN

Top-slide Menu
๏

PRO: Frees Space

๏

PRO: Some what Scalable

๏


173


NAVIGATION PATTERN

Side-slide Menu

174


NAVIGATION PATTERN

Side-slide Menu
๏

PRO: Frees Space

๏

PRO: Very Scalble Scalable

๏


178


Type & Icon

179


Type & Icon
Best Practices
๏

Use Webfonts

๏

Don’t Just Shrink to Fit

๏

Use webfonts for Icons

180


Use Webfonts

181

Verdana
Georgia
Trebuchet MS

Arial

Times New Roman


Browser Support of Webfonts

EOT

✔4
✔ 3.5

TTF/OTF

✔ 10

✔ 3.1

SVG
WOFF

✔ 3.1

✔9

✔ 3.6

✔3

✔ 10

✔6

✔6

✔ 11
183


Mobile Support of Webfonts

EOT
TTF/OTF

✔ 4.2

SVG

✔ 3.1

WOFF

✔ 5.0

✔ 2.2

✔6

✔ 10
184


Webfonts Make Designs More
Responsive
๏

Fonts can be optimized for devices.

๏

Reduce or eliminate the need for text in images.

๏

Can replace icons.

185


Don’t Just Shrink To Fit

186

“

A pixel is not a pixel is not a
pixel. In other words, there are
no absolute sizes when it comes
to measuring web type.
Everything is relative.
— Tim Brown, Nice Web Type


Which line can you read better?

This is type set at 10px. Got a microscope?

This is type set at 12px. Tiny isn't it?

This is type set at 14px. Getting better.

This is type set at 16px. Much better!

188


markboultondesign.com
189


190


191


Webfonts for Icons

192


Working Example
Article on Web Standards Sherpa
193



197


Best Practices
๏

Reduce media dimensions

๏

Consider bandwidth

๏

Rethink Tables

198


Reduce Media Dimensions
No Silver Bullet… yet.

๏

Resize

๏

Crop

๏

Client Side JavaScript

๏

Server Side Detection

199


Consider Bandwidth

200


Rethink Tables
๏

Selective Display »

๏

The Slip Scrol »l

๏

Table to Graph »

๏

Responsive Table »

201

Activity:
Storyboard the
User Experience

Better Code,
Better Experiences

Even when
we think
we know,
we’re probably
wrong

:-)

Responsive
Web Design

Mobile
First

User Experience
BASIC

ADVANCED

Browser Capabilities

User Experience

Accessibility
Interactivity
Design

BASIC

Semantics


Content

ADVANCED

User Experience

ARIA
JavaScript
CSS

BASIC

HTML


Text & HTTP

ADVANCED

HTML5

HTML
Microformats
HTML4

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

Browsers ignore
what they don’t
understand

User Experience
BASIC

ADVANCED


Content

Content
is why
we build
websites

User Experience
BASIC

Semantics


Content

ADVANCED


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>

User Experience

Design
BASIC

Semantics


Content

ADVANCED

User Experience

Interactivity
Design

BASIC

Semantics


Content

ADVANCED

But it’s not
only about
no JavaScript

๏Bugs
๏Browser Add-ons
๏Overzealous Firewalls
๏Underpowered devices
๏Page is still loading

“special needs”
can be
CONTEXTUAL


The Not So Easy Stuff
๏

Page weight

๏

Interaction methods

๏

Network latency & performance

๏

Hardware performance

๏

Screen resolution

๏

Sensor availability

254

How has your
perception of RWD
changed?

What do you
(or your org)
need to work on?

Yesterday we found
content types and
patterns.

Now let’s get
down to details.

We call this
content modeling.


A content model is…
๏

A structural model that matches how your content inherently works.

๏

A visualization of relationships between content types in a system.

๏

What will give your content the flexibility needed for RWD.

8

Developers
have been
modeling
data for
decades.
From Web Database Applications with PHP & MySQL by
Hugh E. Williams and David Lane (O’Reilly, 2003)

What’s different
about content
modeling?


Meaning,
then modeling
www.ﬂickr.com/photos/mujitra/4868415523

We start by
breaking a content
type down into its
constituent parts.

Then we define
what those
content chunks
need to include.


Content Requirements
๏

Defines which attributes and metadata a content type needs.

๏

Sets formats, character limits, and optional fields.

๏

Defines what you’ll have to work with—and design for.

16

Then we think
about how it fits
into a content
system.

Every content
chunk is an
opportunity.

Display
Condense
Remove
Reprioritize

If a program is on
the homepage, then
display its summary,
but not details.

When a small screen
loads a country page,
show the overview
but collapse its
programs.


Considerations for Modeling
How will this content:
๏

Be made available in multiple places?

๏

Expand or contract for bigger or larger screens?

๏

Keep visual priority in a single column? In multiple columns?

๏

Be related to other content?

23


You need
balance
www.ﬂickr.com/photos/katsrcool/7273165554/

The more complex the
model, the more useful.
But also the more difficult
to implement and train
others to use.

Activity:
Structuring a
content page

Friends don’t let
friends prototype
with Photoshop
:-)

The Old Ways of Weaving the Web

ARE NOT WORKING

We Prototype to Answer the
Question

”What If…?”

“

[Prototypes] don’t focus on the
solution, but on understanding
the problem. They ask the
question, “What happens when
we try this?” Maybe we learn it’s
the right idea, but more likely
we learn something about the
problem we didn’t know
before.
—Jared Spool


Why do we Prototype?
๏

We need to plan & explore our ideas and concepts.

๏

We need to explain & clarify our ideas and concepts.

๏

We need to test & validate our ideas and concepts.

41

The user experience designer's job does
not stop after the page loads…

…It's really only just

begun.

Story Time
On Exactitude in
Science

On Exactitude in
Web Design
A Cautionary Tale


The Fidelity Cliff
๏

Desire for pixel perfection in paper deliverables

๏

Belief that all questions can be answered before development begins.

๏

Waterfall Methodology.

๏

Prototyping in a medium other than the Web.

50


Waterfall

51


Agile UX & Prototyping

52

Interactive
Prototyping:
Options?

What We Need…

A TOOL AS EASY TO USE AS
PHOTOSHOP THAT ALLOWS DESIGNERS
TO CREATE INTERACTIVE PROTOTYPES
THAT CAN BE QUICKLY TURNED INTO
WORKING PRODUCTS.

We are not there…
…but we are getting closer.


What Makes a Good Tool?
๏


๏

Structural Fidelity

๏

Visual Fidelity

๏

Interactive Fidelity

๏

Core Web Technologies
60


What Makes a Good Tool?
๏


๏

Structural Fidelity

๏

Visual Fidelity

๏

Interactive Fidelity

๏

Core Web Technologies
61


Tool Comparison
Fidelity
Visual

Interactive Reusable

Pricing

Format

URL

Adobe Edge







Free

Desktop

adobe.com/edge

Axure







$$

Desktop

axure.com

Easle







$$$

Web

easel.io

InVision







$$$

Web

invisionapp.com

JetStrap







$$$

Web

jetstrap.com

Protoshare







$$

Web

protoshare.com

Proty







Free

Plug-in

protytype.com

Solidify







$$

Web

solidifyapp.com

Ux Pin







$

Web

uxpin.com

Webflow







$$

Web

webflow.com



= None |



= Partial/Limited |



= Yes

$ = Single License | $$ = Multiple License | $$$ = Enterprise License
62

Interactive Prototyping will be

THE UX SKILL OF THE FUTURE.

Responsive deliverables should look a lot
like fully-functioning Twitter Bootstrapstyle systems custom tailored for your
clients’ needs. These living code samples
are self-documenting style guides that
extend to accommodate a client’s needs
as well as the needs of the ever-evolving
multi-device web.
— Dave Rupert,
Responsive Deliverables


Classification


Identification


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>


Progressive Disclosure


Progressive Disclosure
<details>
<summary>Consumption Measurement</summary>
<ul>
<li><a href=”#”>Direct Purchase</a></li>
<li><a href=”#”>Distribution</a></li>
</ul>
</details>


New Field Types

<input type="email" …/>

<input type="url" …/>


New Field Types
<input type="date" name="dob"/>


New Field Types
<input type="number" name="foo"/>

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


New Field Types
<input type="search" name="query"/>


New Attributes
<input type="text"
autocomplete=””
autofocus=””
form=”contact-form”
required=””
.../>


Form Validation & Hints
<input type="text"
pattern="d{6}w{3}"
placeholder="6 digits followed by 3 letters"
.../>

Predictive Typing
<input type="text" list="countries" name="country"/>
<datalist id="countries">
<option>Afghanistan</option>
<option>Åland Islands</option>

</datalist>


Predictive Typing


Responsive Images
๏

Resize for optimization

๏

Cropping

๏

Alternate views

๏

Alternate resolutions

๏

Alternate colors

96


Responsive Images

Responsive Images
<picture>
<source media="(max-width: 479px)"
src="test_landscape_1@1x.jpg">
<source media="(min-width: 480px) and (max-width: 639px)"
<source media="(min-width: 640px)"
<source media="monochrome"
src="test_landscape_1@monochrome.jpg">
<source media="print" src="test_landscape_1@monochrome.jpg">

<img src="test_landscape_1@2x.jpg">

<p>Nymphenburg Castle in Munich during sunset</p>
</picture>

Responsive Images
<picture>
<source media="(min-width: 40em)"
srcset=”big.jpg 1x, big-hd.jpg 2x”>
<source srcset="small.jpg 1x, small-hd.jpg 2x">

<img src="test_landscape_1@2x.jpg">

<p>Nymphenburg Castle in Munich during sunset</p>
</picture>


Parsing Errors

p{
color: red;
}


Parsing Errors

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


Parsing Errors
p {
color: #44494D;
color: rgba( 0, 0, 0, .5 );
}

This is a test
This is a test


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


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


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) {
/* REALLY? */
}

Mobile First w/ Media Queries
<link rel="stylesheet" href="/c/basic.css">
<link rel="stylesheet" href="/c/advanced.css"
media="only screen and (min-width:20em)">

<link rel="stylesheet" href="/c/print.css" media="print">


.hentry .entry-meta li {
display: inline-block;
vertical-align: middle;
margin-right: .5em;
}
.primary .hfeed .hentry .add {
position: absolute;
top: 2px;
left: 2px;
width: 22px;
}
.primary .hfeed .hentry .add a {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
display: block;
width: 0;
}

basic.css

advanced.css


// Break-1
@import "break_1";
// Break 2
@media ( min-width: px-to-ems($break-2) ) {
@import "break_2";
}
// Break 3
@import "break_3";
}
// Break 4
@import "break_4";
}
advanced.css using SASS


// Break 1
@import "break_1";
// Break-2
@import "break_2";
// Break 3
@import "break_3";
// Break 4
@import "break_4";
// Break 5
@import "large";
ie8.css using SASS

http://is.gd/lazyloading_demo


Anchor-Include Pattern
Replace:
<a data-replace="/item/123/reviews?fragment=true"
href="/item/123/reviews">8 Reviews</a>

After:
<a data-after="/item/123/related?fragment=true"
href="/item/123/related">Similar T-shirts</a>


Lazy Loading
<a href="/article/12345/#comments"
data-tooltip="/api/get-comments-tooltip?id=12345">5
Comments</a>


Improved Lazy Loading
Comments</a>


Improved Lazy Loading
Comments</a>

+
Comments</a>

=
$.get(‘/api/get-comments-tooltip?id=12345,45678’, function(data){
// split tooltips apart & set them up for display
});


Remember stuff like this?
<a href="foo.html"
style="color:blue;"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'">Foo</a>


Remember stuff 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;
}


Isn’t this the same?
for( i=0; i<objects.length; i++){
objects[i].style.display = 'none';
}


Small Improvement
objects[i].style.position = 'absolute';
objects[i].style.left
= '-999em';
}


Separation
objects[i].addClassName( 'hidden' );
}

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

Apply No Style
Before Its Time


How do we do that?
.TabInterface-tablist {
/* … */
}

#MyUniqueObject .component {
/* … */
}

133


How do we do that?
Tactic

add “-on” to the class

Default

.tabbed

add an activation class

change the form of the
class

Activated

.tabbed-on

.TabInterface-enabled

.replace-me

.replaced


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;” >
<span>Your new online source for information
on our progress</span>
</li>
<span>VillageReach Announces Mozambique
National Expansion</span>
</li>
<span>VillageReach's innovative approach
for last mile communities</span>
</li>
…
</ul>


Alt Text & Titles
<img src=”/i/logo.png” alt=”User Interface 17”/>


Alt Text & Titles
<img src=”/i/frisbee.png”
alt=”Man throws frisbee to golden retriever”/>


Alt Text & Titles
alt=”Man throws frisbee to golden retriever”/>

alt=””/>


Alt Text & Titles
<input type="text" required="" title="First name is required"/>


Alt Text & Titles
<input type="email" required="" title="Your email is invalid"/>


Alt Text & Titles
<form class="login" action="" method="post"
data-error-empty="This field is required"
data-error-invalid="Your response does not appear valid">
<ol>
<li>
<label for="email">Email</label>
<input id="email" name="email" type="email" required=""
data-error-invalid=”Your email is not valid”/>
</li>
<li>
<label for="password">Password</label>
<input id="password" type="password" name="password"
required=""/>
</li>
<li><button type="submit">Login</button></li>
</ol>
</form>


Alt Text & Titles
$('input,select,textarea')
// handle invalidity
.bind('invalid', function(){
var $this = $(this),
msg = '';
if ( this.validity.valueMissing ) {
msg = $this.data('error-empty') ||
$this.closest('form').data('error-empty');
} else if ( ! this.validity.valid ) {
msg = $this.data('error-invalid') ||
$this.closest('form').data('error-invalid');
}
this.setCustomValidity( msg );
})
// reset
.bind('change', function(){
this.setCustomValidity('');
});


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>


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>


Typical Hiding Schemes
Accessibility
Effect

CSS Rules

Display Effect

visibility: hidden;

Element is hidden from
view, but is not removed
from the normal flow (i.e. it
still takes up the space it
normally would)

Content is ignored by screen
readers

display: none;

Element is removed from
the normal flow and hidden;
the space it occupied is
collapsed

readers

height: 0;
width: 0;
overflow: hidden;

Element is collapsed and
contents are hidden

readers


Accessibility
Effect

CSS Rules

Display Effect

text-indent: -999em;

Contents are shifted offscreen and hidden from
view, but links may “focus”
oddly and negative indent
may not prove long enough
to fully hide content

Screen readers have access
to the content, but the
content is limited to text and
inline elements

position: absolute;
left: -999em;

Content is removed from
the normal flow and shifted
off the left-hand edge; the
space it occupied is
collapsed

to the content


CSS Rules

Display Effect

position: absolute;
/* IE6, IE7 */
clip: rect(
1px 1px 1px 1px
);
/* W3C */
clip: rect(
1px, 1px, 1px, 1px
);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;

Content is positioned
absolutely (and is removed
from the normal flow), but
remains in place and is
clipped to become invisible

Accessibility
Effect
to the content


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


Complex Interfaces


There is no image…
<p class="entry-image"
data-image-src="/alztheme/images/news/sample.jpg"></p>


Until there is
<p class="entry-image"
data-image-src="/alztheme/images/news/sample.jpg"
data-has-image="true">
<img alt="" src="/alztheme/images/news/sample.jpg" alt=””>
</p>


Adaptive Widget Logic
Lazy load the
images

Page

Yes

No

Yes

JS?

No


Lazy load the
images

Page
LIVE
Yes

No

Yes

JS?

No

Hide the
images (if
loaded)


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>


Create
the link &
make image
clickable

Yes

Page

No

Yes

JS?

No


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>

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

Split
the content &
make some
tabs

Yes

JS?

No

On DOM Ready
<div class="tabbed-interface TabInterface-enabled">
<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>

Cleaner Approach
<div class="tabbed-interface" data-tab-threshold="800">
<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>


Split
the content &
make some
tabs

Page

LIVE
Yes

No

Yes

JS?

No

Untab (if
tabbed)


Adding ARIA

role="tablist"

208


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!

Responsive Design Studio [Mountain View 2013]

More Related Content

What's hot (20)

Similar to Responsive Design Studio [Mountain View 2013] (20)

More from Aaron Gustafson (20)

Recently uploaded (20)

Responsive Design Studio [Mountain View 2013]