Your SlideShare is downloading. ×
0

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Keys to Responsive Design

1,041

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 …

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,041
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Keys to Responsive Design Presented by
  • 2. I’m Tim.Presented by
  • 3. Files ftsdesign.com/labs/rwd/assets.zipRWD = Responsive Web Design Responsive Web Design
  • 4. What we’ll be going over • Progressive Enhancement • Flexible Layouts • Media Queries • Responsive Navigation • Responsive Images & Video (Time permitting) Responsive Web Design
  • 5. 01 The Basics Getting on the same page & responsive design basics Responsive Web Design
  • 6. Progressive Enhancement Responsive Web Design
  • 7. Progressive Enhancement Responsive Web Design
  • 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. Why & When of RWD• What is “mobile” about this site?• Do NOT do it just because it’s cool Responsive Web Design
  • 10. Responsive Sites Responsive Web Design
  • 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. Flexible Layouts % Responsive Web Design
  • 13. Creating a Flexible Layout Exercise Responsive Web Design
  • 14. The Media Query Responsive Web Design
  • 15. The Media Query media type media feature@media screen and ( max-width: 800px ) { /* CSS for this breakpoint */} applied styles Responsive Web Design
  • 16. The Media “Type”• all• screen• print• braille• handheld• projections• tv• aural (speech and sound synthesis) Responsive Web Design
  • 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. Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-) Responsive Web Design
  • 19. Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-) Responsive Web Design
  • 20. Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled Responsive Web Design
  • 21. Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-) Responsive Web Design
  • 22. Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-) Responsive Web Design
  • 23. Responsive Sites Responsive Web Design
  • 24. Setting Breakpoints Responsive Web Design
  • 25. Adding a Media Query Exercise Responsive Web Design
  • 26. Making it work on everywhere Responsive Web Design
  • 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. Recommended Tag<meta name=”viewport” content=”width=device-width, initial-scale=1.0”> Responsive Web Design
  • 29. Adding the Viewport Tag Exercise Responsive Web Design
  • 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. NavigationThe “Do Nothing” Approach Image Credit: Brad Frost Responsive Web Design
  • 32. NavigationThe “Stacked Navigation” method Image Credit: Brad Frost Responsive Web Design
  • 33. Navigation Footer Anchor Image Credit: Brad Frost Responsive Web Design
  • 34. Navigation Select Menu Image Credit: Brad Frost Responsive Web Design
  • 35. Navigation Toggle Image Credit: Brad Frost Responsive Web Design
  • 36. Navigation Left Nav Flyout Image Credit: Brad Frost Responsive Web Design
  • 37. NavigationThe “Hide and Cry” Image Credit: Brad Frost Responsive Web Design
  • 38. NavigationExercise Responsive Web Design
  • 39. Browser Support caniuse.com Responsive Web Design
  • 40. 03 Dealing with media Images and Video Responsive Web Design
  • 41. Media (Images & Video) Image Credit: TeamTreehouse.com Responsive Web Design
  • 42. Responsive Images• Max-width method• Picturefill method• Dealing with Retina displays• Using SVG and Icon fonts Responsive Web Design
  • 43. Install Picturefill Exercise Responsive Web Design
  • 44. Responsive Video• FitVid, jQuery plugin• Creating intrinsic ratios in CSS Responsive Web Design
  • 45. FitVidhttps://vimeo.com/28523422 Responsive Web Design
  • 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. Responsive Video Exercise Responsive Web Design
  • 48. Responsive Sites Responsive Web Design
  • 49. 04 Resources Continuing your education Responsive Web Design
  • 50. BooksResponsive Web Designby Ethan Marcotte Responsive Web Design
  • 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. 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. Folks on Twitter• Responsive Design, @rwd• Mat Marquis, @wilto• Chris Coyier, @chriscoyier• Brad Frost, @brad_frost• Luke Wroblewski, @lukew Responsive Web Design
  • 54. What we went over• What?• When?• Why?• How? Responsive Web Design
  • 55. Slidesftsdesign.com/labs/rwd/slides.pdf Responsive Web Design
  • 56. 05 Questions & Comments? ...and maybe answers Responsive Web Design
  • 57. Contact InformationE-mail: tim.wright@freshtilledsoil.comTwitter: @csskarmaFresh Tilled Labs: freshtilledsoil.com/habitat/labs Responsive Web Design

×