Making a website responsive in 3 easy steps

by Jean. 32 Comments -

Today, a website must not look good only on a desktop screen, but also on tablets and smartphones. A website is responsive if it is able to adapt to the screen of the client. In this article, I’ll show you how to easily make a website responsive in three easy steps.

1 – The layout

When building a responsive website, or making responsive an existing site, the first element to look at is the layout. When I build responsive websites, I always start by creating a non-responsive layout, fixed at the default size. For example, CatsWhoCode.com default width is 1100px. When I’m pleased with the non-responsive version, I add media queries and slight changes to my code to make the code responsive. It’s way easier to focus on one task at a time.

When you’re done with your non-responsive website, the first thing to do is to paste the following lines within the <head> and </head> tags on your html page. This will set the view on all screens at a 1×1 aspect ratio and remove the default functionality from iPhones and other smartphone browsers which render websites at full-view and allow users to zoom into the layout by pinching.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

It’s now time to add some media queries. According to the W3C site, a media query consists of a media type and zero or more expressions that check for the conditions of particular media features. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself. In other words, media queries allows your website to look good on all kinds of displays, from smartphones to big screens.

Media queries depends of your website layout, so it’s kinda difficult for me to provide you a ready to use code snippet. However, the code below is a good starting point for most websites. In this example, #primary is the main content area, and #secondary the sidebar.

By having a look at the code, you can see that I defined two sizes: The first have a maximum width of 1060px and is optimized for tablet landscape display. #primary occupies 67% of its parent container, and #secondary 30%, plus a 3% left margin.

The second size is designed for tablet portrait and smaller sizes. Due to the small sizes of smartphones screens, I decided to give #primary a 100% width. #secondary also have a 100% width, and will be displayed below #primary.

As I already said, you’ll probably have to adapt this code a bit to fit the specific needs of your website. Paste it on your site .css file.

/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

Once done, let’s see how responsive your layout is. To do so, I use this awesome tool created by Matt Kersley.

2 – Medias

A responsive layout is the first step to a fully responsive website. Now, let’s focus on a very important aspect of a modern website: medias, such as videos or images.

The CSS code below will ensure that your images will never be bigger than their parent container. It’s super simple and it works for most websites. Please note that the max-width directive is not recognized by older browsers such as IE6. In order to work, this code snippet have to be inserted into your CSS stylesheet.

img { max-width: 100%; }

Although the technique above is efficient, sometimes you may need to have more control over images and display a different image according to the client display size.

Here is a technique developed by Nicolas Gallagher. Let’s start with the html:

<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">

As you can see, we used the data-* attribute to store replacement images urls. Now, let’s use the full power of CSS3 to replace the default image by one of the specified replacement images if the min-device-width condition is matched:

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

Impressive, isn’t it? Now let’s have a look to another very important media in today’s websites, videos.

As most websites are using videos from third parties sites such as YouTube or Vimeo, I decided to focus on the elastic video technique by Nick La. This technique allows you to make embedded videos responsive.

The html:

<div class="video-container">
	<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

And now, the CSS:

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Once you applied this code to your website, embedded videos are now responsive.

3 – Typography

The last step of this tutorial is definitely important, but it is often neglected by developers when it comes to responsive websites: Typography.

Until now, most developer (including myself!) used pixels to define font sizes. While pixels are ok when your website have a fixed width, a responsive website should have a responsive font. Indeed, a responsive font size should be related to its parent container width, so it can adapt to the screen of the client.

The CSS3 specification included a new unit named rems. They work almost identically to the em unit, but are relative to the html element, which make them a lot easier to use than ems.

As rems are relative to the html element, don’t forget to reset html font size:

html { font-size:100%; } 

Once done, you can define responsive font sizes as shown below:

@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} } 

Please note that the rem unit is not recognized by older browers, so don’t forget to implement a fallback.
That’s all for today – I hope you enjoyed this tutorial!

Comments (32) - Leave yours

  1. Ben Cook said:

    The problem with the method you describe in step 1 is that I absolutely HATE sites that don’t let me zoom in on my phone. As a user, I don’t want you messing with the way my phone works, I want your site to work on my phone. Those are two different things completely.

    Using your site for example, the design doesn’t change if I turn my iPhone sideways and read with a wider screen. Your content is still in the same small section and I am not able to zoom in or double tap the screen to view the content more clearly.

    • Steve Morris said:

      Ben, I think you may be missing the point slightly about RWD and optimising for mobile. Responsive done right means you don’t have to zoom. pinch, scroll – something many (most) users find utterly infuriating.

      When you optimise properly for mobile (using RWD) you are negating that need to zoom. The content is easy to view, easy to interact with and navigate around without fussing about with gestures.

      Our site uses responsive and DOES change to fit the landscape smartphone – and for that matter the tablet in landscape or portrait views etc.

      RWD is not a silver bullet, but it’s a pretty good solution for now.

    • Casey Dennison said:

      I actually enjoy the option of not being able to zoom in or out. Most layouts that utilize responsive design this way display fine on my phone, tablet, laptop and t.v.

      Great tutorial, btw!

    • Daniel Roșca said:

      I completely agree the part with zoom on the phones. I do want the website to be responsive, but I do not want to lock the zoom, there are so many cases when you have the feeling to zoom-in. I would go for media queries for mobiles without locking the zoom. I know it may be a pain for the developer due to the variety of phones, but from my point of view we, as developers, have to design our website to fit the resolutions, not specific phones.

    • Emma Davis said:

      Ben, I have to completely agree with you – don’t prevent the user from being able to scroll if they want or need to – what is the point, you are just alienating users.

  2. Carl said:

    Superb tutorial, actually this is one of the easiest methods excepts just choosing a responsive template for CMS which is never the best option.

  3. Landon said:

    Thanks for this post. I will have to give it a go soon. I am wondering, if using a framework for WordPress such as Genesis that is not responsive right now, would it be this easy to add this to that to make it responsive?

    Sounds like I just planned out my Saturday night :)

    Thanks again!

    • Mark Skeet said:

      Johnatahn Snook suggests using a px based fallback – though I suppose you could just as easily use em? http://snook.ca/archives/html_and_css/font-size-with-rem

  4. Ulrich Green said:

    I think you forgot to mention that the fancy css image replacement tecnique doesn’t work in any browser. The article you link to clearly states that :)

  5. Shannon Mølhave said:

    I agree with @Ben, I don’t understand why you’d turn off user scaling of your site in the meta viewport tag. If your site is responsive then it should be flexible enough to allow the user wants to zoom in or out.

  6. Marcel said:

    The responsive image and video techniques are new to me, although I have no idea why the latter actually works. I had also not heard about rems. Thanks for sharing. Every day in my web developer’s life I seem to be learning something new, that’s exciting.

  7. Vince Speelman said:

    It is absolutely bad bad bad to set user-scalable=no. It does nothing but piss off users. Dave Rupert refers to that rule as the “Don’t be a douche” rule.

  8. Emma Davis said:

    This is a great article for a brief overview of making a site responsive but viewing your site on a 320px width cuts of some elements on the right (like the right had border of this comment box, for instance) so I would recommend getting your site working responsively before advising others on how to do it (sorry to be negative).

  9. SDGSteve said:

    Frustrates me a little bit we even need these conversations, remember back when the various browsers had bigger differences and it was a nightmare working things cross browser, then slowly they all got their act together and for a few years cross browser web design felt really simple, now we have this multitude of new hardware with big differences between them all making it a nightmare again, and bloody retina displays!

  10. Abiodun lash said:

    The first thing i did on this site is check the responsiveness of the site when restore… Thanks for sharing this great stuff… i need to go mobile with responsiveness too

  11. Marie-Jeanne said:

    I copied everything to my html and css, but my website looked awful, and didn’t fit any device except my laptop screen, so I uploaded my old website css again. I will keep on trying.
    My “old” website is good on mobiles (horizontally) and tablets, but i would love to see it completely fill the screen on a tablet. That would be nicer I think.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!