Responsive template examples"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?

Desktop Computers

Responsive template on  desktop computerThe 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.

Tablet Devices

Responsive template on ipadThe 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.

Responsive template on iPhone

Mobile Devices

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?

Responsive templates use JavaScript and/or CSS (Cascading Style Sheets) to render styles differently depending on the device screen size or browser size.

Note! CSS and JavaScript are website coding languages. If you are not familiar with JavaScript and CSS you can learn about them here. Don't worry if you do not know how to code with JavaScript or CSS. You can always get free responsive templates that are created for you.

This is done by using a fluid web layout (Uses percents as apposed to pixels), images sized in relative units (also known as "Flexible Images"), and CSS3 media queries which uses the @media rule.This alleviates the necessity to use the JavaScript browser ("user agent") detection.

The CSS media query detects the device browser or screen size and switches the CSS stylesheet accordingly. jQuery can also be used to detect screen and browser sizes using JavaScript. This allows a site to be viewed on mobile devices, without having to create a separate site for mobile devices. CSS properties in @media rule allows different style rules for different media in the same style sheet like device-width, min-device-width, min-width, max-width and more.

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.

FF
IE
Chrome
Safari
Opera
iOS Safari
Opera Mobile
Android browser
3.5+
9+
All
4+
9.5+
3.2+
10+
2.1+

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.

HTML5 Responsive Templates

Joomla Responsive Templates

WordPress Responsive Templates

Drupal Responsive Templates

Prestashop Responsive Templates

OpenCart Responsive Templates


Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!