Responsive PrestaShop Themes - Do you really need them?


Image icon of responsive prestashop design


In this article I want to explain what responsive web design is and how it is related to PrestaShop templates. It is growing trend about responsive design but do you really need it? Well I will try to answer this.


What is responsive web design?

Responsive web design is a web design with additional code and concept, aimed to create an website with optimal viewing experience. It should be easy to read and navigate with minimum zooming and panning on wide range of devices like desktops, laptops, tablets and smartphones.


What is the general purpose of the responsive web design?

Well, the responsive design is mainly aimed at websites with a lot of text content like newspaper, magazines, blogs and other similar sites. Because when you read an article or news story on your phone, you want to have maximum comfort to read on your device.


How is responsive design made?

Generally there are several approaches. The true responsive web design use so called "fluid grid concept" where every element of the page will scale at % of the device resolution.

The other and most commonly used method is with CSS media queries, where in the code is set typical device resolutions and when these resolutions are detected, different CSS code apply for them.


What are advantages and disadvantages of responsive web design in PrestaShop?

PrestaShop structure uses 960 grid systems, so a truly responsive web design with fluid grid concept is very hard thing to do, and so far i have not seen such template for PrestaShop. Even if there is some developer who will make 100% from the ground up template using fluid grid system, with the next PrestaShop update, this theme will most probably won't work and it will need a major overhaul to be updated.

All of the responsive PrestaShop themes that i have saw, use media queries to make it. What that means is that if you buy such theme which covers most usable resolution at mobile devices, it will not cover all devices. This means that there is a risk your website to look awkward on some devices or completely broken.

Another disadvantage of responsive web design in PrestaShop is that it limits the design itself and creativity of the designers. Responsive design avoid images as backgrounds, gradient backgrounds and effects because of the scale problem. When you scale up or down an image, its quality is greatly reduced, unless of course it is SVG image format, but not all browsers support svg and svg images has other limitations. So these designs are often very basic with only what code can do and avoid images. Developers can use CSS3 gradients and effects to replace image effects but then you are losing browsers compatibility and in particular Internet Explorer! So most of the responsive themes are pretty much the same as visual -  basic. Designers cover it as "minimal" or "clean" to justify it, but often without fancy images looks empty.

Another disadvantage is "Speed". Because of the extra code required for responsive web design, even that the effect is small, it affects your website speed in negative way. And Google like fast loading websites, users too. So every little extra slowdown counts and makes you lose customers and money.


Do you really need the responsive themes for PrestaShop?

On the picture below, i will show all the major resolutions used today by all types of devices, and how the default PrestaShop theme look like on them.

Note: The picture is large, click to enlarge it.


This pictures show all major device resolutions and how PrestaShop theme looks on them



As you can see from the picture, on all desktop, laptop and tabled devices, the default PrestaShop theme content is 65%+ visible, which is great and it is considered good and you don't need to do anything more.

The only real problem is "Smartphones". It looks really small and awkward on smartphones because of the small resolutions.  However, keep in mind that as of PrestaShop 1.5.x there is a default mobile theme for free included in the package which solves this problem.


Conclusion words

Mobile devices evolve fast, and the resolutions go bigger and bigger, don't need to make your online shop smaller and smaller.

If you are making blog, magazine, newspaper or portfolio website, yes definitely go for responsive web design. For any online shop and particularly PrestaShop, you better stay with fixed width theme plus mobile theme to support smallest devices.

Developers often tells that responsive theme is “a must” so they can have job to do, don’t get trapped by marketing tricks and think what’s better for your customers.

Get some tablets and smartphones and actually browse online shops and make decision for yourself if you need it or not.

Dreamtheme, 10.2.2012