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. 3.
  2. 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
  3. 7.
  4. 8.
  5. 9.
  6. 10.
  7. 12.
  8. 16.

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

     [insert  your  CSS  here]   } "If [device width] is greater than or equal to [30ems], then do {...}"
  9. 17.

    .column  {     width:  100%;   }   !

    @media  all  and  (min-­‐width:  30em)  {          .column  {                  float:  left;                  width:  50%;          }   }
  10. 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)
  11. 21.
  12. 22.
  13. 23.

    img  {         max-­‐width:  100%;    

        height:  auto  !important;   } The Best Way I’ve Found So Far
  14. 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%;
  15. 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.
  16. 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%;
  17. 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%;  }   }