Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Tenets of Responsive Design

thebeckyhamm
March 18, 2014

The Tenets of Responsive Design

thebeckyhamm

March 18, 2014
Tweet

More Decks by thebeckyhamm

Other Decks in Design

Transcript

  1. 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
  2. @media  all  and  (min-­‐width:  30em)  {        

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

    @media  all  and  (min-­‐width:  30em)  {          .column  {                  float:  left;                  width:  50%;          }   }
  4. @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)
  5. img  {         max-­‐width:  100%;    

        height:  auto  !important;   } The Best Way I’ve Found So Far
  6. 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%;
  7. 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.
  8. 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%;
  9. .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%;  }   }