A responsive web design tutorial. Part one – make any site’s structure responsive using media queries

Responsive web design. It’s flavour of the month, talk of the town, everybody wants to get involved in the responsive dream, and quite rightly so.

According to various statistics which surface online (and believe me, there’s a lot of them), mobile internet usage is massively on the rise – and it shows no signs of stopping. The days of building websites strictly for desktops is now over, and it’s a very attractive skill to be able to make sites respond with all the grace of a majestic swan – customers love it, users love it, conversion rates go up, bounce rates go down, everybody’s happy!

The main methodology for responsive web design which is being coined is the “mobile first” methodology. Building a website with mobile first in mind will mean that you start from the ground up, building your site initially for browsers with a width of 320px (hence the mobile first boilerplate 320 and up) and then adding more styles as the page width increases to affect the layout in whichever way you see fit. I’ll go through building a site with mobile first in mind in a later blog post.

This is all well and good in an ideal world, but we don’t live in an ideal world, and a lot of businesses simply want to “bolt on” responsiveness to their site (after all, they may have only had their site rebuilt last year, why rebuild the whole thing). Luckily, with the clever use of media queries in an external CSS file, this is a straightforward process – and in this post, I’ll run you through the basic things you need to know to get you started.

Why use an external media query css file?

Depending on the environment which your site is being built in (if there are UAT/staging servers or multiple people doing code edits/deployments), it can sometimes be easier to use an external file to harness the media queries. This means if code edits are going on parallel to your work, or you or other users are editing the css, there isn’t a risk of breaking the site whilst you make your clients responsive dreams come true. Also, it’s good from a standpoint of A/B testing, you can then try multiple approaches to responsive, using either fixed width or percentage width in different files, to see which you or your client prefer.

The site layout

For this example I’m assuming that you have a standard site with two columns, a header and a footer. Nav will be included but I’m saving this for part two, as I feel that’s a post on its own!

The code for the layout illustrated is included at the bottom of the page if you need something to work from.

To get started, create your empty CSS file, name it something useful like “media_queries.css” or somesuch and include it as you would any other stylesheet.

Defining the media queries

Let’s get into the nitty gritty. With your new empty stylesheet open we’ll begin to add in the media queries. I’ll give a brief explanation of the structure after the code.

Disclaimer: This is assuming your site is running a fixed width layout to start with. Let me know if you want any fluid width insights.

@media only screen and (max-width: 1024px){
}
@media only screen and (max-width: 768px){
}
@media only screen and (max-width: 480px){
}
@media only screen and (max-width: 320px){
}

So these are our four media queries, let’s take a look at them in more detail.

Firstly we have our “max-width 1024px” media query. This is where a lot of the magic happens, if not a good 75% of the modifications in my code, as the smaller screens will inherit these (as their max-width is under 768px).

Secondly is iPad portrait, this is where the main layout changes will occur. Say goodbye to column widths in favour of single column layouts! This is usually the point where floats will be reset.

The last two queries cover the mobile aspect, this is to get really specific and usually covers modifications of fonts (this is important too, I’ll cover this in a little while), image sizes and any layout changes which may occur as a result of using a really small screen.

Time to reset the styles

So, once the screen reaches 1024px we want the responsiveness to begin. So let’s start from the start.

With responsive design a bit of mathematics is involved so get your calculator at the ready! We’ll use the example here that the size of your screen is 960px in total, with internal padding of 20px, so the actual specified width is 920px (as 920 + 20 + 20 = 960). As a reference to the typical layout we’re using take a look at the image to the right.

Firstly, work out the percentage width of the #container div. This is done using a simple calculation:

(Width to turn into a percentage/width of the container) * 100

Simple eh? This gives us a width of 95.83333333333333% so put this in your stylesheet. Next we need to calculate the padding using the same formula (you can either use the formula or just take the calculated content width off of 100 and divide the result by 2) – 2.083333333333335%.

It’s also worth at this point doing the same with the #content and #aside elements. For this example the #content element is at a width of 600px, with a right margin of 20px and the #aside a width of 300px. To work these out you need to slightly modify the above formula:

(Width to turn into a percentage/(width of the container – container padding) * 100

Therefore to work out the percentage of the #content it would be like so:

(600/(960 – 40) * 100 = 65.21739130434783

Do the same for the #aside and the margin on the #content and you’re all set.

If your header and footer aren’t already set to 100% at this point (and they should be as they’re consistently 100%, you can set that now).

Right now your site should be flexing nicely when it gets under 1024pixels. Which is good, but what about when it gets below 768px? We don’t want the #aside div getting in the way any more. So let’s start to take that apart. This is the point where resets start to really come into their own, and the 100% width becomes your best friend!

Set both the #content div and the #aside div to 100%, and remove the #content div’s right margin. It’s also worth at this point setting their float’s to float:none and also put a bottom margin on the #content div.

That’s it for part one! Hopefully by now you’ll have a site with a structure that flexes all the way through the various viewport sizes. In the next part we’ll cover different options for responsive navigation changes and how to achieve them.

Full responsive source code

@media only screen and (max-width: 1024px){
	#container{
		width: 95.83333333333333%;
		padding: 2.083333333333335%;
	}
	#content{
		width: 65.21739130434783%;
		margin-right: 2.083333333333335%;
	}
	#aside{
		width: 32.60869565217391%;
	}
}
@media only screen and (max-width: 768px){
	#content{
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
		float: none;
	}
	#aside{
		width: 100%;
		float: none;
	}
}
@media only screen and (max-width: 480px){
}
@media only screen and (max-width: 320px){
}

Live preview/download

Live demo | Download the files

Conclusion

As you can see, it’s pretty straightforward to start getting a site responsive. Next time we’ll expand on that to make your navigation responsive

Enjoy this article? Let your friends know

Comments - have your say!

  • Jean

    I am very new at all this and am learning by reading on the internet. This article is very clearly written. Your explanations of the “whys” and not just “how” helps greatly.