Proactive Responsive Design

Proactive
Responsive
Design
Dallas Society of Visual Communications
Wednesday — October 24, 2012

http://ﬂickr.com/photos/63631877@N00/3937964101

We work as designers/devs at

Nathan Smith Mark Sims Mike Townson
Principal UI Architect UI Developer UX Designer

http://www.projekt202.com

Relax, don’t stress out
taking notes. You can
get the slides here…

http://j.mp/pro-rwd

Front-end development is like playing midﬁeld. It’s the
“glue” that connects visual design with the server-side.

The term “Responsive Web Design”
was coined by Ethan Marcotte, in an
an article published by A List Apart.

Loosely deﬁned, it means adapting
to various screen sizes, using a ﬂuid
grid and @media queries in CSS.

Ethan also wrote a book…

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

When should you use RWD™?

Responsive web design using @media queries (with one
codebase for all devices) typically works best for web
“sites” (not apps). Apps work best when tailored to one
particular interaction paradigm. For instance, mobile
Gmail is a diﬀerent experience than on the desktop.

As a general rule of thumb, if your content can be read
via RSS (such as Google Reader) and still make sense, it
might be worth considering a responsive approach.

State of mobile in 2007 — The year the iPhone was introduced

http://ﬂickr.com/photos/djwudi/382030798

The state of mobile in 2012 — Touch screens reign supreme

The one thing all these phones have
in common (besides Angry Birds) is
they all have decent web browsers.

http://paulirish.com/2010/high-res-browser-icons

Each day, on planet Earth…

1,450,000
mobile devices activated

317,124
newborns begin life
http://lukew.com/ﬀ/entry.asp?1506

http://computerworld.com/s/article/9227412/Obama_orders_agencies_to_optimize_Web_content_for_mobile

“Obama orders agencies to optimize Web content for mobile”

http://ﬂickr.com/photos/whitehouse/7161178504

Essentially, “responsive” has
broken into the mainstream.
It ain’t just for designer blogs
anymore. Some pretty big
name sites are adapting…

Microsoft.com — Home page is responsive

Grammy.com — Most of the site is responsive

Time.com — Entire site is responsive

Disney.com — Entire site is responsive

There is one Flash ad, which disappears if the browser is at “mobile” width.

Note: Most mobile devices have little/no support for Flash, Silverlight, etc.

Disney.com — Menu adapts, based on screen size

Pepsi Innovation — Entire site is responsive

http://innovation.capturaonline.com

Like accessibility, RWD works best with advanced planning…

#FAIL

// For good browsers...

@import base

@media (min-width:320px)
@import 320-up

@import 480-up

@import 780-up

@import 960-up

@import 1100-up

// For older IE...

@import base
@import 320-up
@import 480-up
@import 780-up
@import 960-up


<link rel="stylesheet" href="/css/style.css">

CSS Sass Compass
http://sonspring.com/journal/sass-for-designers

Neatly organized *.sass CSS served to browser

http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli

http://compass-style.org

Compass makes vendor preﬁxes easy...

Compass brings sanity to gradients...

Handlebbbars
demo of Handlebars.js
and the Dribbble API

http://host.sonspring.com/handlebbbars

Sweet, responsive Handlebbbars action

http://host.sonspring.com/handlebbbars

@media (min-width: 880px) {
/* line 198, ../sass/_site.sass */
body {
width: 880px;
margin: 0 auto;
}

#list li {
float: left;
width: 400px;
height: 36em;
}
}

@media (min-width: 1320px) {
body {
width: 1320px;
}
}

@media queries
aren’t just for width.
Also works well for
“retina” detection…

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min-device-pixel-ratio: 2) {

span.location {
background-image: url(location@2x.png);
background-size: 16px 14px;
}

span.success {
background-image: url(success@2x.png);
}

a.delete {
background: url(delete@2x.png) no-repeat 0 -100px;
}

.content a.fav-link {
background-image: url(favorite@2x.png);
}
}

The biggest problem facing
responsive design is <img>
and potential ﬁle size.

But, there’s a neat solution
for JPG images, at least…

A non-exhaustive
list of potentially
helpful responsive
CSS frameworks…

Elements that rely only on mousemove,
mouseover, mouseout or the CSS pseudo-
class :hover may not always behave as
expected on a touch-screen device such
as iPad or iPhone. — Apple Reference Library

http://trentwalton.com/2010/07/05/non-hover

http://www.ﬂickr.com/photos/sigalakos/4516917297/

Be concise, for people on-the-go (mobile)…

http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html

Resist the temptation of information overload…

http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html

INNOVATION PORTAL
Extended Designs

SIDE BY SIDE
The differences of Mobile vs. Desktop

DEMO TIME! :)
Also, don’t forget you can
download the slides here…

http://j.mp/pro-rwd

Proactive Responsive Design

Recommended

More Related Content

Viewers also liked (20)

Similar to Proactive Responsive Design (20)

More from Nathan Smith (20)

Recently uploaded (20)

Proactive Responsive Design