Keys to Responsive Design

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

17. Responsive Web Design Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled 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 // deﬁne 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 ﬂyout • 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% • Pictureﬁll • 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 Pictureﬁ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 Design Pictureﬁll 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

Keys to Responsive Design

You are reading a preview.

Keys to Responsive Design

More Related Content

Similar to Keys to Responsive Design

More from Tim Wright

Featured

Related Books

Related Audiobooks