How To Make A Blogger Template Responsive

As the technology is getting a boost, use of mobile devices including cell phones, smartphones and tablets to access internet is increasing which has changed the scope of SEO. Having a single website design for all type of devices is becoming an older story now and everyone is going towards making his site responsive which works efficiently on different type of devices. It is getting trendy to have separate designs of a website for each type of device according to its dimensions so the site layout is adjusted as the width of the device changes. For example a user experiences a different layout of a website on a smartphone than that of a desktop.

While using big sites like Facebook, Google, Twitter etc you see a variety of layout designs when switching from device to device. On mobile phones you notice a different layout than smartphone or tablet and the layout on tablets differs from what you experience on desktop. The most important thing which you will note in all these layouts is that they are adjusted according to screen size hence sidebar scrolling no more remains a problem using this type of design. This is not only beneficial for user but also for site's search engine optimization as Google loves to see sites which have separate layout design for mobile devices.

Mobile Version Or Responsive Design:

There are two major ways of making separate layouts of website design which include mobile version or a responsive design. Mobile version of a website needs to make a totally different version of site hosted on different subdomain where a mobile device redirects the user. A responsive design refers to design a site's template in such a way that its layout is adjusted automatically according to screen width of device to be used for accessing the site. There is no need to host the mobile site on separate sub-domain and creating a totally new design because responsive design can be adjusted using simple CSS rules which is a lot easier process.

If you are running a blog or a small site then its better idea to make a responsive design rather than creating a mobile version because all you have to do is to set specific CSS rules for the adjustment of layout on the same template for responsive designs. It reduces worries about making a totally new website for mobile devices so it is more effective way to give your mobile users a good experience.

Why To Use Responsive Template Design In Bogger:

While working on blogger, the most recommended practice is to make your blogger template responsive instead of using mobile version. Blogger uses a default simple mobile template which automatically starts working on mobile devices unless you specify in settings to use the custom template. The default mobile template for blogger is itself very faster and efficient but the problem is that it only supports default elements and we cannot introduce new elements and functions hence it stops display of those widgets which are already included in your template design. Its not only about these limits but the problem remains with Ads too. This template doesn't show ads also which decreases revenue generated from site traffic thus using a responsive design is a good idea.

Using a responsive template lets you configure your blog's design compatible for mobile devices. It gives freedom of showing your desired widgets, adjusting layout of your own choice along with displaying of Ads. In this way making a responsive design is best option to be used on blogger.

Now we will learn how to make a responsive blogger template.

How To Make A Blogger Template Responsive:

A blogger template is made responsive by using special CSS rule which is called @media query. It works like conditional tags in blogger and If Else statements in Javascript.

We advise you to read our introduction to most important web-design languages which would help you understand this tutorial in a better way.

The value which we will use in this @media query is "screen" which will determine and adjust the design layout according to screen widths on different type of devices.
Lets understand it. As I said above we use this query like conditional tags and adjust the design layout according to screen width using @media query. It means we will set a screen width value in our @media query and then use our desired CSS syntaxes to adjust width, positioning, size and other values of our HTML elements.

Now we proceed to learn their usage for making a responsive blogger template.

Before using CSS @media query in our blog, we have to insert a following meta tag in the head section of our blogger template.

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

To add it in your template go to blogger dashboard> Template > Edit HTML. Click anywhere inside the template HTML editor and press CTRL+F. Now search for <head> tag and just below it paste the above tag. It makes @media query functional to adjust the layout as the screen width changes. To add them in your template, search for ]]></b:skin>tag in template and paste following example codes just above this tag.

@media screen and (max-width : 1280px) {
/* For Screen Width Less than Or Equal To 1280 ---*/
/* CSS CODE HERE FOR DESKTOP DESIGN ---*/
}

@media screen and (max-width : 1024px) {
/* For Screen Width Less than Or Equal To 1024 ---*/
/* CSS CODE HERE FOR TABLETS DESIGN ---*/
}

@media screen and (max-width : 768px) {
/* For Screen Width Less than Or Equal To 768 ---*/
/* CSS CODE HERE FOR SMALL TABLETS DESIGN ---*/
}

@media screen and (max-width : 640px) {
/* For Screen Width Less than Or Equal To 640 ---*/
/* CSS CODE HERE FOR IPHONE ---*/
}

@media screen and (max-width : 480px) {
/* For Screen Width Less than Or Equal To 480 ---*/
/* CSS CODE HERE FOR SMARTPHONES ---*/
}

@media screen and (max-width : 320px) {
/* For Screen Width Less than Or Equal To 320 ---*/
/* CSS CODE HERE FOR SMALL MOBILES ---*/
}

Replace the example text inside /* with the CSS rules you want to use for the above above device types according to their screen widths.
In the above queries, max-width is used to specify the screen width up to which the CSS codes will work. In the above example we have set max-widths for nearly all type of devices. By using separate coding for each class of devices, we make sure that they don't interfere each other and responsive design works properly on each device.
For example CSS coding for max-width 480px in above quries will work upto 480px but will not work below 321px because we have placed separate CSS for device sizes up to 320px.

Things To Remember:

Following points should be remembered while making responsive design.

• Use em instead of pixels (px) to define font-sizes, padding, margin values for example 1.8em instead of using 1.8px.
• Use percentage instead of numeric values to define width of columns. For example use 100% instead of 340px or adjust the % size according to requirement.
• Make sure to use max-width and min-width properties for special elements.

Live Test Your Responsive Style:

To test live responsive style of your website, visit Responsive Test.

Hope it helps in creating an awesome design for your blog. If you still need help feel free to ask in comments.