Making your website responsive can seem a daunting task, but it turns out that once you get started, responsive web design is actually a pretty simple concept that’s also easy to implement.

And it can totally be done without ever touching any mobile frameworks, responsive grids, user agent sniffing scripts, javascript hacks, redirects or using funny math for column widths (no 33,63636363%s) or rewriting your entire code.

All that’s needed are some well placed media-queries and a bit of common sense. That’s how I made my whole website responsive and I’ve showcased the process in a small and easy tutorial below.

the very simple responsive web design tutorial

To illustrate how simple making your website responsive really is, I’m going to show you the process I took to turn the homepage of my website responsive, focusing on the header area. To see how I made the rest of my website responsive, you can just peek in the source code of various pages to see how I handled multicolumn pages, forms and more.

But for now, let’s start simple, with the header area.

mobile screen1

What we have here are just two nested divs, one on the outside with a 100% width and one that has all the text with a fixed width of 980px and centered using margin: auto. Pretty standard stuff so far.

The html looks like this:

<div id="content">		
	<div id="intro">
		...
	</div><!-- end of intro div -->			
</div><!-- end of content div -->

Now, let’s see what happens when we resize the browser window!
screen2

So the div with 100% width resizes nicely with the browser, but as soon as the witdth of the browser gets smaller than 980px, the inner div with fixed pixel width (980px) hangs outside the viewport and is no longer centered in the browser. So there we have it, our first media query breakpoint: 980px.

@media screen and (max-width: 980px) {
	#intro {
		width: 100%;
	}
}

In this media query, what we’re basically doing is overwriting the original fixed 980px width with a flexible 100% width instead, so our #intro div will stretch across the browser the same way as it’s container div. The @media screen and (max-width: 980px) {…} bit tells the browser to activate the following CSS code when the window is smaller than 980px wide.

And there we go, we now have a responsive header!
responsive web design tutorial - screen3

Next, it’s time for some tweaking! Notice how the text runs right to the edges of the browser. We need to add some whitespace there to make things easier to read. So we go back to our media-query and add some padding. Notice the padding is a percentage, not a fixed pixel value (% and pixels don’t mix well together) and the % of padding we add gets subtracted from the total width of the div.

@media screen and (max-width: 980px) {
	#intro {
		padding: 0 5%;
		width: 90%;
	}
}

responsive web design tutorial - screen4

That’s better! Now, another thing we notice is that as the browser window gets smaller and smaller, the text looks way too big compared to the horizontal space available, especially the “hi, there!” text. Time for some more media-queries!

This is not an exact science, you basically just play around with the width of the browser window and resize the text accordingly with media queries by adding more breaking points as you go.

Here’s how the final css code looks:

@media screen and (max-width: 980px) {
	#intro {
		padding: 0 5%;
		width: 90%;
	}
}

@media screen and (max-width: 570px) {
	#intro h2 {
		font-size: 90px;
	}	
	#intro h3 {
		font-size: 30px;
		line-height: 1em;
		padding: 0 0 15px 0;
	}	
	#intro p {
		font-size: 17px;
		padding: 0 5%;
	}
}

@media screen and (max-width: 400px) {
	#intro h2 {
		font-size: 80px;
	}	
	#intro h3 {
		font-size: 26px;
	}
	#intro p {
		font-size: 16px;
	}
}

And here’s the result:
responsive web design tutorial - screen5.1

And we are done with making the header responsive!

A few tips about resizing text with media-queries:

  • set a minimum font-size that’s readable in a handheld device (14px is a good starting point, but depends on the font you use). Testing in a real device is very valuable at this point.
  • there is such a thing as text that’s too large. Having just 3-4 words per row works for headers, but for body text it gets annoying and tiring pretty damn quick.
  • pay also attention to the line height and the spacing between header and body text. You want to aim for a good balance between enough whitespace to keep things readable, but also keep text compact enough that it doesn’t need insane amounts of scrolling.
  • for the love of god, don’t justify the text!

Don’t forget to look through the source code of my website to see some media-queries in action in more complex settings (multiple columns, responsive images, forms and more).

But before you get going with your responsive website, you should first read…

some important points about content in responsive web design

There were many assumptions made in the past about mobile users and their behavior that often meant that users on mobile devices got a slimmed down experience. But as it turns out (over and over again), mobile users do want to access the full experience, just without all the useless content junk (related articles, latest comments, tag clouds, meaningless seo text and so on). But then again, who doesn’t?

The reason for all the content junk is that often in traditional desktop websites, content blocks have been used as a design element, to fill in an empty spot on the home page, while adding no real value to the user experience.

If you think some content shouldn’t be on mobile, chances are it’s not that important anyway so maybe it shouldn’t be on desktop either.

Another important point is that users can access the same website from different devices and will expect to find the same content (as pointed out in this article). It can be very frustrating trying to find something you know was there, but now, just because you’re on mobile, is randomly gone.

The bottom line is going responsive/mobile does not mean just hiding some content when the screen gets too small.

So before you transition your website to a responsive design, think long and hard about all the content blocks you have and if they’re really needed at all or are they only there to make the design look “balanced”. Now is the perfect time for some clean up and get rid of the useless stuff.

and a few more tips for for mastering responsive web design

  • it’s all about the content
  • so media-query breakoints should be decided based on content, not on the resolutions of the phones/tablets that are popular right now (there are dozens of new devices with different resolutions launched each year)
  • Add this to your page code in the head area to get your media-queries working on iOS: <meta name=”viewport” content=”width=device-width; initial-scale=1.0″>.
  • don’t disable user zooming
  • don’t disable user scrolling
  • don’t force one screen orientation over the other just because your design looks best in one of them
  • generally, don’t mess with usability just for aesthetics sake
  • when the website gets smaller, the content should reflow in order of relevance.
  • try to make your content easy to scan and read, I especially like using this mobile pattern for showing/hiding text by clicking on headers for secondary content blocks
  • avoid using fixed navigation bars that eat precious real-estate especially on wide screens in landscape orientation.
  • always, always, always test on real mobile devices, not just resized desktop browsers especially if you use lots of javascript on your site (you might be surprised of the different performance).
  • use percentages instead of fixed pixel sizes for things like widths, paddings, margins wherever possible
  • check out this collection of responsive design patterns for some good mobile patterns for navigations, columns, galleries and more.
  • try to avoid all the bad/funny stuff on http://wtfmobileweb.com/

Share this article