Proactive Responsive Design

ProactiveResponsive

Design

http://flickr.com/photos/63631877@N00/3937964101

Dallas Society of Visual Communications

Wednesday — October 24, 2012

Nathan SmithPrincipal UI Architect

Mike TownsonUX Designer

We work as designers/devs at

Mark SimsUI Developer

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 midfield. 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 defined, it means adapting to various screen sizes, using a fluid 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 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.

http://flickr.com/photos/djwudi/382030798

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

The state of mobile in 2012 — Touch screens reign supreme

The one thing all these phones havein common (besides Angry Birds) isthey all have decent web browsers.

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

http://lukew.com/ff/entry.asp?1506

1,450,000mobile devices activated

317,124newborns begin life

Each day, on planet Earth…

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://flickr.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

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

@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

// For older IE...

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

<!--[if (gt IE 8) | (IEMobile)]><!--><link rel="stylesheet" href="/css/style.css"><!--<![endif]-->

<!--[if (lt IE 9) & (!IEMobile)]><link rel="stylesheet" href="/css/ie.css"><![endif]-->

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

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

CSS served to browserNeatly organized *.sass

http://compass-style.org

Compass makes vendor prefixes easy...

Compass brings sanity to gradients...

http://host.sonspring.com/handlebbbars

Handlebbbarsdemo of Handlebars.jsand the Dribbble API

Sweet, responsive Handlebbbars action

http://host.sonspring.com/handlebbbars

@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; }}

@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([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; }}

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

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

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

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

http://www.flickr.com/photos/sigalakos/4516917297/

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

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…

INNOVATION PORTAL Extended Designs

SIDE BY SIDEThe differences of Mobile vs. Desktop

HOME

HOME

MOBILE DESIGN

DESKTOP DESIGN

DEMO TIME! :)

Also, don’t forget you can download the slides here…

http://j.mp/pro-rwd