What The Heck Is
Responsive Web Design?

a scrolldeck.js presentation by Chicago Web Developer John Polacek.
I work at Gesture.
We make mobile bidding, auction software and other fundraising products and services for nonprofits.

Responsive websites respond to their environment

Adaptive (Multiple Fixed Width Layouts) or Responsive (Multiple Fluid Grid Layouts)

Recommended Approach

Go All In On Responsive

Make pages that look great at any size.

Why?

“Day by day, the number of devices, platforms,
and browsers that need to work with your site grows.
Responsive web design represents a fundamental shift
in how we’ll build websites for the decade to come.” - Jeffrey Veen

Small + Medium + Large

One site for every screen.

Who Is Doing It?

Everyone. These days web design and responsive web design are the same thing.

The Boston Globe

Largest responsive web design project to date

bostonglobe.com

Grey Goose

Responsive site for Grey Goose with parallax scrolling animation

www.greygoose.com

Target

Corporate website

corporate.target.com

Barack Obama

The Obama campaign continues to be at the leading edge of web technology.

barackobama.com

...and plenty more

mediaqueri.es

Things to Consider

How?

“Stop Thinking in Pages. Start Thinking in Systems.” - Jeremy Keith

Frameworks (save time) or Roll Your Own (more control)

Best Practices

Where Can We
Learn More?

Ethan Marcotte

Author of Responsive Web Design

Brains behind the Boston Globe redesign

unstoppablerobotninja.com

Treehouse

Web Design and Development Learning Site

teamtreehouse.com

Tuts+

Great web design tutorials and articles

webdesign.tutsplus.com

This Is Responsive

Patterns, resources and news

bradfrost.github.com/this-is-responsive

Tools & Frameworks

Free responsive website builder

Webflow.com

Simple, fluid HTML/CSS/JS framework

Bootstrap

Flexible 6 and 12-grid framework

Foundation

Minimal responsive framework

Skeleton

...and plenty more

Useful Stuff

Respond.js CSS-Tricks Style Tiles Responsive Images Extra Strength Responsive Grids Responsivator! Masonry FitVids ...and plenty more

Credits

Created by John Polacek a Chicago Web Developer

Responsive Web Design Graphic by Bakken & Baeck

Spectrum of Devices Image by ZURB

Responsive Web Design Book published by A Book Apart

Jeremy Keith Quotation from The Web Ahead Podcast

Jeffery Veen Quotation from a book review of ’Responsive Web Design‘

Corben Font by Vernon Adams

Scrolldeck and Scrollorama created by John Polacek

John Polacek on Google+