• Like

Keys to Responsive Design

  • 1,407 views
Uploaded 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.

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,407
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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