Make Lemonade

What to look for when buying a responsive theme or template

General, Tutorials
Buying Responsive Themes

With so many options available these days, to the novice buying a theme or website template can be a minefield. To make it even harder there is generally no ‘try before you buy’ option, so getting a chance to look under the hood or at the back end is near impossible. So, what can you do and what should look for when buying a responsive theme or template?

First things first:

you’re buying a theme or template based on its design and feature set. A lot of people will also buy for the potential to change and customise the template to suite their own brand and needs. So, does the template have everything your looking for in a feature set? If not, how customisable is it?

As a template author I have seen some pretty abstract requests for customisation. This has included a couple of instances where a request would result in a template that does not at all resemble the design and feature set of the original theme. If you’re a buyer looking to change all but 1 or 2 elements in a template, my suggestion is to save yourself a headache and look for another template that more closely suits your needs. There are plenty of templates out there.

Now is the theme responsive?

Once you’re happy with the feature set and design of a template or theme, ask yourself – is it responsive? I mean really responsive? If you’re still not totally sure what responsive is, then here’s a recap.

“Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience‚ easy reading and navigation with a minimum of resizing, panning, and scrolling‚ across a wide range of devices (from desktop computer monitors to mobile phones)” Wikipedia

Responsive designs basically come in 2 flavours: adaptive and true responsive. Adaptive websites fluidly scale down through all screen sizes from the templates maximum width to its smallest width. In this day of multiple screen sizes the template will always be sized for any screen size. With adaptive websites it is important to see how the design resizes. Many adaptive designs will look good at certain break points (your general screen sizes like iPad, iPhone, desktop), but what about in-between these? After all, not everyone uses an iPhone or an iPad.

Ask yourself, Do elements in the template break, or are they out of place, when you resize your browser? For the designer there is slightly more challenge in adaptive design to make sure the template will always look good no matter what the screen/browser size. The better the template holds up at all sizes, the better it has been designed and built.

The latter flavour, true responsive, only scales down when a certain size threshold has been reached. The template or theme may essentially have 3 or 4, sometimes more different layouts or views, unlike adaptive, which is constantly changing and scaling. The easiest way to test is this is to drag the corner of your browser screen, scaling the browser down to a narrow window and viewing the template’s response.

So, what is better – responsive or adaptive?

Well it doesn’t really matter all that much in most cases, it’s really just a preference thing. My preference, as explained next, is for adaptive design but there are plenty of designers that have preference for true responsive designs.

As an author, my preference is for adaptive designs that will always scale to suit the screen size. Why is that? Well, these days we have so many available devices and screen sizes (and no doubt more sizes to come). Adaptive design will cater for all of these naturally, straight of the bat, when done well. True responsive still caters to screen sizes, however it does not always provide an optimal viewing experience. You may end up with large gutters (blank space) on your device, or breakpoints that aren’t catered for, if your device is larger than the next breakpoint but smaller than the last.

Now we need our template to be retina ready

So, we have a template design we like, and it’s responsive. Now we need our template to be retina ready. One big failing with a lot of responsive templates (as I write this), is that being responsive is not enough – they also need to be retina ready.

What’s this retina thingy?

Retina refers to the pixel density in screens. To read more about it follow this link

But why does this affect website templates?

A responsive template caters for smaller devices like iPhones and iPads – both products that have a much higher pixel density than your average desktop monitor. Commonly referred to as Retina Screens or HiDPI screens, they essentially have double the pixels (generalising) of a desktop monitor. This means images and graphics need to be delivered in twice the resolution. Without retina readiness, viewers with retina screens will only see soft, slightly blurry images.

Retina and HiDPI monitors are becoming very common, and the lack of retina ready websites is pretty hard to swallow on a nice new retina display. I’ve heard people go as far as to say the Internet looks broken, or feels like they need glasses. I have even heard of people returning their new monitors because they can’t handle the lack of definition on the internet.

Double-check or ask the developer or theme author, “is this template retina ready?” If not, only half the job is done. Retina readiness is part and parcel of building responsive themes. If it ain’t retina ready then it’s not, ‘providing an optimal viewing experience’ which is the basis of responsive web design.

What about support?

What is the author like at providing reasonable support or documentation? As with all templates you buy, support and documentation should be a factor in your considerations. As this is a template you’re buying, there will always be a degree of customisation you will be making. As much as possible, try to gauge the level of support the author is willing to give, and always make sure there is documentation to support your newly purchased template or theme.