An Introduction To Responsive Layouts

Feeds

Monday, 26th March 2012

Back in olden times, people designed websites to work on an 800 pixel by 640 pixel screen. After a while, screens were upgraded to 1024 pixel by 768 pixel screens and this made a big difference to web design, because it meant that you could afford to have some white space. On the whole, people aimed for a fixed-width design that used 960 of those 1024 pixels. At this time, if you had a smaller screen you had to use a horizontal scroll-bar and if you had a bigger screen you were either a millionaire or a James Bond villain (or both).

Another technique that worked well in the "era of 1024" was the liquid layout. Instead of saying "my page is 960 pixels wide" you would state "my page is 90% wide". This meant it would squish down to smaller screens, where you would have less words per line and increase to larger screens in which case you would have more words per line.

As screens got bigger (and more numerous with people using two or three monitors to spread out their desktop), liquid layout encountered a problem. 90% of 1680 pixels creates a page with far too many words per line and the page looks terrible just as the content is unreadable. On the whole, the solution was to put a maximum width on the page to prevent it from expanding too far.

This was all well and good until some bright spark managed to squeeze the World Wide Web onto a mobile phone and today, with all sizes of tablets and smart-phones available layout is no longer simply a matter of screen size or pixel-counts, now we have displays that rotate, devices with touch-screens and no mouse or keyboard and displays that have more pixels than the human eye can detect. Wow.

Responsive Layouts

Also known as responsive design or adaptive design, responsive layouts are a method by which you can optimise your web pages based on asking the browser some simple questions using media queries. Not only can you change the width of your page, you can remove or re-position elements and make interactive elements easier to use. For example, you can convert your three-column desktop design into a single-column mobile-friendly page with big touch-friendly elements.

Responsive

Media Queries

A media query is a statement that enables you to load different style rules based on information about the browser. You can be as complicated as you like, but I prefer to use the width of the browser. Using the browser width means that you can suit the preference of the visitor, who may not run their browser in full-screen mode. If the browser is fighting for space on a large display, it may have only been allocated 50% of the device width, so by responding to the browser width rather than the device width, we can improve the experience in this scenario by reducing the need to scroll horizontally.

I also tend to use media queries at the stylesheet level rather than inside the stylesheet. This means I can have a master stylesheet that deals with my default design (you can design mobile-first, or adapt a desktop design downwards). I find that it is easier to manage a set of stylesheets than it is to manage a single stylesheet with lots of media queries inside. The stylesheets you write to adapt your design only need to contain a very small number of rules that override the defaults.

Making It happen

I'm going to start with a simple example. You may find that this is enough, or you might just use this as a spring-board to taking the techniques to a whole other level. The idea behind this example is to demonstrate how easy it is to add responsiveness to your web page.

The first step is to decide what browser-sizes you want to support. Each size you support will become a layout-step and you will need to make the design work from the minimum size of your step up to the minimum size of the next step. For example, if you supported three steps; less than 720 pixels, 720-1,000 pixels and more than 1,000 pixels, the middle step would need to work at 720 pixels, but also look good all the way up to 1,000 pixels.

You can then set up the stylesheets with the appropriate media queries:

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" media="only screen and (min-device-width: 720px) and (min-width: 720px) and (max-width: 999px)" href="style-medium.css">
<link rel="stylesheet" media="only screen and (min-device-width: 720px) and (min-width: 1000px) and (max-width: 1449px)" href="style-large.css">
<link rel="stylesheet" media="only screen and (min-device-width: 720px) and (min-width: 1450px)" href="style-x-large.css">
<link rel="stylesheet" media="only screen and (max-device-width: 719px), (max-width: 719px)" href="style-small.css">
<link rel="stylesheet" media="only screen and (max-device-width: 480px), (max-width: 480px)" href="style-x-small.css">

Media queries are not supported in older browsers, so you may find the following conditional statement useful, which you can use to default to a stylesheet of your choice where media queries are not supported.

<!--[if lt IE 9]>
<link rel="stylesheet" href="large.css">
<![endif]-->

So in your default stylesheet you would have all of your layout and colour rules. Then in "small.css" you would override the styles to make it work for a smaller display, for example by making the links bigger to make them more touch-friendly.

Images and Form Fields

The final details of how responsive images might be included in the HTML5 specifications is still up for discussion. Until the decision has been made, you can safeguard your site against nasty overlapping by adding a maximum width to your images. This means the image will scale down to fit within the space available to it. Ideally, you would be able to specify image sources based on the device, so you could supply a high-resolution image for desktop browsers and a smaller file to make mobile downloads faster. In the meantime, this fix keeps your layout looking good but doesn't solve the download speed issues.

img {
    max-width: 100%;
}

This is also a handy trick for other elements that could interrupt the resizing of your page, such as form elements.

input, textarea, select {
    max-width: 100%;
}

Live Example

If you would like to see a demo of this, the great news is that you are looking at one. I am using this basic technique on my website right now. If you resize your browser you'll see that the design steps when you drop below 1,000 pixels and again when you drop below 720 pixels. In the smallest version of the layout, it drops to a single-column and makes the main menu much bigger.

Once you have got the hang of the basics, you can experiment with all kinds of clever tricks, not just re-sizing, but adjusting layouts, background-images and even removing unimportant content as you downsize the page.

Here is an explanation of the rules used on this website as of April 2012, which highlights that you aren't aiming for a stylesheet-per-device, but rather the right combination of small overriding style rules on top of a master stylesheet.

<link rel="stylesheet" href="style.css">

The master stylesheet, contains all your style rules for your default layout. This is the stylesheet you are most likely to edit when you want to change something.

<link rel="stylesheet" media="only screen and (min-device-width: 720px) and (min-width: 720px) and (max-width: 999px)" href="style-medium.css">

Where the device is 720px wide or more and where the browser is between 720px and 999px, this stylesheet adjusts the layout to fit within the area without horizontal scrolling. This stylesheet only contains the rules required to override the layout to suit the size of the browser.

<link rel="stylesheet" media="only screen and (min-device-width: 720px) and (min-width: 1000px) and (max-width: 1449px)" href="style-large.css">

Where the device is 720px wide or more and where the browser is larger than 1000px and smaller than 1450px, this stylesheet adjusts the layout to use more of the available space. Again, this only contains the rules required to override the default stylesheet.

<link rel="stylesheet" media="only screen and (min-device-width: 720px) and (min-width: 1450px)" href="style-x-large.css">

Where the device is 720px wide or more and where the browser is larger than 1450px, this stylesheet adjusts the layout to use more of the available space. Again, this only contains the rules required to override the default stylesheet.

<link rel="stylesheet" media="only screen and (max-device-width: 719px), (max-width: 719px)" href="style-small.css">

Where the device is less than 720px wide, this stylesheet will adjust the layout to suit a tablet or mobile device. The rules in here are likely to layout the content in a single column with nice big touch-friendly clickable links. The max-width declaration means that if you make your browser window tiny on a larger device, you'll see the mobile layout. This is useful for testing and also if you want to support squished browser sizes on a desktop.

<link rel="stylesheet" media="only screen and (max-device-width: 480px), (max-width: 480px)" href="style-x-small.css">

Note that the previous stylesheet for devices less than 720px still applies and this is an additional stylesheet that will apply where the device is even smaller. This stylesheet simply makes the text bigger to work on mobile phones without the need for zooming.

<!--[if lt IE 9]>
<link rel="stylesheet" href="style-large.css">
<![endif]-->

As we know Internet Explorer versions prior to version 9 don't support media queries, we can choose one to use as a default. We know the user is not on a cool mobile device because cool mobile devices are running Internet Explorer 9 or newer.

Steve Fenton