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.

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.

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.

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:

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.

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:

Share this article

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.

Carlos

Good point! Is there any other method to avoid this?

http://www.seedr.co.uk Steve Morris

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.

http://fahidmohammad.in Fahid Mohammad

I totally agree with @Steve Morris, and a very good point for further reference.

http://gridthirtyone.com Casey Dennison

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!

http://www.danielrosca.ro/blog/en/ Daniel Roșca

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.

http://www.simplycious.co.uk Emma Davis

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.

http://blog.qoyyuum.me Abdul Qoyyuum

Nice one. How do you deal with forms? Especially with the onfocus feature?

http://www.webmaisterpro.com Carl

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

http://www.landonbaine.com Landon

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!

dJ

what would you suggest for providing a “fallback” – is there a polyfill for rem support?

http://www.catcreativemarketing.com Mark Skeet

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

Tjorriemorrie

rem is not available in IE8 which has 20% traffic in my country. It would be nice; one day.

http://blogonouth.com Blogonought

Show me people, that uses IE on their mobile device! LOL

Carlos

It’s a good start for me with the responsive design, Thank you!

Ulrich Green

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

http://leftydesigner.com/ Shannon Mølhave

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.

http://www.specrunner.net Marcel

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.

Vince Speelman

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.

http://www.simplycious.co.uk Emma Davis

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).

http://www.reynoldsdigital.com Barry Reynolds

This is good. One problem I have with using CSS3 is compatibility with IE7 and 8. Does rems work with those two browsers?

Ilya Gorokhov

Does anyone work with those two browsers?

http://www.sdgwebdesign.com SDGSteve

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!

Kevin

No browsers currently implement the attr() function so your image styles will be work.

http://omfgmeme.com/ Jay B

I just added this technique to my website and t worked flawlessly.

Thanks alot

http://www.righteous-mind.com Alen

Your these tips are really helpful for me because i am planning to design my responsive website for my restaurant

Ryan

Any reason to think your site should look good when scaled down before writing an article like this?

http://www.wikinaira.com Abiodun lash

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

http://www.mjribbink.com Marie-Jeanne

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.

http://www.fallingbrick.co.uk/ Tom

Great article. The easiest method I’ve seen. Well done!

ravi

according to step two do i need to update different size of images ?

yoyo

do it lol

Qasim Ali

Plz tell me in detail how to implement these codes in site to make it responsive