Introduction to Responsive Design

Logan Franken
Logan Franken
@loganfranken
goo.gl/gDEqLi
goo.gl/x6BUze

What is it?

Responsive Web Design (RWD) transforms to fit the needs and capabilities of the User's device.

What Does That Mean?

What Does That Mean?

Browser Size

But Also:

But Also:

Examples

But Why?

One

Future-Proof

Design

One

Future-Proof

Design

One

Future-Proof

Design

What's Involved?

What's Involved?

  • Media Queries

What's Involved?

  • Media Queries
  • Responsive Media

What's Involved?

  • Media Queries
  • Responsive Media
  • Flexible Grid

The Media Query

@media (expression)
{
   /* CSS */
}
@media (max-width: 600px)
{
   /* If viewport is 600px or less */
   .info
   {
      width: 50%;
   }   
}
@media (min-width: 300px)
{
   /* If viewport is 300px or more */
   .callout
   {
      float: left;
   }   
}
@media (max-device-width: 400px)
{
   /* If width of actual screen
      is 400px or less          */
   .input
   {
      width: 100%;
   }   
}

Just the Surface

Let's Start Coding