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.
Responsive web design is extremely important nowadays and is in fact one technique you need to master as a web developer or web designer.
In this article, I’ll show you how to easily build a responsive site and how to apply responsive design techniques on existing web pages in three easy steps.
1 – The Layout
When building a responsive website, or making responsive an existing site, the first thing 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 layout, I add media queries and slight changes to my CSS to create a responsive site. When it comes to web design, it’s way easier to focus on one task at a time.
When you’re done with your non-responsive layout, the first thing to do is to paste the following lines within the <head> and </head> tags on your HTML page.
<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">
This will set the view on all screens at a 1×1 aspect ratio and remove the default functionality from iPhones and other mobile devices 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, media queries 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 allow your website to look good on all kinds of displays, from smartphones to big screens. This is what is called responsive web design.
Media queries depend on your website layout, so it’s quite 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.
/* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
#primary {
width: 67%;
}
#secondary {
width: 30%;
margin-left: 3%;
}
}
/* Media Queries: 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. You can, of course, check the result on your own mobile device.
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: media, 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 responsive websites. In order to function properly, this code snippet has to be inserted into your CSS stylesheet.
img { max-width: 100%; height: auto; }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 at 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 recently, most developers used pixels to define font sizes. While pixels are fine when your website has a fixed width, a responsive website should have a responsive font. Your site font size should be related to its parent container width, so it can adapt to the screen of the client and be easily readable on mobile devices.
The CSS3 specification includes 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;} } For more information about the rem unit, I recommend you this useful article. Also make sure to check out this responsive web design techniques guide.
Responsive Web Design Courses & Tools
Learn how to develop responsive websites from scratch using HTML5, CSS3, JS, and more.
Enroll Now Webflow Responsive Design Tool
Use Webflow to design responsive websites yourself with drag & drop.
Responsive Design FAQ
How Do I Make An Existing Website Responsive?
Making an existing website responsible is simple: The 3 steps of this tutorial can be applied to both new or existing websites. To sum it up, in order to have a responsive design, you need to follow these steps:
- Add responsive meta tags in your HTML document
- Apply media queries to your layout
- Make images and embedded videos responsive
- Ensure your typography will be easily readable on mobile devices
What is a Fully Responsive Website?
Responsive web design is a technique that ensures a web page will display nicely and will provide a quality user experience on both traditional and mobile devices. Due to the prominence of smartphones and other handheld devices, it is mandatory that your website can adapt to various display sizes.
How do I Make My WordPress Website Responsive?
If you want to create a responsive WordPress site, the process is basically the exact same as with other websites. You can either follow this tutorial or install the WP Touch plugin that will take care of the work for you.