1. Presented by
Keys to Responsive Design
Wednesday, May 29, 13

2. Presented by
I’m Tim.
Wednesday, May 29, 13

3. Responsive Web Design
I wrote this book.
Amazon
Barnes & Noble
Safari Books
...most places, really.
informIT.com
WRIGHT2740
Wednesday, May 29, 13

4. Responsive Web Design
What we’ll be going over
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
Wednesday, May 29, 13

5. Responsive Web Design
01Best PracticesThey’re WAY more exciting than they sound!
Wednesday, May 29, 13

6. Responsive Web Design
Progressive Enhancement
Wednesday, May 29, 13

7. Responsive Web Design
Progressive Enhancement
Wednesday, May 29, 13

8. Responsive Web Design
The BIG secret!
normal CSS
normal CSS
normal CSS
breakpoint (media query)
breakpoint (media query)Stuff at the
bottom
Overwrites
stuff at the
top
Wednesday, May 29, 13

9. Being good at
responsive design has
little to do with CSS
Wednesday, May 29, 13

10. Responsive Web Design
Rules of Responsive Design
• Don’t call it “mobile”
• Treat it as 1 site
• Don’t target devices
• Don’t remove content for small screens
• Think in terms of features (touch vs. no touch)
• Always remember bandwidth
• Consider the strategy from the start
• Recognize when it isn’t the answer.
Wednesday, May 29, 13

11. Responsive Web Design
02Media Queries & breakpointsHoly sh*t, stop using iPhone dimensions...
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
Wednesday, May 29, 13

12. Responsive Web Design
The Media Query
@media screen and ( max-width: 800px ) {
/* CSS for this breakpoint */
}
media type media feature
normal CSS
Wednesday, May 29, 13

13. Responsive Web Design
The Media “Type”
• all
• screen
• print
• braille
• handheld
• projections
• tv
• aural (speech and sound synthesis)
Wednesday, May 29, 13

14. Responsive Web Design
The Media “Feature”
• min/max-width
• min/max-height
• orientation
• aspect-ratio (browser window)
• device-aspect-ratio (4/3,16/9)
• color-index
• resolution & min-resolution (dpi * dpcm)
• device pixel ratio
Wednesday, May 29, 13

15. Responsive Web Design
Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled (-moz-)
Wednesday, May 29, 13

16. Responsive Web Design
Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled (-moz-)
Wednesday, May 29, 13

17. Responsive Web Design
Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled
Wednesday, May 29, 13

18. Responsive Web Design
Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled (-moz-)
Wednesday, May 29, 13

19. Responsive Web Design
Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled (-moz-)
Wednesday, May 29, 13

20. Responsive Web Design
Setting Breakpoints
Wednesday, May 29, 13

21. Responsive Design
doesn’t care that the
iPhone is 320 pixels
wide...
...and neither should you
Wednesday, May 29, 13

22. Responsive Web Design
Making it work on everywhere
Wednesday, May 29, 13

23. Responsive Web Design
Viewport tag content
width=device-width // define the viewport size
initial-scale=1.0 // starting zoom level
maximum-scale=1.0 // control zooming (0-10)
user-scalable=0 // prevent zooming / input:focus scrolling
Wednesday, May 29, 13

24. Responsive Web Design
Recommended Tag
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
Wednesday, May 29, 13

25. Responsive Web Design
Breakpoints & Media Queries
Live example
Wednesday, May 29, 13

26. Responsive Web Design
Browser Support
caniuse.com
Wednesday, May 29, 13

27. Responsive Web Design
03Design patternsOther people do things this way...
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
Wednesday, May 29, 13

28. Responsive Web Design
Navigation
• The “Do nothing” approach
• Stacked navigation method
• Footer anchor
• Select menu
• Toggle
• Left navigation flyout
• The “Hide and Cry”
Credit: Brad Frost
Wednesday, May 29, 13

29. Responsive Web Design
Navigation
The “Do Nothing” Approach
Wednesday, May 29, 13

30. Responsive Web Design
Navigation
The “Stacked Navigation” method
Wednesday, May 29, 13

31. Responsive Web Design
Navigation
Footer Anchor
Image Credit: Brad Frost
Wednesday, May 29, 13

32. Responsive Web Design
Navigation
Select Menu
Image Credit: Brad Frost
Wednesday, May 29, 13

33. Responsive Web Design
Navigation
Toggle
Wednesday, May 29, 13

34. Responsive Web Design
Navigation
Left Nav Flyout
Wednesday, May 29, 13

35. Responsive Web Design
Navigation
The “Hide and Cry”
Wednesday, May 29, 13

36. Responsive Web Design
Navigation
Live example
Wednesday, May 29, 13

37. Responsive Web Design
04Responsive ImagesLoading a image for a small screen? Eh.
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
Wednesday, May 29, 13

38. Responsive Web Design
Responsive Images
• max-width: 100%
• Picturefill
• Bandwidth testing
Wednesday, May 29, 13

39. Responsive Web Design
Lazy man’s images
img {
max-width: 100%;
}
Wednesday, May 29, 13

40. Responsive Web Design
Picturefill
<div data-picture data-alt=”A Fat Brown Dog”>
<div data-src=”small.jpg” data-media=”(max-width:600px)”></div>
<div data-src=”hd.jpg” data-media=”(min-device-pixel-ratio: 2.0)”></div>
<noscript>
<img src=”fat-dog.jpg” alt=”A Fat Brown Dog”>
</noscript>
</div>
Wednesday, May 29, 13

41. Responsive Web Design
Picturefill
Live example
Wednesday, May 29, 13

42. Responsive Web Design
Bandwidth Testing
navigator.mozConnection.bandwidth
if(Manage.connection === “good”) {
// you have ample bandwidth
}
https://github.com/timwright12/js-asset-management
Wednesday, May 29, 13

43. Responsive Web Design
05Responsive JavaScriptGulp...
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
Wednesday, May 29, 13

44. Responsive Web Design
Responsive JavaScript
body:before {
content: “widescreen”;
position: absolute;
top: -9999px;
left: -9999px;
}
@media screen and (max-width:600px) {
content: “smallscreen”;
}
Wednesday, May 29, 13

45. Responsive Web Design
Responsive JavaScript
// set the initial screen size
var size = window.getComputedStyle(document.body,':before').getPropertyValue('content');
// check the breakpoint on resize
window.addEventListener(“resize”, function(){
size = window.getComputedStyle(document.body,':before').getPropertyValue('content');
if (size.indexOf(“smallscreen”) != -1) {
// do small screen JS
} else {
// do large screen JS
}
}, false);
Wednesday, May 29, 13

46. Responsive Web Design
Responsive JavaScript
Basic example
Wednesday, May 29, 13

47. Responsive Web Design
Responsive JavaScript
Over the top example
Wednesday, May 29, 13

48. Responsive Web Design
06Responsive Design & the ServerLean on me... when you’re not strooooong... and I’ll be your friend...
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
Wednesday, May 29, 13

49. Responsive Web Design
RESS
?
Yes, do
something
mobile
No.
Wednesday, May 29, 13

50. Responsive Web Design
RESS
In the browser On the server
• Screen size
• Orientation
• Design changes (CSS)
• Is mobile?
• Structural changes (HTML)
Wednesday, May 29, 13

51. Wednesday, May 29, 13

52. Wednesday, May 29, 13

53. Responsive Web Design
RESS
?
Insert call button
& use native
datepicker
Async load jQuery UI &
date picker base CSS
YES!
NO!
Wednesday, May 29, 13

54. Responsive Web Design
RESS
What is the window size? Is touch available?
• Answered with media
queries
• No - Do nothing
• Yes - Async load touch
interactions (swiping)
Wednesday, May 29, 13

55. Responsive Web Design
What we went over
• Progressive Enhancement
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
Wednesday, May 29, 13

56. Responsive Web Design
Books
Responsive Web Design
by Ethan Marcotte
Wednesday, May 29, 13

57. Responsive Web Design
Articles
• Responsive Web Design
http://www.alistapart.com/articles/responsive-web-design/
• Guidelines for Responsive Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
• Design Process in a Responsive Age
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
• Adaptive vs. Responsive Design
http://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/
• Responsive Design is more than breakpoints
http://inspectelement.com/articles/responsive-web-design-is-so-more-than-just-a-few-
breakpoints/
Wednesday, May 29, 13

58. Responsive Web Design
Tools & Plugins
• Picturefill
https://github.com/scottjehl/picturefill
• FitVids
http://fitvidsjs.com/
• RespondJS
https://github.com/scottjehl/Respond
• Testing a Responsive Site
http://mattkersley.com/responsive/
• Multi-device layout patterns
http://www.lukew.com/ff/entry.asp?1514
Wednesday, May 29, 13

59. Responsive Web Design
Folks on Twitter
• Responsive Design, @rwd
• Mat Marquis, @wilto
• Chris Coyier, @chriscoyier
• Brad Frost, @brad_frost
• Luke Wroblewski, @lukew
Wednesday, May 29, 13

60. Responsive Web Design
A Podcast
Web:
freshtilledsoil.com/thedirt
Twitter:
@thedirtshow
@freshtilledsoil
Wednesday, May 29, 13

61. Responsive Web Design
Slides
ftsdesign.com/labs/rwd-tnw/slides.pdf
Wednesday, May 29, 13

62. Responsive Web Design
Questions/Comments
E-mail: tim.wright@freshtilledsoil.com
Twitter: @csskarma
Fresh Tilled Labs: freshtilledsoil.com/habitat/labs
Wednesday, May 29, 13