an impress.js presentation by Dustin Gzym adapted from a presentation by John Polacek - use the spacebar or arrow keys to navigate
What Is
Responsive
Web Design?
Responsive websites
respond
to their environment
Adaptive
(Multiple Fixed Width Layouts)
or
Responsive
(Multiple Fluid Grid Layouts)
...or
Combo
Fluid Width
Small Screens
+
Fixed Width
Medium & Large
Why?
“On average, Americans spend 2.7 hours per day socializing on their mobile device. That is twice the amount of time they spend eating, and over 1/3 of the time they spend sleeping each day.” - Microsoft
Small + Medium + Large
One Site
For Every Screen
Who?
Not just demos, design shops and vanity pages
Real Client Work
The Boston Globe
Largest responsive web design project to date
bostonglobe.com
Barack Obama
The Obama campaign continues to be at the leading edge of web technology
barackobama.com
Grey Goose Vodka
Responsive site for Grey Goose with parallax scrolling animation
www.greygoose.com
Clear Air Challenge
Promo site for the Clear Air Commute Challenge
clearairchallenge.com
...and plenty more
http://mediaqueri.es
When?
The TIME is NOW
Things to Consider
Time & Money
Browser Support
Performance & Content
How?
Mobile traffic makes up 20% of all Internet traffic,
but 90% of all websites aren't mobile optimized.. -
Smartphones
iPhones
or
Tablets
iPads
Best Practices
Content Check
Start Small
Mobile First
Exit Photoshop
Enter Browser
Think Modular
Always Be Optimizing
*Best practices still emerging
Where?
Leaders
Learn It
Cool Stuff
More Cool Stuff
Credits

an impress.js presentation by Dustin Gzym

Responsive Web Design Graphic by Bakken & Baeck

Responsive Web Design Book published by A Book Apart

Open Sans Font by Steve Matteson

impress.js created by Bartek Szopka