CAS215 Project

Image of a designer with a wireframe.

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.

Image of blurred E-Commerce store.

Features of Fixed Design

  • A fixed page width in pixels, often centered in the browser window.
  • Images are set at fixed widths.
  • Font sizes are set at fixed pixel or point sizes.
Burred image of computer and cup of coffee.

Features of Responsive Design

  • Page and box element widths are set in percentages.
  • Image widths are set with percentages, often at 100% to fill available width.
  • Font sizes are set with em sizes, so that they are sized relative to the parent element's font size.
  • The primary style sheet is for desktop devices, and media queries are used toward the end of the cascade to account for mobile devices.
Picture of Art Pencils.

Features of Mobile First Design

  • The primary style sheet is for mobile devices, and media queries are used toward the end of the cascade for tablet, then desktop devices.
  • As a result of this change, web site interfaces are simpler and their design is much cleaner. There is far less CSS to write.