Keys to Responsive Design

1. Presented byKeys to Responsive DesignWednesday, May 29, 13

2. Presented byI’m Tim.Wednesday, May 29, 13

3. Responsive Web DesignI wrote this book.AmazonBarnes & NobleSafari Books...most places, really.informIT.comWRIGHT2740Wednesday, May 29, 13

4. Responsive Web DesignWhat 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 Design01Best PracticesThey’re WAY more exciting than they sound!Wednesday, May 29, 13

6. Responsive Web DesignProgressive EnhancementWednesday, May 29, 13

7. Responsive Web DesignProgressive EnhancementWednesday, May 29, 13

8. Responsive Web DesignThe BIG secret!normal CSSnormal CSSnormal CSSbreakpoint (media query)breakpoint (media query)Stuff at thebottomOverwritesstuff at thetopWednesday, May 29, 13

9. Being good atresponsive design haslittle to do with CSSWednesday, May 29, 13

10. Responsive Web DesignRules 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 Design02Media 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 DesignThe Media Query@media screen and ( max-width: 800px ) {/* CSS for this breakpoint */}media type media featurenormal CSSWednesday, May 29, 13

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

14. Responsive Web DesignThe 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 ratioWednesday, May 29, 13

15. Responsive Web DesignAspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)Wednesday, May 29, 13

17. Responsive Web DesignAspect ratioHeight/WidthOrientationResolution (dpi)Touch enabledWednesday, May 29, 13

20. Responsive Web DesignSetting BreakpointsWednesday, May 29, 13

21. Responsive Designdoesn’t care that theiPhone is 320 pixelswide......and neither should youWednesday, May 29, 13

22. Responsive Web DesignMaking it work on everywhereWednesday, May 29, 13

23. Responsive Web DesignViewport tag contentwidth=device-width // deﬁne the viewport sizeinitial-scale=1.0 // starting zoom levelmaximum-scale=1.0 // control zooming (0-10)user-scalable=0 // prevent zooming / input:focus scrollingWednesday, May 29, 13

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

25. Responsive Web DesignBreakpoints & Media QueriesLive exampleWednesday, May 29, 13

26. Responsive Web DesignBrowser Supportcaniuse.comWednesday, May 29, 13

27. Responsive Web Design03Design 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 DesignNavigation• The “Do nothing” approach• Stacked navigation method• Footer anchor• Select menu• Toggle• Left navigation ﬂyout• The “Hide and Cry”Credit: Brad FrostWednesday, May 29, 13

29. Responsive Web DesignNavigationThe “Do Nothing” ApproachWednesday, May 29, 13

30. Responsive Web DesignNavigationThe “Stacked Navigation” methodWednesday, May 29, 13

31. Responsive Web DesignNavigationFooter AnchorImage Credit: Brad FrostWednesday, May 29, 13

32. Responsive Web DesignNavigationSelect MenuImage Credit: Brad FrostWednesday, May 29, 13

33. Responsive Web DesignNavigationToggleWednesday, May 29, 13

34. Responsive Web DesignNavigationLeft Nav FlyoutWednesday, May 29, 13

35. Responsive Web DesignNavigationThe “Hide and Cry”Wednesday, May 29, 13

36. Responsive Web DesignNavigationLive exampleWednesday, May 29, 13

37. Responsive Web Design04Responsive 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 DesignResponsive Images• max-width: 100%• Pictureﬁll• Bandwidth testingWednesday, May 29, 13

39. Responsive Web DesignLazy man’s imagesimg {max-width: 100%;}Wednesday, May 29, 13

40. Responsive Web DesignPictureﬁll<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 DesignPictureﬁllLive exampleWednesday, May 29, 13

42. Responsive Web DesignBandwidth Testingnavigator.mozConnection.bandwidthif(Manage.connection === “good”) {// you have ample bandwidth}https://github.com/timwright12/js-asset-managementWednesday, May 29, 13

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

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

45. Responsive Web DesignResponsive JavaScript// set the initial screen sizevar size = window.getComputedStyle(document.body,:before).getPropertyValue(content);// check the breakpoint on resizewindow.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 DesignResponsive JavaScriptBasic exampleWednesday, May 29, 13

47. Responsive Web DesignResponsive JavaScriptOver the top exampleWednesday, May 29, 13

48. Responsive Web Design06Responsive 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 DesignRESS?Yes, dosomethingmobileNo.Wednesday, May 29, 13

50. Responsive Web DesignRESSIn 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 DesignRESS?Insert call button& use nativedatepickerAsync load jQuery UI &date picker base CSSYES!NO!Wednesday, May 29, 13

54. Responsive Web DesignRESSWhat is the window size? Is touch available?• Answered with mediaqueries• No - Do nothing• Yes - Async load touchinteractions (swiping)Wednesday, May 29, 13

55. Responsive Web DesignWhat 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 DesignBooksResponsive Web Designby Ethan MarcotteWednesday, May 29, 13

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

58. Responsive Web DesignTools & Plugins• Picturefillhttps://github.com/scottjehl/picturefill• FitVidshttp://fitvidsjs.com/• RespondJShttps://github.com/scottjehl/Respond• Testing a Responsive Sitehttp://mattkersley.com/responsive/• Multi-device layout patternshttp://www.lukew.com/ff/entry.asp?1514Wednesday, May 29, 13

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

60. Responsive Web DesignA PodcastWeb:freshtilledsoil.com/thedirtTwitter:@thedirtshow@freshtilledsoilWednesday, May 29, 13

61. Responsive Web DesignSlidesftsdesign.com/labs/rwd-tnw/slides.pdfWednesday, May 29, 13

62. Responsive Web DesignQuestions/CommentsE-mail: tim.wright@freshtilledsoil.comTwitter: @csskarmaFresh Tilled Labs: freshtilledsoil.com/habitat/labsWednesday, May 29, 13

Keys to Responsive Design

Tim Wright

Keys to Responsive Design