Using Our Responsive Templates

Generally speaking, our responsive templates are initially no different to a fixed width template. As we are using media queries in our responsive framework, the actual HTML template doesn't change.

It may seem daunting when you start using a responsive template as a few things have to be catered for that were never a matter in fixed with designs / templates.

Our responsive CSS frameworks currently have four sizes: 940px, 960px, 1140px and 1200px. Depending on what size screen you wish to max out on you have the choice.

As you have an initial end size, your images etc can be planned for the largest screen resolution. The images, text etc. are/is proportionally re-sized automatically as the viewport decreases in size.

Please note - a responsive template controlled by CSS media queries in some situations is not the perfect solution, as the complete site is downloaded to the device used, although some elements can't be seen as they are told not to display in the CSS file. We discussed this in an earlier post about the pros' and cons' of responsive templates.

A couple of things that need attention when using responsive templates:

When you add images to a responsive template you can't add the images size to the image tag. The following example indicates what is allowed for images:

Images in a normal fixed width template use:

XHTML: <img src="imagename.gif" width="" height="" alt="" />
HTML5: <img src="imagename.gif" width="" height="" alt="">

Images in our responsive templates use:

HTML5: <img src="imagename.gif" alt="">

What other factors should be taken into consideration.

Tables currently don't have full small viewport support.

A table providing tabular data, needs to be planned properly, tables can only be decreased in size to a point where the text within is reached. If you have a table with multiple columns and lots of text, you may have a problem in a responsive template.

If you view a template with a wide table in a smartphone it is possible that the table has broken out of the design layout and you have a horizontal scrollbar at the bottom of the viewport.

The best way to get around this at the moment is to use the media queries - once the viewport reaches a certain size you no longer display the tables.