CAS215 Project

Responsive Web Design

Responsive web design is a new design philosophy that is different from fixed design. In responsive web design, page layouts adjust according to the size of the end user's display; in fixed design, sizes of fonts, box elements and images remain unchanged.

In the past, only desktop and laptop computers were used to surf the web. It was a given that screen resolutions would be 1024 pixels wide or higher. Fixed grid CSS frameworks such as 960 Grid System were used to design pages that were laid out in even columns on a fixed-width grid, usually centered on the screen. As mobile devices began to hit the market, it became necessary to create web pages that would work on many devices and resolutions. As the number of devices grows (watches that surf the web are on the horizon), the more important it will be to write responsive sites.

Mobile First Design

Mobile first design is the next step in responsive web design. In mobile first design, the primary CSS is written for mobile. Then, the cascade later contains media queries that add more code for larger device resolutions.

Better mobile first web design

Some designers write their CSS media queries so that they only affect resolutions that are between two specific break points:

h3 {
    font-size: 1.75em; 
}

@media (min-width: 321px) and (max-width: 480px) {
    h3 {
        font-size: 2em;
    }
}

This approach is severely limiting. What if there was CSS code that is useful for all resolutions above 320 pixels, including those 480 pixels and above? Writing media queries in this way means that some code will need to be redeclared later.

We will try a different approach. Our media queries will gradually add to the style of the page the larger the resolution goes, like this:

h3 {
    font-size: 1.75em;
}

@media (min-width: 321px) {
    h3 {
        font-size: 2em;
    }
}

See the difference? If an h3 size of 2em happens to work in every browser width above 320 pixels, we're in good shape.