Talk from Utah Code Camp 2014. A discussion on why we need Responsive Web Design, how it works, and strategies for building and converting websites using it.

1. ALL ABOUT
RESPONSIVE DESIGN
Charles Max Wood
http://javascriptjabber.com

2. Why Responsive Design?
What is Responsive Design?
How do I build a responsive website?
How do I adapt a responsive website?
THE PLAN

4. http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6

8. Fluid Grid
Flexible Images
Media Queries
RESPONSIVE DESIGN

9. DEMO
Now, is that demolition? or demonstration?

10. <link rel="stylesheet" type="text/css"
media="screen" href="theme.css">
MEDIA QUERIES

11. <link rel="stylesheet" type="text/css"
media="screen" href="theme.css">
MEDIA QUERIES

12. all
aural
braille
embossed
handheld
MEDIA QUERIES
print
projection
screen
tty
tv

13. all
aural
braille
embossed
handheld
MEDIA QUERIES
print
projection
screen
tty
tv

14. color
color-index
aspect-ratio
device-aspect-ratio
device-height
device-width
grid
MEDIA QUERIES
height
monochrome
orientation
resolution
scan
width

15. color
color-index
aspect-ratio
device-aspect-ratio
device-height
device-width
grid
MEDIA QUERIES
height
monochrome
orientation
resolution
scan
width
min-width
max-width

16. Text
Text
Text
Text
Text

17. <meta name="viewport" content="width=device-width,
initial-scale=1.0">
VIEWPORT

18. <!--[if lt IE 9]>
<script src="http://css3-mediaqueries-
js.googlecode.com/svn/trunk/css3-mediaqueries.js"></
script>
<![endif]-->
OLD IE (8 AND LOWER)
https://github.com/scottjehl/Respond

19. IF YOU BUILD IT
MAKE IT RESPONSIVE

20. Home About Shirts Contact
Dress
Responsively
clothing co
SIZE US UP &
CAST YOUR VOTE!
IMAGE
OF LEADING
SHIRT
WHAT’S THIS ALL ABOUT?
SHOW ME ALL THE CANDIDATES
The Dress Responsively Clothing
Company doesn’t exist. Yet. This
website is a product of Sparkbox’s Build
Responsively workshop. Dress
Responsively was originally built as a
mock project to create working files and
content for the workshop’s attendees.
HAS
DROP
DOWN
MAILTO
LINKSCROLL
BELOW
334
VOTES
#1
IN POLLS
friends. Democracy at work, folks. It’s
either that or mob rule, whichever comes
first. Either way, we all get sweet shirts
out of it.
SHOW ME THE CANDIDATES
Back to Top
SPARKBOX
LOGO
MADE BY
BUILD RESPONSIVELY
LOGO
EXCLUSIVELY FOR
Home About Shirts Contact
© Sparkbox 2012
All Rights Reserved.
Link
Link

21. Figure out what is the most important
Put those closest to the top
Widen it out and play with arrangements
on your grid.
Adjust images appropriately as well.
Choose things you want to add
TIPS

22. Try it on several devices
Re-orient on mobile devices
Width queries means you can collapse
your browser.
Responsive Web Design is easiest to do
at the beginning of a project.
TIPS

24. Text
Text
Text
Text
Text

25. A List Apart article - http://bit.ly/1gjHigU
Responsive Web Design course -
http://bit.ly/1eDEQMP
Mobilizing Web Sites book -
http://amzn.to/1fIEKrN
Smashing Magazine articles -
http://bit.ly/1hhm6Wb

26. Podcasts
http://javascriptjabber.com
http://rubyrogues.com
http://freelancersshow.com
http://iphreaksshow.com
CHARLES MAX WOOD

27. Freelance Web Development
Ruby on Rails
Angular.js
chuck@devchat.tv
@cmaxw
Lean Startup
CHARLES MAX WOOD