Responsive Web Design

Components

by Eric Bollens

ebollens [GitHub] / ebollens [LinkedIn] / @ericbollens [Twitter]

The Web is Flexible

The control which designers know in the print medium... is simply a function of the limitation of the printed page.

We should embrace the fact that the web doesn't have the same constraints, and design for this flexibility.

~ John Allsopp, A Dao of Web Design

The Shackles of 960

Designers think in terms of 960px

Pinch and zoom on mobile devices
Waste of space on large screens

The Flexible Grid

Proportional design

Percentages, not pixels

But what about those pretty Photoshop designs?

target ÷ context = result

Works for widths, heights, fonts, margins, etc.

#header, 
#footer, 
#container {
    width: 960px;
    margin: 0 auto;
}

#container #menu {
    float: left;
    width: 180px;
}

#container #content {
    margin-left: 190px;
    width: 770px;
}

#header, #footer, 
#container {
    width: 93.75%;  /* 960 ÷ 1024 = .9375 */
    margin: 0 auto;
}

#container #nav {
    float: left;
    width: 18.75%;  /* 180 ÷ 960 = .1875 */
}

#container #main {
    margin-left: 19.791667%; 
                    /* 190 ÷ 960 = .1979166.. */
    width: 80.208333%; 
                    /* 770 ÷ 960 = .8020833.. */
}

body {
    font: normal 100%;
}

#container #main h1 {
    font-size: 24px;
}

body {
    font: normal 100%;   /* 16 */
}

#container #main h1 {
    font-size: 1.5em;    /* 24 ÷ 16 = 1.5 */
}

Breaking the Flexible Grid

Still has limits

Small screen
constricts content

Large screen
isolates content

The Mobile View

In addition to 960, you might also have a mobile design

We need to get between the two - with one site!

Media Queries

Originally in CSS 2 for media types

http://www.w3.org/TR/CSS2/media.html#at-media-rule

Became its own module in CSS 3 for media sampling

http://www.w3.org/TR/css3-mediaqueries

@media (max-width: 479px){ }            @media (min-width: 480px){ }
@media (max-height: 479px){ }           @media (min-height: 480px){ }
@media (max-device-width: 479px){ }     @media (min-device-width: 480px){ }
@media (max-device-height: 479px){ }    @media (min-device-height: 480px){ }
@media (orientation: portrait){ }       @media (orientation: landscape){ }
@media (min-aspect-ratio: 16/9){ }      @media (max-aspect-ratio: 16/9){ }
@media (min-deviceaspect-ratio: 3/2){ } @media (device-aspect-ratio: 16/9){ }
@media (min-color: 8){ }                @media (max-color: 32){ }
@media (min-color-index: 256){ }        @media (max-color-index: 65536){ }
@media (min-resolution: 300dpi){ }      @media (max-resolution:299dpi){ }
@media (min-resolution: 300dpi){ }      @media (max-resolution:299dpi){ }

#header, 
#footer, 
#container {
    width: 93.75%;
    margin: 0 auto;
}

#container #nav {
    float: left;
    width: 18.75%;
}

#container #main {
    margin-left: 19.791667%;
    width: 80.208333%;
}

@media (max-width: 640px){
    
    #container #nav {
        float: none;
        width: 100%;
    }
    
    #container #main {
        margin-left: 0;
        width: 100%;
    }
    
}

Viewport Tag

Mobile browsers assume desktop pages
but the viewport tag lets us specify otherwise

<meta name="viewport" content="width=device-width,initial-scale=1">

NOTE: Non-normative but well-supported

Responsive Images

Images have fixed size

When we go fluid, what happens?

Except that doesn't actually happen...

Responsive Image One-Line Fix

Use the max-width property

img {
    max-width: 100%;
}

http://clagnut.com/blog/268/

Works for more than just images

img, embed, object, video {
    max-width: 100%;
}

That's just the start

So let's open it up... Questions?

ebollens.github.io/edu13-responsive-components

ebollens [GitHub] / ebollens [LinkedIn] / @ericbollens [Twitter]