What is responsive templates?

A template or theme is responsive when it respond to the size of the screen of the visitors. Mean, that you will have a website with a dynamic size, you'll have a narrow size, a normal size and a mobile size. As people say: "A picture worth a thousand word!"

responsive designCredit: gantry-framework.org

Reasons to think responsive

Responsive design use HTML 5 and LESS CSS, you have to install LESS server-side or client side for responsive design to work or you may use a template framework to make things easier. Here is why responsive theme is a priority:

1.- Raising of mobile platform

With different mobile Operating Systems developed, tasks are more and more completed via a telephone, a smart phone, iPad, etc... People are accessing the web, watch and share videos, take picture, record music and upload them to the web directly from their devices. While your visitors are trying to get your website via their new technology, don't disappoint them with a non readable, non linkable or non accessible mobile version of your site. Grab the traffic from where ever it comes and increase your traffic!

2.- Platform compatibility

With mobile detect, you have to develop a version for the web and a version compatible with each kind of handheld devices. A theme may work well on a Pocket PC and don't work at all on your Smartphone. With responsive design, you create your design once and it is compatible with almost any handheld computer. Save time while you're quiet about your site compatibility with your visitor platform.

3.- Flexibility and uniformity

I remember I told that responsive design have a size depending on the screen where they are displaying, it is where it comes the most important. Even if you are on a web browser, want some spaces and resize your window to make it smaller, all elements fully in HTML 5 will resize till they reach their minimum value. 

The same way, your site stay fully branded with the same design even if the visitor is a mobile visitor or a web user.

4.- Faster load

CSS, even the version 3 forces you to layer your codes but LESS CSS allows you to speed page loads and boost compatibility with almost any browsers with simple pages without repetitious code.

Bootstrap, the node of responsive design is a framework. It has a structure for the CSS that simplify the development and it makes sites cross-browser [All browsers compatible].

5.- Ad network go mobile

Many webmasters did not make the change because a web banner should not work properly on responsive design and may affect the rules. Now, more and more ad media implements a device detection in their codes, so, ads appear depending on the platform. Google Adsense make it better with a responsive advertising structure, the same block show advertisement dynamically.


With the cross-browser property, we no more have to worry about how IE browser will show our website, looking for an alternative for margin:auto or change doc type element.