What Are Responsive Website Templates

When we talk about responsive website templates we talk about a website layout that is coded so as to respond to the current device that is being used by the person viewing the template online.

Using the Cascading Style Sheet "@media" property we change the templates appearance by using predefined CSS mark-up for the current device that is in use.

If a person is currently using a smartphone to view your website, the CSS uses the preset styling for that devices viewport size.

Example:

As Tablet PC's (touch pads) have become increasingly popular over the last year due to devices like the iPad or Kindle, they are used a lot for online viewing. Touch pads, like a variety of smartphones not only have a Portrait view, they also have a landscape view.

Landscape and Portrait views are two different sizes, the "iPad" portrait size is 768px × 1024px whereas its landscape size is 1024px × 768px. Which means the template must fit in both dimensions and work properly.

You could have three people looking at your website right at this minute:

  • User 1 - using a normal desktop PC with a monitor that has a resolution of 1200px

  • User 2 - using a Kindle touchpad / tablet in portrait view (600px × 1024px)

  • User 3 - using an Android smartphone in portrait view (295px × 515px)

So, now what - you need to cater for all of these users with all of these different view port sizes, no problem, with the help of CSS media queries and a knowledge of CSS styling you can create a template that responds to each device and your site will be fully usable in all devices.

Or you can cheat and download one of our free responsive templates, modify it to your needs (colour, pictures etc…) and then you are up and running without having to know how to code a responsive template from scratch.

PLEASE NOTE

There is no all singing all dancing solution at this present moment for fully responsive layouts that fit on every device perfectly, showing every element on the page correctly or within the limits of the viewport without having to scroll from left to right.

The best example is a multi-column table - if your website uses tables for publishing tabular information you will probably have multiple column with headings etc. On a small screen or viewport the table will probably "break-out" of the viewport width, causing a scrollbar to appear at the bottom of the viewport.

There is currently no perfect solution to get around this, although there are some great ideas out there, but full support is not given at the moment.

Text is still not fully responsive, using Percentage and or EM doesn't fully make a font responsive, but, there is light at the end of the tunnel. CSS3 introduces responsive viewport units.

Sounded good didn't it :) the down part, there is currently extreme limited browser support for the four Viewport-percentage lengths:

  1. vh - Viewport height
  2. vw - Viewport width
  3. vmin - Equal to the smaller of "vw" or "vh"
  4. vmax - Equal to the larger of "vw" or "vh"

These elements are not solely for Font sizes, they are used for any elements size, but in particular these elements combined with fonts ensure a fully responsive text.