Keys to Responsive Design

1,421 views

Published on

Learn the keys to responsive web design. This deck covers progressive enhancements, flexible layouts, media queries, responsive navigation, and responsive images and video. Taught by Tim Wright of Fresh Tilled Soil. For more great classes, visit www.intelligent.ly/learn

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,421
On SlideShare
0
From Embeds
0
Number of Embeds
159
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Keys to Responsive Design

  1. 1. Keys to Responsive Design Presented by
  2. 2. I’m Tim.Presented by
  3. 3. Files ftsdesign.com/labs/rwd/assets.zipRWD = Responsive Web Design Responsive Web Design
  4. 4. What we’ll be going over • Progressive Enhancement • Flexible Layouts • Media Queries • Responsive Navigation • Responsive Images & Video (Time permitting) Responsive Web Design
  5. 5. 01 The Basics Getting on the same page & responsive design basics Responsive Web Design
  6. 6. Progressive Enhancement Responsive Web Design
  7. 7. Progressive Enhancement Responsive Web Design
  8. 8. Why & When of RWD• +1 for Progressive Enhancement• Single codebase• Scales to multi-sites• Less staff• Less server overhead• Better SEO Responsive Web Design
  9. 9. Why & When of RWD• What is “mobile” about this site?• Do NOT do it just because it’s cool Responsive Web Design
  10. 10. Responsive Sites Responsive Web Design
  11. 11. 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 • Seriously, don’t call it “mobile” • Consider the strategy from the start Responsive Web Design
  12. 12. Flexible Layouts % Responsive Web Design
  13. 13. Creating a Flexible Layout Exercise Responsive Web Design
  14. 14. The Media Query Responsive Web Design
  15. 15. The Media Query media type media feature@media screen and ( max-width: 800px ) { /* CSS for this breakpoint */} applied styles Responsive Web Design
  16. 16. The Media “Type”• all• screen• print• braille• handheld• projections• tv• aural (speech and sound synthesis) Responsive Web Design
  17. 17. 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 Responsive Web Design
  18. 18. Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-) Responsive Web Design
  19. 19. Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-) Responsive Web Design
  20. 20. Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled Responsive Web Design
  21. 21. Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-) Responsive Web Design
  22. 22. Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-) Responsive Web Design
  23. 23. Responsive Sites Responsive Web Design
  24. 24. Setting Breakpoints Responsive Web Design
  25. 25. Adding a Media Query Exercise Responsive Web Design
  26. 26. Making it work on everywhere Responsive Web Design
  27. 27. Viewport tag contentwidth=device-width // define the viewport sizeinitial-scale=1.0 // starting zoom levelmaximum-scale=1.0 // control zooming (0-10)user-scalable=0 // prevent zooming / input:focus scrolling Responsive Web Design
  28. 28. Recommended Tag<meta name=”viewport” content=”width=device-width, initial-scale=1.0”> Responsive Web Design
  29. 29. Adding the Viewport Tag Exercise Responsive Web Design
  30. 30. Navigation• The “Do nothing” approach• Stacked navigation method• Footer anchor• Select menu• Toggle• Left nav flyout (we’ll go through this later)• The “Hide and Cry” Responsive Web Design
  31. 31. NavigationThe “Do Nothing” Approach Image Credit: Brad Frost Responsive Web Design
  32. 32. NavigationThe “Stacked Navigation” method Image Credit: Brad Frost Responsive Web Design
  33. 33. Navigation Footer Anchor Image Credit: Brad Frost Responsive Web Design
  34. 34. Navigation Select Menu Image Credit: Brad Frost Responsive Web Design
  35. 35. Navigation Toggle Image Credit: Brad Frost Responsive Web Design
  36. 36. Navigation Left Nav Flyout Image Credit: Brad Frost Responsive Web Design
  37. 37. NavigationThe “Hide and Cry” Image Credit: Brad Frost Responsive Web Design
  38. 38. NavigationExercise Responsive Web Design
  39. 39. Browser Support caniuse.com Responsive Web Design
  40. 40. 03 Dealing with media Images and Video Responsive Web Design
  41. 41. Media (Images & Video) Image Credit: TeamTreehouse.com Responsive Web Design
  42. 42. Responsive Images• Max-width method• Picturefill method• Dealing with Retina displays• Using SVG and Icon fonts Responsive Web Design
  43. 43. Install Picturefill Exercise Responsive Web Design
  44. 44. Responsive Video• FitVid, jQuery plugin• Creating intrinsic ratios in CSS Responsive Web Design
  45. 45. FitVidhttps://vimeo.com/28523422 Responsive Web Design
  46. 46. Intrinsic Ratios.video { .video iframe, position: relative; .video object, padding-bottom: 56.25%; .video embed { padding-top: 25px; position: absolute; height: 0; top: 0; overflow: hidden; left: 0; margin-bottom: 20px; width: 100%;} height: 100%; } Responsive Web Design
  47. 47. Responsive Video Exercise Responsive Web Design
  48. 48. Responsive Sites Responsive Web Design
  49. 49. 04 Resources Continuing your education Responsive Web Design
  50. 50. BooksResponsive Web Designby Ethan Marcotte Responsive Web Design
  51. 51. 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/ Responsive Web Design
  52. 52. 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 Responsive Web Design
  53. 53. Folks on Twitter• Responsive Design, @rwd• Mat Marquis, @wilto• Chris Coyier, @chriscoyier• Brad Frost, @brad_frost• Luke Wroblewski, @lukew Responsive Web Design
  54. 54. What we went over• What?• When?• Why?• How? Responsive Web Design
  55. 55. Slidesftsdesign.com/labs/rwd/slides.pdf Responsive Web Design
  56. 56. 05 Questions & Comments? ...and maybe answers Responsive Web Design
  57. 57. Contact InformationE-mail: tim.wright@freshtilledsoil.comTwitter: @csskarmaFresh Tilled Labs: freshtilledsoil.com/habitat/labs Responsive Web Design

×