Responsive Design & Beyond [Code & Creativity Workshop]

AUTHOR “RESPONSIVE PATTERNS”

BUT ENOUGH ABOUT ME
!
!
LET’S TALK ABOUT YOU

WHAT WE’LL COVER
๏ TheWeb Landscape
๏ MobileWeb Strategy
๏ Foundations of Responsive Design
๏ The Principles ofAdaptive Design
๏ Atomic Design & Pattern Lab
๏ Process andWorkflow
๏ Aaron Gustafson’s Progressive Enhancement
Extravaganza!

http://www.itu.int/net/pressoffice/press_releases/2012/70.aspx#.UQXLOkrHen0
6,000,000,000
WORLDWIDE MOBILE SUBSCRIPTIONS

More people have access to
mobile than to running water
and toothbrushes.
http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets

http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx
91%
AMERICANS OWN A MOBILE PHONE

44.0%
56.0%
SMARTPHONE
NONSMART
http://blog.nielsen.com/nielsenwire/?p=31688
PERCENTAGE OF AMERICANS WITH SMARTPHONES

34.0%
66.0%
SMARTPHONE
NONSMART
http://blog.nielsen.com/nielsenwire/?p=30950
PERCENTAGE OF 24-34 YR OLDS W/ SMARTPHONES

http://adultlescence.files.wordpress.com/2011/07/img_1352.jpg
MORE IPHONES ARE SOLD
THAN BABIES BORN
EVERY DAY.
http://thenextweb.com/apple/2012/01/25/there-are-now-more-iphones-sold-than-babies-born-in-the-world-every-day/

http://news.yahoo.com/daily-android-activations-grow-1-5-million-google-041552461.html
1,500,000
DAILY ANDROID ACTIVATIONS

http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx
34%
AMERICANS THAT OWN A TABLET OR E-READER
(UP FROM 3% IN 2010)

http://www.displaysearch.com/cps/rde/xchg/displaysearch/hs.xsl/
130107_tablet_pc_market_forecast_to_surpass_notebooks_in_2013.asp
TABLETS SLATED TO OUTSELL PCS IN 2013
2011
2012
2013
2014
2015
2016
2017
0 25 50 75 100
TABLETS PCS

2 MONTHS OF DEVICE DIVERSITY
๏ Apple iPhone 5
๏ Nokia Lumia 920
๏ HTC Windows Phone 8X
๏ HTC Windows Phone 8S
๏ Motorola Droid RAZR HD
๏ Motorola Droid RAZR M
๏ TBD: LG Nexus 4
http://www.lukew.com/ff/entry.asp?1646
4"-5" SMARTPHONES
๏ Samsung Galaxy Note II
5"-6" PHONE/TABLET
๏ iPad Mini
๏ Kindle Fire HD
๏ Kindle Fire
7"-8" TABLETS
๏ iPad Gen 4
๏ Microsoft Surface Tablet
๏ Kindle Fire HD
๏ Lenovo ThinkPad Tablet 2
๏ Acer Iconia Tab W510
๏ Dell Latitude 10
๏ Dell XPS 10Asus Vivo Tab RT TBD:
Nexus 10
9"-10" TABLETS
๏ 13" MacBook Pro with Retina
๏ Lenovo IdeaPad Yoga 13
๏ Lenovo ThinkPad Twist
๏ Toshiba Satellite U925T
๏ Dell XPS 12
๏ Lenovo IdeaTab Lynx
๏ Samsung ATIV Smart PC 500T/
700T
๏ Acer Iconia W700
๏ Sony Vaio Duo 11
๏ Samsung Chromebook
11"-17" LAPTOPS/TABLETS
๏ Sony Tap 20
๏ 21.5-inch iMac
๏ 27-inch iMac
20"-30" DESKTOPS

DEVICE FATIGUE
http://bradfrostweb.com/blog/post/device-fatigue/

80%
20%
MOBILE
DESKTOP
http://allthingsd.com/20120525/mobile-devices-now-make-up-about-20-percent-of-u-s-web-traffic/
MOBILE NOW MAKES UP 20% OF ALL WEB TRAFFIC

http://www.pewinternet.org/2014/02/27/summary-of-findings-3/
68%
AMERICANS WHO ACCESS THE WEB
FROM A MOBILE DEVICE

http://www.pewinternet.org/2014/02/27/summary-of-findings-3/
33%
MOBILE WEB CAPABLE AMERICANS THAT ACCESS
THE WEB SOLELY THROUGH A MOBILE PHONE

http://www.flickr.com/photos/webdagene/6149954378/

If your stuff, if your content, if your
information, if your products, if your
services are not available on mobile,
they don’t exist for these people.
-Karen McGrane
http://karenmcgrane.com/2013/01/09/uncle-sam-wants-you-to-optimize-your-content-for-mobile/

http://www.theverge.com/2013/1/30/3934052/mark-zuckerberg-q4-earnings-myth-that-facebook-cant-make-money-on-mobile
680,000,000
PEOPLE ACCESSING FACEBOOK FROM A MOBILE DEVICE

http://www.theverge.com/2013/1/30/3934052/mark-zuckerberg-q4-earnings-myth-that-facebook-cant-make-money-on-mobile
157,000,000
PEOPLE USING FACEBOOK ONLY FROM A MOBILE DEVICE

We see more people accessing
Facebook on the mobile web than
from our top native apps combined.
-Facebook
https://developers.facebook.com/blog/post/2012/02/27/helping-improve-the-mobile-web/

http://marketingland.com/twitter-60-percent-of-users-access-via-mobile-13626
60%
USERS ACCESSING TWITTER FROM MOBILE DEVICES

WHAT GETS SHARED
ON SOCIAL NETWORKS?

TEXT, PHOTOS, VIDEOS AND
LINKS

http://mashable.com/2014/02/24/facebook-mobile-traffic/
51%
REFERRAL TRAFFIC TO MEDIA SITES
CAME FROM FACEBOOK MOBILE

RESOURCE
http://blog.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/

We’re cultivating a nation of slide-swiping
screen surfing zombies.
-Stupid Ken
http://cghub.com/images/view/217313/

APP GLUT
http://www.flickr.com/photos/29022619@N03/7980265115/

RESOURCEhttp://blog.cloudfour.com/links-do-not-open-apps/

FOCUSED CREATION, UBIQUITOUS DISTRIBUTION
http://bradfrostweb.com/blog/post/native-vs-web-is-total-bullshit/

If your content is accessible
from a URL, it will be accessed
by mobile devices.

DEVICE EXPERIENCE ADVANTAGES
๏ Create a more dedicated,optimized,catered experience

๏ Don’t have to worry about adapting interface conventions to
larger screens

๏ Don’t have to worry about adapting interface conventions to
larger screens
๏ Potential to keep experience more performant

DEVICE EXPERIENCE PITFALLS
๏ URL redirection issues

DEVICE EXPERIENCE PITFALLS
๏ URL redirection issues
๏ Content parity issues
๏ Content governance issues
๏ Need to maintain a device database
๏ The Space Between
๏ SEO Issues
๏ Continuity Issues

Any attempt to draw a line around a
particular device class has as much
permanence as a literal line in the sand.
-Jason Grigsby
http://blog.cloudfour.com/responsive-design-for-apps-part-1/

http://www.guypo.com/mobile/rwd-ratio-in-top-100000-websites-refined/
11-12%
PERCENTAGE OF TOP 100,000 WEBSITES
THAT ARE RESPONSIVE

PLANT THE SEED TO A
RESPONSIVE FUTURE

SEPARATE SITES AREN’T SCALABLE
MOBILE
E-READER TABLET DESKTOP TV

CURRENT DESKTOP SITE
(AWKWARD TREE IS AWKWARD)
MOBILE SITE
(IMMATURE, BUT SEED IS PLANTED)
http://bradfrostweb.com/blog/mobile/planting-the-seed-for-a-responsive-future/

OLD DESKTOP SITE
(OBSOLETE TREE IS OBSOLETE)
MOBILE SITE
(MOBILE-FIRST, ADAPTIVE, AND FUTURE-FRIENDLY)
http://bradfrostweb.com/blog/mobile/planting-the-seed-for-a-responsive-future/

For existing sites (particularly ones that
are also businesses) teams don’t always
have the luxury of tossing everything
aside and building anew.
-Dan Cederholm
http://simplebits.com/notebook/2011/08/19/adapted/

MOBILE-FIRST
RESPONSIVE DESIGN

MOBILE-LAST (DEGRADED, SHOE-HORNED, SHORT-SIGHTED, CRAPPY)
MOBILE-FIRST (PROGRESSIVELY-ENHANCED, FUTURE-FRIENDLY, AWESOME)

FOUNDATIONS OF
RESPONSIVE DESIGN

RESOURCE
http://alistapart.com/article/responsive-web-design

RESOURCE
http://www.abookapart.com/products/responsive-web-design

RESPONSIVE WEB DESIGN: THE MOVIE
WINTER 2014

FLEXIBLE MEDIAFLUID GRIDS MEDIA QUERIES

FLUID GRIDS
๏ Uses percentages and relative units instead of fixed pixel
widths
๏ Think in terms of proportions instead of pixel-perfection
๏ Does most of the heavy lifting of a responsive design

OUR FIXED-WIDTH PAST
code block.container {!
margin: 0 auto;!
width: 960px;!
}!
!
.main {!
float: left;!
width: 620px;!
margin-right: 20px;!
}!
!
.sidebar {!
float: left;!
width: 320px;!
}

MAKING THINGS FLEXY
code block.container {!
margin: 0 auto;!
max-width: 60em;!
}!
!
.main {!
float: left;!
width: 64.58333333%;!
margin-right: 2.083333333%;!
}!
!
.sidebar {!
float: left;!
width: 33.333333333%;!
}

620 ÷ 960 = 0.6458333333
TARGET CONTEXT RESULT
RESOURCE
http://alistapart.com/article/fluidgrids

FLEXIBLE MEDIA
๏ Images need to scale within their containers
๏ Other media need to flex as well: video, objects,
slideshows, 3rd part widgets, etc

FLUID IMAGES
code block
img {!
max-width: 100%;!
height: auto;!
}

MEDIA QUERIES
code block!
!
!
@media all and (min-width: 50em) {!
!
/* Styles apply only to screens with a
width greater than 50em (800px) */!
!
}

CSS3 MEDIA QUERIES
๏ Responsive design’s secret sauce
๏ Applies specific styles only when certain conditions are
present
๏ Variables include: width, device-width, height, device-
height, pixel-density, orientation and more

RESPONSIVE WEB DESIGN
RESIZEHERE!
IMPRESSYOURFRIENDS!

THIS IS JUST THE TIP OF THE ICEBERG.

UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY

MOBILE WEB BEST PRACTICES
http://www.flickr.com/photos/anna_debenham/8190771122/

Diversity is not a bug, it’s an opportunity.
-Stephanie Rieger
http://stephanierieger.com/diversity-is-not-a-bug/

“BUT MOBILE USERS WON’T DO THAT.”

PEOPLE ARE DOING
MORE ON MOBILE...
LIKE BUYING DIAMONDS.

Mobile users will do anything and
everything desktop users will do,
provided it’s presented in a usable way.
https://twitter.com/brad_frost/status/176697511761805312

ONE WEB.
THEMATIC CONSISTENCY.

ONE WEB.
THEMATIC CONSISTENCY.
GIVE PEOPLE WHAT THEY WANT.

BUT WHAT ABOUT
MOBILE CONTEXT?

WHAT EXACTLY IS “MOBILE CONTEXT”?

QUANTITATIVE
๏ Screen size
๏ Connectivity
๏ Device capabilities
๏ Processing power
๏ Input methods
QUALITATIVE
๏ User goals
๏ User environment
๏ Uses attention
๏ User capabilities

“ON THE GO” IS STILL TRUE...

BUT LOTS OF OTHER
USE CASES EXIST TOO

http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
76%
ACCESS MOBILE WHILE WAITING IN LINE

86%
ACCESS MOBILE DEVICES WHILE WATCHING TV

80%
ACCESS MOBILE DURING GENERAL DOWNTIME

69%
ACCESS MOBILE IN RETAIL STORES

75%
WHILE ON THE TOILET

Just make quality, relevant content with
appropriate tasks, and offer all of these to
all users...then make it easy for the user
to decide what it is they want to do.
-Stephen Hay
http://www.the-haystack.com/2012/07/09/great-works-of-fiction-presents-the-mobile-context/

320PX.
480PX.
768PX.
1024PX.
THE FOLD.

320PX.
480PX.
768PX.
1024PX.
THE FOLD.
OH GOD THE FOLD.

scha·den·freu·de ˈshä-dən-ˌfrȯi-də n.
enjoyment obtained from the troubles of others

The control which designers know in the print medium,
and often desire in the web medium, is simply a
function of the limitation of the printed page. We
should embrace the fact that the web doesn’t have the
same constraints, and design for this flexibility. But
first, we must “accept the ebb and flow of things”.
-John Allsopp
http://alistapart.com/article/dao

RESOURCE
http://bradfrostweb.com/demo/ish/

http://www.compuware.com/d/release/592528/new-study-reveals-the-mobile-web-disappoints-global-consumers
71%
MOBILE USERS EXPECTING MOBILE SITES TO LOAD
AS FAST IF NOT FASTER THAN DESKTOP SITES

http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
74%
MOBILE VISITORS WHO WILL ABANDON A SITE
IF IT TAKES LONGER THAN 5 SECONDS TO LOAD

YOU HAVE 5 SECONDS OF SOMEONE’S TIME.

http://httparchive.org/
1.68MB
AVERAGE PAGE SIZE

http://www.stevesouders.com/blog/2013/05/09/how-fast-are-we-going-now/
28%
GROWTH IN PAGE WEIGHT YEAR OVER YEAR

http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
72%
RESPONSIVE WEBSITES WHOSE SMALL SCREEN VIEW
WEIGHS AS MUCH AS THE LARGE SCREEN VIEW

REQUESTS: 136
PAGE WEIGHT: 5.9MB
LOAD TIME: 2M 46S

https://twitter.com/brad_frost/status/326423168342450178/photo/1

https://twitter.com/brad_frost/status/326423168342450178/photo/1
REQUESTS: 464
PAGE WEIGHT: 85.9MB
LOAD TIME: 2M 10S

If your website is 15MB it’s not HTML5,
it’s stupid.
-Christian Heilmann
HTTPS://HACKS.MOZILLA.ORG/2012/10/BROKEN-PROMISES-OF-HTML5-AND-WHATS-NEXT-A-PRESENTATION-AT-HTML5DEVCONF/

http://bradfrostweb.com/blog/post/performance-as-design/

RESOURCE
http://timkadlec.com/2013/01/setting-a-performance-budget/

MAX PAGE WEIGHT: 400K
MAX LOAD TIME ON 3G: 4S

RESOURCE
http://www.webpagetest.org/

RESOURCE
http://mobitest.akamai.com

RESPONSIVE DESIGN != ONE SIZE FITS ALL

Progressive enhancement isn’t
about designing for the lowest
common denominator. It’s just
about starting there.
-Jeremy Keith
http://bradfrostweb.com/blog/post/the-spirit-of-the-web-jeremy-keith-at-smashing-conference/

RESOURCE
http://modernizr.com/download/

ACKNOWLEDGE AND EMBRACE
UNPREDICTABILITY

THERE’S NO SUCH THING
AS FUTURE-PROOF

BUT WE CAN BE FUTURE-FRIENDLY
http://futurefriend.ly/

PEOPLE’S CAPACITY FOR BULLSHIT
IS RAPIDLY DIMINISHING.

This is a quote. This is where you
put the quote text.
-Quote AuthorCONTENT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHITBULLSHIT

INVEST IN YOUR CONTENT.
MAKE APIs
NOT WAR

RESOURCE
http://precious-forever.com/2011/05/26/patterns-for-multiscreen-strategies/

WE DON’T KNOW WHAT WILL
BE UNDERNEATH CHRISTMAS
TREES 2 YEARS FROM NOW...

BUT THAT’S WHAT WE NEED
TO DESIGN FOR TODAY.
WEB WEB WEB
WEB

PAGES
GRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH?
http://www.flickr.com/photos/pandora_6666/4927865092/

http://bradfrost.github.com/this-is-responsive/patterns.html

We’re not designing pages,
we’re designing systems of components.
-Stephen Hay
http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/

http://foundation.zurb.com/

THESE THINGS ARE GREAT, BUT...

FRAMEWORK POTENTIAL PITFALLS
๏ One-size-fits-all

๏ Lookalike issues

๏ Potential for bloat/unneeded stuff

๏ Might not do everything you need

๏ Compatibility with existing sites

๏ Compatibility with existing sites
๏ Subscribe to someone else’s structure, naming, style

Tiny Bootstraps, for every client.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/

Responsive deliverables should look
a lot like fully-functioning Twitter
Bootstrap-style systems custom
tailored for your clients’ needs.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/

fivesimplesteps.com/products/front-end-style-guides

BENEFITS OF FRONT-END STYLE GUIDES
๏ Easier to test
๏ Better workflow
๏ Creates a shared vocabulary
๏ Useful reference
http://24ways.org/2011/front-end-style-guides/

http://gim.ie/fZyK

http://pea.rs/

http://brettjankord.com/projects/style-guide-boilerplate/

http://patternprimer.adactio.com/

http://malarkey.github.io/Rock-Hammer/

http://barebones.paulrobertlloyd.com

http://style.codeforamerica.org/

http://ux.mailchimp.com/patterns/

http://yelp.com/styleguide

http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/

MO’ PATTERNS, MO’ PROBLEMS
๏ Time consuming to create

๏ Treated as a auxiliary project

๏ Often too abstract

๏ Seen only as a designer/developer tool

๏ Often created after a project launches

๏ Often incomplete/only serving present cases

๏ Often incomplete/only serving present cases
๏ Lacking a clear methodology

H2 + O2 → H20
C + O2 → CO2
CH4 + O2 → CO2 + H2O
C8H18 + O2 → CO2 + H20
C2H6 + O2 → CO2 + H2O

http://joshduck.com/periodic-table.html

ENTER KEYWORD
SEARCH THE SITE
SEARCH

You can create good experiences without
knowing the content. What you can’t do is
create good experiences without knowing
your content structure. What is your content
made from, not what your content is.
-Mark Boulton
http://www.markboulton.co.uk/journal/structure-first-content-always

ABSTRACT CONCRETE
CREATORS CLIENTS

ATOMIC DESIGN
๏ Provides a methodology for crafting an effective
design system

ATOMIC DESIGN
design system
๏ Easily traverse from abstract to concrete

ATOMIC DESIGN
design system
๏ Promotes consistency and cohesion

ATOMIC DESIGN
design system
๏ Promotes consistency and cohesion
๏ Assembles rather than deconstructs

The idea of designing components like this, out of
context and without layout, might sound strange—
particularly if you’ve been used to designing Web pages
the traditional way. But we’ve been abstracting design
ideas like this for the longest time, for example in our
use of mood boards and even the cropped designs we find
on sites like Dribbble.
-Andy Clarke
http://stuffandnonsense.co.uk/blog/about/an-extract-from-designing-atoms-and-elements

WHAT PATTERN LAB IS
๏ A design system builder

WHAT PATTERN LAB IS
๏ A comprehensive custom component library

WHAT PATTERN LAB IS
๏ A pattern starter kit

WHAT PATTERN LAB IS
๏ A practical viewport resizer

WHAT PATTERN LAB IS
๏ A practical viewport resizer
๏ An annotation tool

WHAT PATTERN LAB ISN’T
๏ A UI framework

๏ A UI framework
๏ Language, library, or style dependent

๏ A UI framework
๏ Incredibly rigid

๏ A UI framework
๏ Incredibly rigid
๏ “just” a pattern library, but also not a production-ready
static site generator

MOLECULE GUTS
code block!
<div class="block block-inset">
<div class="b-thumb">
{{> atoms-img-landscape-4x3 }}
</div>
<div class="b-text">
<h2 class=“headline">
{{ headline.short }}
</h2>
</div>
</div>
!

BASIC INCLUDE
code block!
!
!
!
!
!
!
!
{{> molecules-block-inset }}
!

ORGANISM GUTS
code block!
!
!
!
!
!
<header class="header" role="banner">
{{> atoms-header-ad }}
{{> atoms-logo }}
{{> molecules-primary-nav }}
{{> molecules-search }}
{{> molecules-social-nav }}
</header>

BASIC INCLUDE
code block!
!
!
!
!
{{> organisms-header }}

TEMPLATE GUTS
code block{{> organisms-header }}
<div role="main">
<div class="l-two-col">
<div class="l-main">
{{> organisms-article-body }}
{{> molecules-social-share }}
{{> organisms-comments }}
</div>
!
<div class="l-sidebar">
{{> organisms-related-posts }}
{{> organisms-recent-tweets }}
</div>
</div>
</div>
{{> organisms-footer }}
!

CONTENT STRUCTURE ACTUAL CONTENT

TEMPLATE GUTS
code block{{# hero }}
{{> molecules-block-hero }}
{{/ hero}}
!
<div class="g g-3up">
{{# touts}}
<div class="gi">
{{> molecules-inset-block }}
</div>
{{/ touts}}
</div>

PIPING IN REAL CONTENT WITH JSON
code block"hero" : [
{
"img": {
"landscape-16x9": {
"src": "images/sample/mountains.jpg",
"alt": "Mountains"
}
},
"headline" : {
"medium" : "Top 10 mountin ranges for hiking"
}
}
],
"touts" : [
{
"img": {
"landscape-4x3": {
"src": "../../images/sample/climber.jpg",
"alt": "Climber"
}
},
"headline" : {

code block{
"el": ".header",
"title": "Header",
"title": "The header or masthead is a global element…“
},
{
"el": ".nav",
"title": "Primary Navigation",
"title": "The navigation is collapsed on small screens
and is triggered via the .nav-trigger element"
},
{
"el": “.search-form",
"title": "Search Form",
"title": "The search form uses the input type=search to
pull up the appropriate input type on virtual keyboards"
},
{
"el": “.logo",
"title": "Logo",
"title": "The logo is an SVG graphic with a PNG fallback"
},
ANNOTATIONS WITH JSON

A BUNCH OF OTHER STUFF
๏ Code view

๏ Code view
๏ Auto-refresh

๏ Code view
๏ Auto-refresh
๏ Page follow

๏ Code view
๏ Auto-refresh
๏ Page follow
๏ Future: plugins

WHY PATTERN LAB
๏ Serves as a hub for the entire design process

WHY PATTERN LAB
๏ Can easily traverse from abstract to concrete

WHY PATTERN LAB
๏ Write and name HTML/CSS/JS as you please.

WHY PATTERN LAB
๏ Start with a system first rather than deconstruct later

WHY PATTERN LAB
๏ Encourages flexibility

WHY PATTERN LAB
๏ Extensible and scalable

WHY PATTERN LAB
๏ Document your interface

WHY PATTERN LAB
๏ See pattern lineage

http://patternlab.io

IF ANYTHING GOES WRONG WITH
PATTERN LAB, BLAME THIS GUY.

RESOURCE
http://bradfrostweb.com/blog/web/how-much-does-a-responsive-web-design-cost/

RESOURCE
http://electricpulp.com/notes/you-like-apples/

RESOURCE
http://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/

RESOURCE
http://bradfrostweb.com/blog/post/responsive-design-to-the-rescue-how-homage-grew-mobile-revenue-by-258/

http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg

As an industry, we sell websites like
paintings. Instead, we should be selling
beautiful and easy access to content,
agnostic of device, screen size, or context.
-Dan Mall
http://danielmall.com/articles/the-post-psd-era/

COMPLEX NAVIGATIONDEATH TO THE WATERFALL

Let’s change the phrase
“designing in the browser”
to “deciding in the browser”
-Dan Mall
http://the-pastry-box-project.net/dan-mall/2012-september-12/

http://stylifyme.com/

http://bradfrostweb.com/blog/post/interface-inventory/

http://blog.easy-designs.net/archives/evernote-for-interface-inventories/

๏ Promote consistency
๏ Establish which elements will be challenging to translate
into a responsive environment
๏ Lay the groundwork for a future style guide/pattern library
INTERFACE INVENTORY

RESOURCE
http://styletil.es/

http://trentwalton.com/2011/07/14/content-choreography/

http://www.flickr.com/photos/15609463@N03/7854373494/

AGILE
RESOURCE
http://cognition.happycog.com/article/diy-process

OUR WEBSITES ARE FLUID
OUR PROCESSES NEED TO MATCH

COLLABORATION AND COMMUNICATION
TRUMP PROCESS

COLLABORATION AND COMMUNICATION
TRUMP DELIVERABLES

“I’M CHEVY CHASE... AND YOU’RE NOT.”

d
RESOURCE
http://www.implementingresponsivedesign.com/

`
RESOURCE
http://www.peachpit.com/store/responsive-design-workflow-9780321887863

PLANNING
ADAPTIVEINTERFACES
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson

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

There is no WebKit
on Mobile
— Peter-Paul Koch“

WebKit vs. Acid3
http://www.quirksmode.org/webkit_mobile.html

Surely there’s
platform
consistency!?!
— Any sane individual
“

There is no Android
— Stephanie Rieger
“

http://yfrog.com/z/ob5kndj

But Android
is NOT unique
in this

The culprits?
ZOOM LEVEL
(Ok, this one’s on Android)

Smartphones have reached
56% penetration in the US…
“

…but that’s concentrated in
30% of households
“ http://www.chetansharma.com/usmarketupdateq12013.htm

U.S. Smartphone penetration #s
released in February
http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/
< $30k
47%
$30-50k
53%
$50-75k
61%
>$75k
81%

U.S. Smartphone penetration #s
released in February
http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/
$30k = Average US income 2013
< $30k
47%
$30-50k
53%
$50-75k
61%
>$75k
81%

< $30k
47%
$30-50k
53%
$50-75k
61%
>$75k
81%
0
30000
60000
90000
120000
<30k $30-50k $50-70k >$70k
Population(inthousands)
8,767
U.S. Smartphone vs. Income distribution

< $30k
47%
$30-50k
53%
$50-75k
61%
>$75k
81%
0
30000
60000
90000
120000
<30k $30-50k $50-70k >$70k
Population(inthousands)
8,767
U.S. Smartphone vs. Income distribution
Opportunity!

Even when
we think
we know,
WE ARE
PROBABLY
WRONG

BASIC ADVANCED
UserExperience
Browser Capabilities

BASIC ADVANCED
UserExperience
Content

BASIC ADVANCED
UserExperience
Content
Semantics

BASIC ADVANCED
UserExperience
Content
Semantics
Design

BASIC ADVANCED
UserExperience
Content
Semantics
Design
Interactivity

BASIC ADVANCED
UserExperience
Content
Semantics
Design
Interactivity
Accessibility

BASIC ADVANCED
UserExperience
Text & HTTP
HTML
CSS
JavaScript
¶
<>
{}
↖
ARIA

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

Browsers ignore
what they don’t
understand

I like an escalator because
an escalator can never break,
it can only become stairs.
— Mitch Hedberg

Modern
Browsers
Older Browsers

a dynamic web page can
never break, it can only
become a web page.

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

Graceful Degradation Progressive
Enhancement

on Progressive
Enhancement
Responsive
Web Design
Mobile
First

Mobile
First
Responsive
Web Design
:-)

PLANNING ADAPTIVE INTERFACES
Lightboxes

Interface experience Map
No
JS?
No
No lightboxLoad
Yes
Yes
Lightbox
Create link
Make image clickable
Verify browser
width condition
LIVE

IxMap
No
JS?
No
No lightbox
Yes
Yes
Lightbox
Create link
Verify browser
width condition
LIVE
Load

IxMap
No
Yes
Yes
Lightbox
Create link
Verify browser
width condition
LIVE
JS?
No
No lightboxLoad

IxMap
Yes
Lightbox
Create link
JS?
No
No lightboxLoad
No
Yes
Verify browser
width condition
LIVE

IxMap
No
JS?
No
No lightboxLoad
Yes
Yes
Lightbox
Create link
Verify browser
width condition
LIVE

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>

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>

Thumbnails

IxMap
No
JS?
No
No imageLoad
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width condition

IxMap
No
JS?
No
No image
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width condition
Load

IxMap
No
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width condition
JS?
No
No imageLoad

IxMap
Yes
Image
Adjust markup
Add custom CSS
No
JS?
No
No imageLoad
Yes
Verify browser
width condition

IxMap
No
No
No imageJS?Load
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width condition

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

Until there is
data-image-src="/i/sample.jpg"></p>
data-image-src="/i/sample.jpg"
data-has-image="true">
<img alt="" src="/i/sample.jpg" alt=””/>
</p>

CSS at rest
[data-image-src] {
display: none;
}

CSS at play
[data-image-src][data-image-loaded] {
display: block;
}

JS Watcher
window.watchResize = function(callback)
{
var resizing;
function done() {
clearTimeout( resizing );
resizing = null;
callback();
}
window.onresize = function(){
if ( resizing ) {
clearTimeout( resizing );
resizing = null;
}
resizing = setTimeout( done, 50 );
};
callback();
};

JS Watcher
var browser_width = 0;
window.watchResize(function(){
browser_width = window.innerWidth ||
document.body.offsetWidth;
});

JS Watcher
window.watchResize(function(){
var threshold = 400,
image = document.createElement('img'),
paragraphs = document.getElementsByTagName('p'),
i = paragraphs.length,
p, loaded, src, img;
if ( browser_width >= threshold ) {
image.setAttribute('alt','');
while ( i-- ) {
p = paragraphs[i];
src = p.getAttribute('data-image-src');
loaded = p.getAttribute('data-image-loaded');
if ( src != null && loaded == null ) {
img = image.cloneNode(true);
img.setAttribute('src',src);
p.appendChild( img );
p.setAttribute('data-image-loaded','');
}
}
image = paragraphs = p = img = null;
}
});

IxMap
No
JS?
No
No imageLoad
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width condition
LIVE

Smart CSS
display: block;
}

Smart CSS
display: block;
}
@media only screen and (min-width:400px) {
[data-img-src][data-image-loaded] {
display: block;
}
}

http://is.gd/lazyloading_demo

NO!!!!
#reviews {
display: none;
}
@media only screen and (min-width:50em) {
#reviews {
display: block;
}
}

IxMap
JS?
No
LinksLoad
Yes
Yes
Reviews
Lazy Load the reviews
Verify browser
width condition
LIVE Click
No
Hold for user action

IxMap
JS?
No
Links
Yes
Yes
Reviews
Verify browser
width condition
LIVE Click
No
Load

IxMap
Yes
Yes
Reviews
Verify browser
width condition
LIVE Click
No
JS?
No
LinksLoad

IxMap
Yes
Reviews
Click
JS?
No
LinksLoad
Yes
Verify browser
width condition
LIVE
No

IxMap
Click
JS?
No
LinksLoad
Yes
Yes
Reviews
Verify browser
width condition
LIVE
No

IxMap
JS?
No
LinksLoad
Yes
Verify browser
width condition
LIVE
No
Click
Yes
Reviews

Lazy Loading
<section class="aux reviews" id="reviews">
<header id="tab-reviews">
<a href="reviews.html" class="disabled">…</a>
</header>
</section>

Lazy Loading
<section class="aux reviews loaded" id="reviews">
<header id="tab-reviews">
<a href="reviews.html" class="disabled open">…</a>
</header>
<div role="tabpanel">
<div id="p-reviews" aria-labeledby="tab-reviews">
<ol class="reviews-list">
<li>
<img src="images/avatar.png" alt="Commenter Name">
<div class="review-meta">
<h3>Awesome shirt!</h3>
<a href="#"><time datetime="2010-01-20" pubdate="">11/12/2011</time></a>
By Bruce Bosco
</div>
<div class="review-content">
<p>This shirt looks awesome and is really comfortable to wear. It did shrink
quite a lot when washed, but that could have just been how I ran it. All in all, it's my
favourite shirt, and I love wearing it.</p>
</div>
</li>

</ol>
</div>
</div>
</section>

Tabbed Interface

Traditional approach
<h1>Pumpkin Pie</h1>
<div class="container">
<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 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>

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

IxMap
JS?
No
LinearLoad
Yes
Tabs
Split content into sections
Make tabs
Assign event handlers (mouse & keyboard)

IxMap
JS?
No
Linear
Yes
Tabs
Make tabs
Load

IxMap
Yes
Tabs
Make tabs
JS?
No
LinearLoad

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

Tabbed
<div class="tabbed-interface TabInterface-enabled">
<ul class="tabs">
<li><a href="#folder-1">Overview</a></li>
<li><a href="#folder-2">Ingredients</a></li>
<li><a href="#folder-3">Directions</a></li>
<li><a href="#folder-4">Nutrition</a></li>
</ul>
<section id=”folder-1”>
<h2>Overview</h2>
<img src="pie.jpg" alt="">

</section>

</div>

IxMap
JS?
No
LinearLoad
Yes
Tabs
Make tabs
Yes
Verify space
for tabs
LIVE
No
Accordion
Build accordion

JS?Load
IxMap
Yes
Tabs
Yes
Verify space
for tabs
LIVE
No
Linear
No
Accordion
Build accordion
<?>
Yes
Native
Insert details
& summary
Support details & summary?

role="tablist"
134
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

Result!

Responsive Design & Beyond [Code & Creativity Workshop]

More Related Content

What's hot

Similar to Responsive Design & Beyond [Code & Creativity Workshop]

More from Aaron Gustafson

Recently uploaded

Responsive Design & Beyond [Code & Creativity Workshop]