GOVT4 Coding

Responsive Layout

‘The centred layout is as static and conventional as a tombstone’: for a long time (let’s say, 2006–2012) the web focused on websites of 960px wide.

The 960 Grid System is a good example of this CSS aproach. I’ve used it myself: if the margins are the same background colour as the main column, it is not as apparant as in the examples that follow.

Still, the downsides to this approach are clear: users with a very large monitor will have huge swaths of space on the site, whereas users of a very small monitor or a mobile device will have a site that does not fit into the screen.

An initial solution to this problem was to create dedicated versions of a site for mobile applications. But this requires a lot of extra time and resources, and both for Google and for the purpose of sharing on social networks, it is not handy to have multiple webpages that have the same content. An alternative approach comes by the name of Responsive web design, a title donned by Ethan Marcotte in his 2010 A List Apart article. With responsive web design, the design knows how to adapt itself to the device that visits the website, and most importantly to the width of the screen.

The underlying mechanism that makes this possible is a feature of CSS3 known as Media Queries. A media query allows to execute bits of CSS only when a certain condition is met. For example:

/* by default, our headings are pretty large */
h1 {

/* but when the screen is small (no larger than 480px) */
@media screen and (max-width: 480px) {
    /* we want smaller headings*/
    h1 {

You might also have noticed that the navigation changes lay-out. On a small screen, it is better on top. On a large screen, we want it to the side. So we say:

@media screen and (min-width: 480px) {
    nav {
        width: 200px;
        float: left;     /* This makes it float to the left of the main content */
        margin-left: 0;

Finally, media queries also work for print. In our print version, we don’t want to show the navigation:

@media only print {
    nav {
        display: none;

The CSS shown aboved is based on the CSS of this website. You can check out the source files. If you are a student in the class at the KABK, you will have direct access to modify these files.

A website, by the way, needs one addition if you are going to use a responsive CSS as shown above. Somewhere in the top, put:

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

Because so many web designs are made to work around 960 pixels, by default iPhone like phones zoom out to show your design at 960 wide. The META tag tells the phone that it should show the site at the phone’s ‘native’ width (which, for the iPhones up until 5S is 320 pixels).

800 480 Vaiocp1with Remote Lg

1024 600 Maxi ASUS EeePC900 Foto1

1024 768 02ibook 3q

1280 800 B Nb 6820s

1280 1024 FlexScanS1701

1440 900 1680 1050 04imac Fam

1600 1200 S2100

1920 1200 Mon Angl308

2560 1600 FlexScanSX3031W