Should You Choose a Mobile or a Responsive Theme for Your OpenCart Website?

At the year 2014, I don't think I need to convince you that there is a lot of traffic from mobile visitors to your website and that it makes sense to take care of them.

Still, if you'd like some stats, MarketLive, a company focused on commerce solutions, report that traffic coming from smartphones is up 62 percent YoY (Q3'13 vs. Q3'14). That's 62% more than last year. And last year, the mobile traffic to ecommerce sites was, well, a lot.

So, at the end of 2014, the question is not whether you should take care of your mobile visitors but how?

If you have a desktop-only theme right now, you basically have 2 choices—going mobile or going responsive.

Mobile Vs. Responsive

Cost

Let's start with the most obvious concern. If your website theme is desktop only, on an OpenCart platform, you have several choices:

  • Hire a developer to develop a responsive theme for your website. I can't quote a price on this, because it depends on your website, but the price would be somewhere between $1500–$5000 and up.
  • Hire a developer to create a custom mobile website for you. I've heard from our customers that a custom mobile website costs somewhere between $500–$2000. Again that would depend on the scope of the specific project.
  • Purchase a responsive theme. It costs somewhere between $15(!?)–$90.
  • Purchase a mobile-optimized theme. It costs again between $25–$80.

Takeaway: Getting a custom responsive website costs more than getting a custom mobile website. Getting a responsive theme costs as much as getting a mobile-optimized theme.

Speed

I can easily say that, in a very large number of cases (like 99%), a responsive website will be slower than a mobile-optimized website. While that is true, I want to back my claim.

It's the way the responsive design works…
A responsive website is one website/one theme that resizes itself according to the screen size of the device that's loading it. However, the same content is served on all devices and this is the reason why responsive websites tend to be slower. The problem is twofold:

  • desktop websites load a lot of files, on one hand
  • mobile devices have trouble loading a lot of files, on the other hand. That's because mobile devices sometimes use a slower network connection (like 3G or poor Wi-Fi reception) and because they have less memory and a slower processor than desktop computers.

A lot of files to load = a lot of code. A lot of code = slower load times on mobile devices.

What do mobile-optimized websites do differently?
As opposed to a responsive site, a mobile website uses a different set of files than a desktop website. This allows the mobile website to load only certain visual elements of the desktop site while still keeping the exact same content as the desktop site (your products and categories, for example). Since the choice what should be loaded by the mobile theme happens on the server (where your website is hosted), the mobile device that is loading the website is never slowed down because the mobile theme is just loading less files than the desktop theme.

Why should you care about load speed on mobile devices?
Because it impacts your conversion rates on mobile.

KISSMetrics'report shows that as much as 40% of online shoppers will abandon a website if it doesn't load in 3 seconds.

From this fact alone you can conclude that mobile visitors leaving your website before it's even loaded will impact your mobile conversion rates. You're effectively losing potential customers that way.

Takeaway
Speed matters. A lot. Responsive websites are generally slower than mobile-optimized websites.

SEO

One of the most important things for ecommerce SEO is to have SEO friendly URLs. The rest really depends on your keyword research and copywriting skills. So, I'll compare responsive and mobile themes depending on the way they handle SEO URLs.

Responsive website=one set of URLs
One set of URLs is a huge SEO benefit. This means that all backlinks, on all devices point to your main domain. No "m." subdomains are involved.

So a mobile site=different set of URLs?
Not really. Not always.

Let's take a closer look at Google's comparison table between different ways to create a mobile-friendly website:

dynamic-responsive-mobile.png

The table says that with a responsive website the content (HTML) and the URL stays the same. However, there are 2 approaches to building mobile websites—one is called "Dynamic serving" and the other is called "Different URLs". What do these mean?

  • Dynamic serving means that a mobile theme is loaded when a mobile device is accessing the website and a desktop theme is loaded when a desktop computer is accessing the website. A mobile visitor sees one page and a desktop visitor sees another page. Both pages are on the same URL. This means that you can both have a separate mobile-optimized theme and rest assured that your URLs are perfectly SEO friendly.
  • Different URLs means that the mobile site uses a different URL than the desktop site. Typically the mobile site will be at a m.yourstore.com website or a yourstore.com/m/ website. This isn't very SEO friendly.

“But… Google recommend responsive website design”

You will often hear that Google recommend choosing a responsive website design to cater to mobile visitors' needs. And probably you will see this listed as the source of information.

That was in 2012!

It's time to update that information:

Google does not favor any particular URL format as long as the page(s) and all page assets are accessible to all Googlebot user-agents.

As seen on the latest Google developer's guide.

This is what they say in 2014.

Note: By URL format they mean responsive, dynamic serving or separate websites.

Takeaway
A mobile website is SEO friendly as long as it uses dynamic serving (different themes on the same URL, like we designed our OpenCart mobile theme). Responsive themes are SEO friendly, too.

Conclusion

I compared responsive and mobile websites on 3 important points: cost, speed and SEO-friendliness. Responsive and mobile themes both cost the same. Responsive themes are generally slower than mobile-optimized themes. Both can be SEO-friendly (if you use a mobile site with dynamic serving). Responsive themes use the exact same design on all devices while mobile themes use a mobile-optimized design for mobile devices.

While you're wondering whether to install a mobile or a responsive theme on your website, try out our free mobile theme—OpenCart Mobile Framework Lite. You will get a hands-on experience of a mobile-optimized OpenCart theme.

Receive a curated list of the best OpenCart tips & tricks

Delivered in your inbox weekly for free.

More OpenCart Tutorials

2 thoughts on “Should You Choose a Mobile or a Responsive Theme for Your OpenCart Website?”

    1. Hello,

      Thanks. I agree, but I’m not talking about mobile apps. I’m talking about a dedicated mobile theme versus a responsive theme. I also noted the costs of both at the beginning of the article.

      A pre-made mobile theme isn’t expensive just like a pre-made responsive theme isn’t expensive.

      Mobile themes live in the browser. Mobile apps are installed on the device. And mobile apps are expensive. Mobile apps have nothing to do with mobile themes, though. These are two different things.

      From a business point of view, you need a mobile theme for the website visitors who find your website on Google or use their mobile browser to bookmark and view your store. The people who do not know you will not install your mobile app. The mobile app is for the loyal customers. So, even from a business point of view, mobile apps are completely different from mobile themes. They are on the opposite sides of the spectrum.

      Cheers,
      Gergana

Leave a Reply to Gergana Dimova Cancel reply

Your email address will not be published. Required fields are marked *