Your SlideShare is downloading. ×
0
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Keys to Responsive Design
Upcoming SlideShare
Loading in...5
×

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,620

Published on

In this class, we'll analyze various scenarious in which a traditional 960 pixel view fails users, and how responsive design can help. We'll look at the best-practice principles behind implementing a …

In this class, we'll analyze various scenarious in which a traditional 960 pixel view fails users, and how responsive design can help. We'll look at the best-practice principles behind implementing a responsive website or app and then walk through a fail-proof process for overhauling existing designs to make them truly responsive.

Published in: Business, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,620
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
46
Comments
0
Likes
5
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. Presented by Keys to Responsive Design
  2. Presented by I’m Tim.
  3. Responsive Web Design I wrote this book. Amazon Barnes & Noble Safari Books ...most places, really. informIT.com WRIGHT2740
  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)
  5. Responsive Web Design 01Best PracticesThey’re WAY more exciting than they sound!
  6. Responsive Web Design Progressive Enhancement
  7. Responsive Web Design Progressive Enhancement
  8. Responsive Web Design The BIG secret!
  9. Being good at responsive design has little to do with CSS
  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.
  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)
  12. Responsive Web Design The Media Query @media screen and ( max-width: 800px ) { /* CSS for this breakpoint */ } media type media feature normal CSS
  13. Responsive Web Design The Media “Type” • all • screen • print • braille • handheld • projections • tv • aural (speech and sound synthesis)
  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
  15. Responsive Web Design Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-)
  16. Responsive Web Design Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-)
  17. Responsive Web Design Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled
  18. Responsive Web Design Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-)
  19. Responsive Web Design Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-)
  20. Responsive Web Design Setting Breakpoints
  21. Responsive Design doesn’t care that the iPhone is 320 pixels wide... ...and neither should you
  22. Responsive Web Design Making it work on everywhere
  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
  24. Responsive Web Design Recommended Tag <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
  25. Responsive Web Design Breakpoints & Media Queries Live example
  26. Responsive Web Design Browser Support caniuse.com
  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)
  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
  29. Responsive Web Design Navigation The “Do Nothing” Approach
  30. Responsive Web Design Navigation The “Stacked Navigation” method
  31. Responsive Web Design Navigation Footer Anchor Image Credit: Brad Frost
  32. Responsive Web Design Navigation Select Menu Image Credit: Brad Frost
  33. Responsive Web Design Navigation Toggle
  34. Responsive Web Design Navigation Left Nav Flyout
  35. Responsive Web Design Navigation The “Hide and Cry”
  36. Responsive Web Design Navigation Live example
  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)
  38. Responsive Web Design Responsive Images • max-width: 100% • srcset • Picturefill • Bandwidth testing
  39. Responsive Web Design Lazy man’s (or woman’s) images img { max-width: 100%; }
  40. Responsive Web Design srcset <img src=”low-res.jpg” srcset=”high-res.jpg 2x”> <img src=”low-res.jpg” srcset=”narrow.jpg 640w 1x, high-res-narrow.jpg 640w 2x, large.jpg 1x, high-res-large.jpg 2x”> just to make sure it’s a little confusing...
  41. 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>
  42. Responsive Web Design Bandwidth Testing navigator.mozConnection.bandwidth if(Manage.connection === “good”) { // you have ample bandwidth } https://github.com/timwright12/js-asset-management
  43. Responsive Web Design 05Responsive JavaScriptGulp... • Best Practices • Setting Breakpoints • Design Patterns • Responsive Media • Responsive JavaScript • RESS (RWD with Server-side Components)
  44. Responsive Web Design Responsive JavaScript body:before { content: “widescreen”; position: absolute; top: -9999px; left: -9999px; } @media screen and (max-width:600px) { content: “smallscreen”; }
  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);
  46. Responsive Web Design Responsive JavaScript Basic example
  47. Responsive Web Design Responsive JavaScript Over the top example
  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)
  49. Responsive Web Design RESS ? Yes, do something mobile No.
  50. Responsive Web Design RESS In the browser On the server • Screen size • Orientation • Design changes (CSS) • Is mobile? • Structural changes (HTML)
  51. Responsive Web Design RESS ? Insert call button & use native datepicker Async load jQuery UI & date picker base CSS YES! NO!
  52. 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)
  53. 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)
  54. Responsive Web Design Books Responsive Web Design by Ethan Marcotte
  55. 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/
  56. 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
  57. Responsive Web Design Folks on Twitter • Responsive Design, @rwd • Mat Marquis, @wilto • Chris Coyier, @chriscoyier • Brad Frost, @brad_frost • Luke Wroblewski, @lukew
  58. Responsive Web Design A Podcast Web: freshtilledsoil.com/thedirt Twitter: @thedirtshow @freshtilledsoil
  59. Responsive Web Design Slides ftsdesign.com/labs/rwd-08-26-2013/slides.pdf
  60. Responsive Web Design Questions/Comments E-mail: tim.wright@freshtilledsoil.com Twitter: @csskarma

×