twitterfacebook
Top 30 sites for freelancers
Every site you'll ever need! check it out →

How To Make Your Website Responsive – 3 Easy Steps

How To Make Your Website Responsive – 3 Easy Steps

Now a days, a website should look good no-matter where it being viewed from. Not only on laptops and desktops, but on tablets and smart-phones and this is where the term “Responsive template” comes into hand. If a website is responsive it is able to adapt to the screen size of the client. These steps will show you how to make a responsive template – easily!

 

Step 1: The layout

The first element we must look at is the layout. Most people tend to make there website “fixed” at a certain width. However, you can always alter you fixed template to make them more “responsive”. Lets face it, it’s easy to work on one thing at a time!

When you’re done with your fixed (non-responsive ) website layout, the first thing to do is to paste the following lines within the <head> and </head> tags on your html page. What this basically does is set the view on all screens at a 1×1 aspect ratio and remove the default functionality from iPhones and other smartphone where they automatically render to a full-screen-view. This allows users to zoom into the website 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 query’s. 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  (According to the w3 site). To put that into standard E for you all, it basically means making something look good on all types of displays – smartphones and big screens.

 

Looking at the code below, you can see that I have used two different 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 screens and the first. You will need adapt this code to suit your sites CSS, once you’ve done that simply enter it inside your site’s .css file.

 

/* Tablet Landscape */

@media screen and (max-width1060px) {
#primary { width:67%; }
#secondary { width:30%margin-left:3%;} 
}
/* Tabled Portrait */
@media screen and (max-width768px) {
#primary { width:100%; }
#secondary { width:100%margin:0border:none; }
}

Step two: Medias

Having a responsive layout is just the first step of having a responsive website. You need to consider all the media being featured on your site, such as images or video.

 

The code below will ensure that your images never get bigger than your parent container, it’s very simple and works for nearly every website! Please note: This will not work in IE6 or other older browsers as it’s not recognized.

 

img { max-width100%; }

 

 

Step 3: Typography

This is often forgotten about when developers make responsive websites, but it’s definitely important. Usually, most developers (including myself) have used pixels to define text sizes – this is fine when using fixed templates but isn’t always the best approach when using a responsive template. A responsive type font should be related to it’s parents containers width, so it can adapt to the screen of the client.

 

Simply add this to your css

html { font-size:100%; } 

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

@media (min-width640px) { 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 this is only compatible by modern browsers, older browsers like IE6 it will not work.

That’s all for this article, I hope you find it useful and have a go at making a responsive template in the near future.

Written by Reece

I'm a young web designer from the UK. I'm 15 years old and enjoy spending my free time on the internet writing reports, coding, designing and chilling out with friends.

  • Tim

    Where do I add: img { max-width: 100%; } ?

    • Reece

      Just into your .css stylesheet. This is make every image you insert to your HTML the full width of it’s parent container. Hope this helps.