0
Presented by
Keys to Responsive Design
Presented by
I’m Tim.
Responsive Web Design
I wrote this book.
Amazon
Barnes & Noble
Safari Books
...most places, really.
informIT.com
WRIGHT2740
Responsive Web Design
What we’ll be going over
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media...
Responsive Web Design
01Best PracticesThey’re WAY more exciting than they sound!
Responsive Web Design
Progressive Enhancement
Responsive Web Design
Progressive Enhancement
Responsive Web Design
The BIG secret!
Being good at
responsive design has
little to do with CSS
Responsive Web Design
Rules of Responsive Design
• Don’t call it “mobile”
• Treat it as 1 site
• Don’t target devices
• Do...
Responsive Web Design
02Media Queries & breakpointsHoly sh*t, stop using iPhone dimensions...
• Best Practices
• Setting B...
Responsive Web Design
The Media Query
@media screen and ( max-width: 800px ) {
/* CSS for this breakpoint */
}
media type ...
Responsive Web Design
The Media “Type”
• all
• screen
• print
• braille
• handheld
• projections
• tv
• aural (speech and ...
Responsive Web Design
The Media “Feature”
• min/max-width
• min/max-height
• orientation
• aspect-ratio (browser window)
•...
Responsive Web Design
Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled (-moz-)
Responsive Web Design
Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled (-moz-)
Responsive Web Design
Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled
Responsive Web Design
Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled (-moz-)
Responsive Web Design
Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled (-moz-)
Responsive Web Design
Setting Breakpoints
Responsive Design
doesn’t care that the
iPhone is 320 pixels
wide...
...and neither should you
Responsive Web Design
Making it work on everywhere
Responsive Web Design
Viewport tag content
width=device-width // define the viewport size
initial-scale=1.0 // starting zoo...
Responsive Web Design
Recommended Tag
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
Responsive Web Design
Breakpoints & Media Queries
Live example
Responsive Web Design
Browser Support
caniuse.com
Responsive Web Design
03Design patternsOther people do things this way...
• Best Practices
• Setting Breakpoints
• Design ...
Responsive Web Design
Navigation
• The “Do nothing” approach
• Stacked navigation method
• Footer anchor
• Select menu
• T...
Responsive Web Design
Navigation
The “Do Nothing” Approach
Responsive Web Design
Navigation
The “Stacked Navigation” method
Responsive Web Design
Navigation
Footer Anchor
Image Credit: Brad Frost
Responsive Web Design
Navigation
Select Menu
Image Credit: Brad Frost
Responsive Web Design
Navigation
Toggle
Responsive Web Design
Navigation
Left Nav Flyout
Responsive Web Design
Navigation
The “Hide and Cry”
Responsive Web Design
Navigation
Live example
Responsive Web Design
04Responsive ImagesLoading a image for a small screen? Eh.
• Best Practices
• Setting Breakpoints
• ...
Responsive Web Design
Responsive Images
• max-width: 100%
• srcset
• Picturefill
• Bandwidth testing
Responsive Web Design
Lazy man’s (or woman’s) images
img {
max-width: 100%;
}
Responsive Web Design
srcset
<img src=”low-res.jpg” srcset=”high-res.jpg 2x”>
<img src=”low-res.jpg”
srcset=”narrow.jpg 64...
Responsive Web Design
Picturefill
<div data-picture data-alt=”A Fat Brown Dog”>
<div data-src=”small.jpg” data-media=”(max-...
Responsive Web Design
Bandwidth Testing
navigator.mozConnection.bandwidth
if(Manage.connection === “good”) {
// you have a...
Responsive Web Design
05Responsive JavaScriptGulp...
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive...
Responsive Web Design
Responsive JavaScript
body:before {
content: “widescreen”;
position: absolute;
top: -9999px;
left: -...
Responsive Web Design
Responsive JavaScript
// set the initial screen size
var size = window.getComputedStyle(document.bod...
Responsive Web Design
Responsive JavaScript
Basic example
Responsive Web Design
Responsive JavaScript
Over the top example
Responsive Web Design
06Responsive Design & the ServerLean on me... when you’re not strooooong... and I’ll be your friend....
Responsive Web Design
RESS
?
Yes, do
something
mobile
No.
Responsive Web Design
RESS
In the browser On the server
• Screen size
• Orientation
• Design changes (CSS)
• Is mobile?
• ...
Responsive Web Design
RESS
?
Insert call button
& use native
datepicker
Async load jQuery UI &
date picker base CSS
YES!
N...
Responsive Web Design
RESS
What is the window size? Is touch available?
• Answered with media
queries
• No - Do nothing
• ...
Responsive Web Design
What we went over
• Progressive Enhancement
• Best Practices
• Setting Breakpoints
• Design Patterns...
Responsive Web Design
Books
Responsive Web Design
by Ethan Marcotte
Responsive Web Design
Articles
• Responsive Web Design
http://www.alistapart.com/articles/responsive-web-design/
• Guideli...
Responsive Web Design
Tools & Plugins
• Picturefill
https://github.com/scottjehl/picturefill
• FitVids
http://fitvidsjs.com/
...
Responsive Web Design
Folks on Twitter
• Responsive Design, @rwd
• Mat Marquis, @wilto
• Chris Coyier, @chriscoyier
• Brad...
Responsive Web Design
A Podcast
Web:
freshtilledsoil.com/thedirt
Twitter:
@thedirtshow
@freshtilledsoil
Responsive Web Design
Slides
ftsdesign.com/labs/rwd-08-26-2013/slides.pdf
Responsive Web Design
Questions/Comments
E-mail: tim.wright@freshtilledsoil.com
Twitter: @csskarma
Keys to Responsive Design
Keys to Responsive Design
Upcoming SlideShare
Loading in...5
×

Keys to Responsive Design

1,635

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

Transcript of "Keys to Responsive Design"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×