“Responsive Templates” or “Responsive Web Design (RWD)” is the new wave of web design. According to Wikipedia, “Ethan Marcotte coined the term Responsive Web Design (RWD) in a May 2010“. Since then Responsive Web Design is becoming an important part of the web development process.
What is a Responsive Template?
A “Responsive Template” is a template that is designed to display a website appropriately across a large array of devices. Responsive templates are designed specifically to display your website nicely on every device platform like desktop computer, mobile phones, and tablets. This allows the website to be aesthetically pleasing on any device without having to create a separate mobile site.
What do Responsive Templates look like?
The image to the right shows how a Responsive template would display on a Desktop computer. The boxes on this example all float horizontally to take up the maximum amount of space on a larger resolution monitor.
Desktop computers are now displaying sites up to 1920 x 1080 resolution. This causes fixed width sites to look like a small strip down the middle of the screen. With a Responsive Template, the Desktop computer will stretch the site to fit according to the size of the browser.
The snapshot to the right is an iPad displaying a Responsive template. This size of the site stacks the content into boxes in 2 columns. iPads screen resolution is different that the Desktop computers resolution. The iPad can have a resolution up to 2048 x1536 even though the screen size is only 9.7 inches big. This makes it necessary to detect the actual screen size of the iPad to adjust the website to the appropriate size.
The iPhone has a 4 inch display that can handle 1136 x 640 screen resolution. A fixed screen site will not display correctly across a screen this size. In order to get the website to display you can have your site responsively switch to a vertical display of the content.
The most important design is the mobile phone layout. More and more people find your business on their phone as apposed to a desktop or a tablet because of the mobile phone access from any location. Now lets learn how Responsive templates work.
How do Responsive Templates Work?
Should I use a Responsive Template?
The new layouts using the @media CSS rules are supported by all new browsers; however, older browsers like Internet Explorer 7 do not support the @media rules necessary to parse the CSS. Below is a table of supported browsers.
If you do not care about older browsers and you are gearing your website towards all devices then you will want to use a responsive template.
Can I make my own Responsive Template?
You can custom code your own Responsive Template. If you are not familiar with creating templates for a Content Management System (For Example creating a Responsive Template for Joomla), you may just want to download a free one that someone else made. If you want to make your own custom website based off of a responsive template, you can follow our tutorial on Creating Responsive Templates.
Where can I get a Responsive Template?
Depending on how you are developing your website will determine how you will obtain your responsive template. Below is a list of a few sources for different Content Management Systems and HTML5 that have responsive templates available.