• Zen Cart Experts
  • Web Sites
  • Training & Support
  • Content Management
  • Other Services
  • The Truth about Responsive Templates

    Even the name sounds desirable. Who wouldn't want a website template that changed to fit the medium when necessary? Who wouldn't want to just drop in a new template that solved all those issues? Who wouldn't want a mobile website that comes as part of a package?

    Gee, now that I think about it – kinda sounds too good to be true, huh?

    Magic that just fixes things. Huh, no. Sorry, as usual, it's not quite that simple.

    The Normal Responsive Template

    Most of the available responsive templates are created with software – it actually is quite easy to do once you learn how. It is a quick and dirty way to generate a whole website that is responsive.

    Unfortunately, a quick and dirty approach does have its drawbacks. One of the things I've seen most often is a penchant for hiding elements on the mobilized version. You have an entire section that works well on the desktop but it isn't necessary on a phone. Easiest solution is to hide that from view instead of recoding that page to suppress it entirely.

    The hiding part is done with CSS – the stylesheets that drive the design. If you just add a display:none bit, that element will disappear from view. The problem is that it's still there – in the code and loading with everything else. You have improved the visual but not the functionality – it's still loading along with any pictures, text, etc.

    There is Still a Need for Speed

    The biggest disadvantage to using phones specifically for trawling the internet is a frequently slower connection. So the first aim of a mobile website should be to decrease the load time. This is not what happens with most easily available responsive templates; they are for show – visual display only.

    That's strike one for the normal responsive template.

    The other main thing a responsive template has that is different is the use of new (more and bigger) jQuery and CSS files. So dump those into your site and you've just added to the load time on both the desktop and the mobile. There's more on both mediums to load.

    That's strike two for the normal responsive template.

    And then, want to make small changes to the color or formatting on your website? Ha, go for it! Open up that CSS file and find all occurrences of the one color you want to change. What, the file looks different ? Oh, yes, because that's how the responsive bits are brought in and it's very technical. So go ahead and make changes – and then test all mobile devices and browsers to see if you got it right. Sound hard? Uh, yeah.

    That the third strike for the normal responsive template (as well as for fancy mobile in general).

    But Google says…..

    Aha, careful now. Google says a lot of things about what they hope will happen on websites and they have quite a bit of advice about what you should be doing.

    Google does say it prefers responsive templates but it does provide instructions on how to fix a site that uses a desktop version and a duplicate version for mobile.

    No penalties for doing so and then you can have version for mobile that not only is designed for mobile and it's need for speed but also can be designed to deliver the best experience and functionality specifically for mobile.

    What is best for mobile websites?

    Speed, navigability and no fluff. Straight forward presentation of the most important elements of your website. With Zen Cart and all e-commerce that is the products and little else.

    What is the alternative to a "responsive template"?

    A site designed solely for mobile – and that depends on your content and purpose. There are a number of ways to accomplish this. Ask a web pro about what is best for your website.  Uh, if he/she quickly says a responsive template, ask him/her for more details based on the questions raised in this post!

    For e-commerce – of course, I have an good answer – a mobile template for Zen Cart.

    Author: Delia Wilson Lunsford, Founder & CEO, WizTech, Inc.