How to make Responsive template - Basic Guide

After creating blog the first thing we have to do is choosing a perfect best template for the blog which fits on our site’s niche too (mostly flat blogger template liked). Today we have to consider a lot of things while choosing a template. To pick up the template we should have to see weather this template is SEO and users friendly? Is this template is easy to navigate? Is the template is responsive or not? If you have a template or design your template yourself for your blog then you should have to make it responsive. If you are newbie and don’t know what responsiveness is then here is the answer.

Also see: New Best Free Blogger Templates with Awesome design

What is Responsive Template?

The template which fits on every size of screen is responsive template. Means the template which is optimized in such a way that when any desktop user view that page it fits on his screen. And when any mobile user view that page then the page automatically get fits on the mobile screen to make easier for the user to view that page. I hope that you get my point that what I trying to say. Simply, the template which get fit on every size of screen and make it easier for that user to navigate that site then we say that it is responsive template.

Importance of Responsive template

Now a days about 40% – 50% use internet through other devices rather than desktop such as mobiles, tablets and other such devices. So to get more attention of these users and also to increase our traffic we have to make it easier for those users too that they can easily browse our blog or site without feeling any annoyingness. And we can only do this by making our template responsive.

What is required to make responsive templare.

To make responsive tempate there is no need of any javascript or jquery the only you need is the following some simple things:

CSS skills

Yes, the first thing you need is the CSS skills. Knowing CSS skills is most important to make template responsive. All the coding we have to do in the template is only with CSS language and you have to learn it in order to make responsive template. CSS language is not much tough if you concentrate on it and some practices then you can easily become perfect in it. So, if you don’t have CSS skills then go and learn CSS.

Reading template and knowing it’s structure

The second most important thing as we need to make template responsive is we have to know that how our template which is going to be responsive is written. We have to study all of it’s structure that what IDs and Classes are used in it for different elements. If you created your template by your own then you know that what is your structure but if you nnot design your template then first take some time and take a look on template’s source code and read it from begin to end and also understand it that what classes and IDs are use in it for different elements.

Chrome screen resizer extension

This is very helpful and useful chrome extension which can help us great in making our template responsive. This extension can resize our chrome window into different sizes and give us a view of site for that size of window. With the help of this we can easily see our template that how our template looks on different screen sizes. This is very useful as we can easily test our template and also we can easily find bugs in template while creating it responsive.
You can get it chrome sreen resizer here

How to make Responsive template

Before start making template responsive first add the following tag in your template’s head section. This tag will detect different screen sizes.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

Now after adding the tag now it’s time to write your CSS coding for responsive template. To write coding for responsive template we have to use the media queries. If you know CSS then these queries are very easy for you to understand them. These media queries are used to save different styles for different screen sizes. You have to write separate style of template for different screen sizes.  No, it’s not mean that you write all the complete style but you have to modify the existing style of different elements and make them responsive.

Below are the media queries for some important screen sizes. You can use them.

@media screen and (max-width : 1280px) {

/* CSS FOR NETBOOK AND DESKTOP ------------*/

}

@media screen and (max-width : 1024px) {

/* CSS FOR TABLETS ------------*/

}

@media screen and (max-width : 768px) {

/* CSS FOR SMALL TABLETS ------------*/

}

@media screen and (max-width : 640px) {

/* CSS FOR IPHONE ------------*/

}

@media screen and (max-width : 480px) {

/* CSS FOR MOBILES ------------*/

}

@media screen and (max-width : 320px) {

/* CSS FOR SMALL OLD MOBILES ------------*/

}

Some bonus tips

1. Use "em" istead of px for font size, padding etc.
2. Use percentage (%) for defining width and height of columns and use max and min- width for box sizing.

Want help?

Hope that this brief article will help you to make your template responsive. I think that I describe every thing very clearly and briefly but if you have any confusion or any thing to ask then don’t hesitate feel free to ask. We are always here to help you.