What The Heck Is
Responsive Web Design?

a scrolldeck.js presentation by Chicago Web Developer John Polacek.
I work at AuctionsByCellular.
We make mobile bidding and auction software for charities.

Treehouse. From zero experience to job ready - web design, coding + more. Get 3 Months Free.

Responsive websites respond to their environment

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

Mixed Approach

Fixed width for large and medium.

Fluid width for small.

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?

Not just demos, design shops and vanity pages. Real client work.

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

When To Use It?

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

Frameworks

Simple, fluid HTML/CSS/JS framework
from Twitter

Bootstrap

Fixed width for medium & large screens,
fluid single column for small

goldilocksapproach.com

Flexible 6 and 12-grid framework.

Foundation

Minimal responsive framework.
Includes Wordpress theme.

Skeleton

...and plenty more

Useful Stuff

Respond.js enquire.js Style Tiles Masonry CSS-Tricks FitText FitVids ...and plenty more

Credits

Created by John Polacek a Chicago Web Developer

Responsive Web Design Graphic by Bakken & Baeck

Goldilocks Approach by Front

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+