The Tenets of Responsive Design

921b21db0adbe6810cae63e616777d4a?s=47 thebeckyhamm
March 18, 2014

The Tenets of Responsive Design

921b21db0adbe6810cae63e616777d4a?s=128

thebeckyhamm

March 18, 2014
Tweet

Transcript

  1. The Tenets of Responsive Design

  2. Why When How

  3. Why?

  4. What the world looks like http://opensignal.com/reports/fragmentation-2013/

  5. It’s impossible to design for them all. Therefore, we use

    responsive design. ! “We want our websites to be useable on all devices by responding to the user’s behavior, screen size and screen orientation.” - Adam Kaplan
  6. Ethan Marcotte ! “Responsive Web Design” May 25, 2010

  7. None
  8. None
  9. None
  10. When?

  11. Pretty much always.

  12. How?

  13. 3 Basic Ingredients in a Responsive Design

  14. 1. Media Queries 2. Responsive Images 3. Responsive Grids

  15. Media Queries (are your best friend)

  16. @media  all  and  (min-­‐width:  30em)  {        

     [insert  your  CSS  here]   } "If [device width] is greater than or equal to [30ems], then do {...}"
  17. .column  {     width:  100%;   }   !

    @media  all  and  (min-­‐width:  30em)  {          .column  {                  float:  left;                  width:  50%;          }   }
  18. @media  all  and  (min-­‐width:  30em)  {        

    } Can use “screen”, “print”, “tv”, “handheld”. Just stick to “all”. Can use “max-width”, “min-height”, “max- height” (primarily use “min” values). Can use px, em, rem (use ems or rems)
  19. Responsive Images

  20. Your images will break the layout if you don’t fix

    them!
  21. None
  22. None
  23. img  {         max-­‐width:  100%;    

        height:  auto  !important;   } The Best Way I’ve Found So Far
  24. Don’t forget to: Optimize Optimize Optimize (even your background-images)

  25. • Photoshop > Save for Web • imageoptimizer.net • kraken.io

    • Lots more
  26. Fluid Grids

  27. float: left; width: 50%; float: left; width: 50%; float: left;

    width: 33.3%; float: left; width: 33.3%; float: left; width: 33.3%; float: left; width: 40%; float: left; width: 60%;
  28. float: left; width: 50%; float: left; width: 50%; float: left;

    width: 33.3% ; float: left; width: 40%; float: left; width: 60%; float: left; width: 33.3% ; float: left; width: 33.3% ; Yuck.
  29. float: none; width: 100%; Better! float: none; width: 100%; float:

    none; width: 100%; float: none; width: 100%; float: none; width: 100%; float: none; width: 100%; float: none; width: 100%;
  30. .col-­‐50,  .col-­‐33,  .col-­‐40,  .col-­‐60  {       width:  100%;

      } How I do it: ! @media  all  and  (min-­‐width:  30em)  {          .col-­‐50,  .col-­‐33,  .col-­‐40,  .col-­‐60  {          float:  left;          }          .col-­‐50  {  width:  50%;  }          .col-­‐33  {  width:  33.33%;  }          .col-­‐40  {  width:  40%;  }          .col-­‐60  {  width:  60%;  }   }
  31. One More Thing

  32. Don’t forget to set the viewport! <meta  name="viewport"  content="width=device-­‐ width,

     initial-­‐scale=1”>   ! (goes in the <head>)
  33. Resources http://www.adamkaplan.me/grid/ http://bradfrost.github.io/this-is-responsive/ http://codepen.io/ojbravo/pen/owbLa