Responsive Web Design

Responsive web design mind map
A responsive website is one that looks acceptable and functions correctly on any browser, screen size and device used to access the web. To accomplish this you need to have:

Years ago I longed for the day when everyone viewed web sites on big screens and I no longer had to limit my designs to 800 px wide. That day didn’t come! instead screen sizes got smaller and smaller. Now some people only access the web on their smart phones or tablets. So what does this mean for you as you build your web site? You have a challenge to make your site look good on a great big screen and a tiny little smart phone and everything in between. This is where Responsive web design comes in to play.

large red screen with small log-in area
Bank web site with mobile version opening on large screen

Some designers serve up different web sites for different devices but this method is fraught with problems as there is no way of predicting every device that will come on to the market and sometimes the designers get it wrong; for example recently I opened a bank log-in site on my large screen home computer in safari browser and was served their minimal mobile site.

I am in favour of creating one site and making it responsive with CSS media queries. Too hard? Fortunately there are some very clever people who have made responsive frameworks for you to work with. A popular one of these is Twitter Bootstrap. This framework is based on a 12 column structure giving you quite a bit of flexibility in designing your site.

Ethan Marcotte first introduced the term Responsive Web Design in an article for A List Apart in 2010. The main principles of Responsive Web Design are:

top ↑

Fluid Layout

In a fluid layout the width of the columns are determined by percentage rather than pixels or other fixed measurement. For example the main column may be 70% while the side column 30%. This means that as the browser window changes size the relative width of the columns also change size and the dreaded horizontal slide bar is avoided.

Fluid layout on its own does not answer all the requirements for a responsive website. For a small device the columns may become too small to read and for a very large screen the line length  may be too long for comfortable reading. You can set a max-width property on your containing div to ensure that the line length does not become too long.

top ↑

Media Queries

You can specify how your site looks at different screen sizes using media queries in your site’s style sheet. For example your site heading may look great on a PC but not so good on a tablet or iPad. You can set a media query as follows:

@media screen and (min-width:320px) and (max-width:768px) {
h1{
font-size: 1.2em;
}
}

The media query starts with an @ sign to indicate that this an at rule and in the @media rule you can specify different types of conditional statements.

“@media screen” is telling the browser that this rule only applies if the site is viewed on a screen. “@media print” would dictate how the site would print.

The word and indicates that two or more conditions need to apply before the rules inside the curly brackets take effect. In the above example the media needs to be screen and the width of the screen is greater than 320px and smaller than 768px. All the rules for this query are placed inside the curly brackets.

Media queries are supported by all the popular browsers except IE8 and below. I hazard to guess there are not too many mobile devices using IE8 and the main browser.

You need to position your media queries below your main css styles because any rules positioned after the media queries would overrule the styles in the media queries.

top ↑

Responsive Images

It is quite simple to make images and media respond to different size windows using css.
with the following code images will shrink to the size of the screen when they get too large.
img {
max-width: 100%;
}

top ↑

Viewport

Including the following meta tag in the head of your website is important if you want to pass the Google Mobile-Friendly Test.

<meta name=”viewport” content=”width=device-width, initial-scale=1″>
Do not add maximum-scale=1 to your viewport meta tag. If you do, your visitors will not be able to enlarge the text on the screen in a mobile device. This is likely to make them very angry and leave your site because they are unable to read the text.

Here is an example of results of a website that is not mobile friendly.

A site that fails the mobile friendly testDifferent mobile browser screens have different number of dpi (dots per inch). The viewport meta tag ensures that your site at 100% fits into the mobile browser window. The initial-scale property controls the zoom of the site. If the screen width is 320 dpi the initial-scale of 1 is equal to 320 ppi (pixels per inch).

If you don’t understand all this then just trust me and include the above meta tag in the head of your website and you will have taken one step towards making your site responsive.

The best way to test your site to see if it is mobile friendly is to take a look at it on a range of mobile devices. Ask your friends to have a look on their phones too to test it on a range of mobile devices. If you don’t have any friends you can test your site at Quirktools screenfly

top ↑

Stop your Website Scrolling Horizontally

If you are finding that you have made all the adjustments listed above and your site passes the Google Mobile-Friendly test but it still scrolls horizontally then include the following lines in your style sheet.
html, body {
width: 100%;
overflow-x: hidden;
}

Often the cause of this problem is a padding value on a container that is set to 100% wide.

The use of mobile devices is growing. People use their phones to check information or just browse the web when they are away from home. People use their tablets and iPads when they are watching TV. Some people cannot afford desktop computers so their phones are the only way they can access the web. Making your site responsive is no longer a luxury but a necessity.