Developing Responsive Website Templates

When developing responsive templates or themes the developer must take a wide range of things into perspective, for example: not only does size matter, it can be a major problem.

Developing a website that works in "all" (an horrendous word) devices, browsers and screen / viewport resolutions is something that simply isn't possible.

There are an extensive amount of people who would now shout out and say that's a load of rubbish - but, our opinion is ours and has been made through our experience.

When a template is developed a professional developer will use a standards conform browser to create and test in and when everything looks and works how it should, the template is then tested in the other browsers that need to be supported.

This is where things start to get hairy - why ? simple ! there are so many browsers out there and each of them have varied development stages and support different elements / standards - so, how can a template work perfectly in all browsers ? it can't.

The simplest of things: fonts - test your own website in a variety of browsers and you will see that the fonts change how they are rendered and how much space they have between the words and sentences.

Since the rapid rise in popularity of smartphones and touchpads, the device and browser wars have increased dramatically - so a developer now has to test on even more devices and even more browser versions.

When talking about a responsive design and how it renders, the majority of online testing tools can only give you a rough estimate of how the template may look in a specific size - the tool doesn't tell you if the template and all of the scripts work in your specific device or any specific device. They simply show you that the template fits in the viewport and the elements in the template are moved around.

So now this major problem has arisen - there are so many different types of touchpads & smartphones that use different operating systems, viewport sizes and browsers, that a template simply can't be tested on "all" devices.

It would cost thousands to test a template on all of the current available devices - why ? because 1) the devices must be bought and 2) the template needs to be tested in each device, that is not plausible for any template or theme developer.

So what now ? simple, a compromise must be made at some stage - the most popular browsers and devices are tested, but here again is another problem - the devices are updated / upgraded / made redundant faster than you can say "BOO".

Another problem is how the same browser version renders the templates in the different operating systems - sounds strange, but the best example is Microsoft - their IE10 + IE11 browsers don't render the same across their operating systems e.g. Win7, Win8 & Windows phone.

This all sounds dismaying, but, there is light at the end of the tunnel:

If you want to use a responsive template or theme then you have to take all these things into mind as well as the other pros and cons - as described in one of our other journal posts.

If you are willing to compromise and go with the flow (as we do) you can make the best out of a responsive template to obtain a maximum audience / end-user reach.

If you aren't interested or bothered about cross device usability, no problem, you can stick to a fixed width design, as that can be viewed in a smartphone or touchpad as well - in some cases not very well, but it works using pinch and squeeze.