The Tenets of Responsive Design

Responsive Design basics.

The article that started it all:
http://alistapart.com/article/responsive-web-design/

Image Optimizers:
http://www.imageoptimizer.net/
https://kraken.io/web-interface

Responsive Resources / Tutorials:
http://www.adamkaplan.me/grid/
http://bradfrost.github.io/this-is-responsive/
http://codepen.io/ojbravo/pen/owbLa

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