Slide 1
Slide 1 text
Proactive
Responsive
Design
http://flickr.com/photos/63631877@N00/3937964101
Dallas Society of Visual Communications
Wednesday — October 24, 2012
Slide 2
Slide 2 text
Nathan Smith
Principal UI Architect
Mike Townson
UX Designer
We work as designers/devs at
Mark Sims
UI Developer
http://www.projekt202.com
Slide 3
Slide 3 text
Relax, don’t stress out
taking notes. You can
get the slides here…
http://j.mp/pro-rwd
Slide 4
Slide 4 text
Front-end development is like playing midfield. It’s the
“glue” that connects visual design with the server-side.
Slide 5
Slide 5 text
The term “Responsive Web Design”
was coined by Ethan Marcotte, in an
an article published by A List Apart.
Loosely defined, it means adapting
to various screen sizes, using a fluid
grid and @media queries in CSS.
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Ethan also wrote a book…
http://www.abookapart.com/products/responsive-web-design
Slide 8
Slide 8 text
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 different 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.
Slide 9
Slide 9 text
http://flickr.com/photos/djwudi/382030798
State of mobile in 2007 — The year the iPhone was introduced
Slide 10
Slide 10 text
The state of mobile in 2012 — Touch screens reign supreme
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
http://lukew.com/ff/entry.asp?1506
1,450,000
mobile devices activated
317,124
newborns begin life
Each day, on planet Earth…
Slide 13
Slide 13 text
http://computerworld.com/s/article/9227412/Obama_orders_agencies_to_optimize_Web_content_for_mobile
Slide 14
Slide 14 text
“Obama orders agencies to optimize Web content for mobile”
http://flickr.com/photos/whitehouse/7161178504
Slide 15
Slide 15 text
Essentially, “responsive” has
broken into the mainstream.
It ain’t just for designer blogs
anymore. Some pretty big
name sites are adapting…
Slide 16
Slide 16 text
Microsoft.com — Home page is responsive
Slide 17
Slide 17 text
Grammy.com — Most of the site is responsive
Slide 18
Slide 18 text
Time.com — Entire site is responsive
Slide 19
Slide 19 text
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.
Slide 20
Slide 20 text
Disney.com — Menu adapts, based on screen size
Slide 21
Slide 21 text
Pepsi Innovation — Entire site is responsive
http://innovation.capturaonline.com
Slide 22
Slide 22 text
Pepsi Innovation — Entire site is responsive
http://innovation.capturaonline.com
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Like accessibility, RWD works best with advanced planning…
#FAIL
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
// For good browsers...
@import base
@media (min-width:320px)
@import 320-up
@media (min-width:480px)
@import 480-up
@media (min-width:780px)
@import 780-up
@media (min-width:960px)
@import 960-up
@media (min-width:1100px)
@import 1100-up
Slide 27
Slide 27 text
// For older IE...
@import base
@import 320-up
@import 480-up
@import 780-up
@import 960-up
Slide 28
Slide 28 text
CSS Sass Compass
http://sonspring.com/journal/sass-for-designers
Slide 29
Slide 29 text
http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
CSS served to browser
Neatly organized *.sass
Slide 30
Slide 30 text
http://compass-style.org
Slide 31
Slide 31 text
Compass makes vendor prefixes easy...
Slide 32
Slide 32 text
Compass brings sanity to gradients...
Slide 33
Slide 33 text
http://host.sonspring.com/handlebbbars
Handlebbbars
demo of Handlebars.js
and the Dribbble API
Slide 34
Slide 34 text
Sweet, responsive Handlebbbars action
http://host.sonspring.com/handlebbbars
Slide 35
Slide 35 text
@media (min-width: 880px) {
/* line 198, ../sass/_site.sass */
body {
width: 880px;
margin: 0 auto;
}
/* line 202, ../sass/_site.sass */
#list li {
float: left;
width: 400px;
height: 36em;
}
}
@media (min-width: 1320px) {
/* line 208, ../sass/_site.sass */
body {
width: 1320px;
}
}
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
@media queries
aren’t just for width.
Also works well for
“retina” detection…
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min-device-pixel-ratio: 2) {
span.location {
background-image: url([email protected]);
background-size: 16px 14px;
}
span.success {
background-image: url([email protected]);
background-size: 13px 14px;
}
a.delete {
background: url([email protected]) no-repeat 0 -100px;
}
.content a.fav-link {
background-image: url([email protected]);
background-size: 11px 13px;
}
}
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
The biggest problem facing
responsive design is ![]()
and potential file size.
But, there’s a neat solution
for JPG images, at least…
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
A non-exhaustive
list of potentially
helpful responsive
CSS frameworks…
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
http://trentwalton.com/2010/07/05/non-hover
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
Slide 49
Slide 49 text
http://www.flickr.com/photos/sigalakos/4516917297/
Slide 50
Slide 50 text
http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html
Be concise, for people on-the-go (mobile)…
Slide 51
Slide 51 text
http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html
Resist the temptation of information overload…
Slide 52
Slide 52 text
INNOVATION PORTAL
Extended Designs
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
SIDE BY SIDE
The differences of Mobile vs. Desktop
Slide 55
Slide 55 text
HOME
Slide 56
Slide 56 text
HOME
Slide 57
Slide 57 text
MOBILE DESIGN
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
DESKTOP DESIGN
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
DEMO TIME! :)
Also, don’t forget you can
download the slides here…
http://j.mp/pro-rwd