E-commerce responsive design in Magento: the pros & cons

Summary: Specific mobile support for e-commerce websites has economic return. What are the pros and cons for Magento websites of a responsive design as opposed to a separate mobile optimised store?

First, let’s start with a definition of “responsive design”. According to Google, “responsive web design, responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device. For example, on a phone, users would see content shown in a single column view; a tablet might show the same content in two columns.”

The man given the credit for coming up Responsive Design as an approach is Ethan Marcotte in A List Apart [see http://alistapart.com/article/responsive-web-design/]

I think we can assume – at the very least for the purposes of this article – that some kind of mobile site is a “good thing”:  in a recent mobile traffic study,  sites with mobile support converted over twice as well (1.31% versus 0.55%), with a 4%+ reduction in the bounce rate. Thus,  we can deem the alternative to be a “mobile-optimised” version of the website. In the Magento world, that means a separate store (in the same Magento instance), with its own URL, catalogue and set-up.

Responsive design

Force4’s responsive e-commerce website


So what is the business rationale for a responsive e-commerce website?

1. One website, many devices
The most obvious advantage of responsive design is that a responsive online store can provide a great user-experience from the same, single website across tablets and mobiles.

Let’s take the following example. Someone searches for a product on their smartphone during a lunch break at work. They find an online shop that has the product they’re looking for, and decide to continue researching this product on the same site when they get home. Except, when they get home, they will use their desktop instead of their smartphone. Later on, when purchasing the product, they’ll probably be using a tablet.

If the site in this example is responsive, this person will have a positive user experience when transitioning from mobile to desktop because they will view the same site on their desktop as they did on their smartphone. On the other hand, if the site is a dedicated mobile site, this person may become frustrated with the fact that they have to locate the desktop version of the site, then possibly go through a different process to find the right product all over again.

2. Easier to Manage
Having a separate desktop and mobile site theoretically requires having separate catalogues, product information & banners, marketing campaigns (emails, SEO, affiliates – which site do you send the traffic to?). Whilst in Magento it is straightforward to mark your content (I use the term in its broadest sense, to include copy, data, images, e-commerce operating settings and website paramaters) for a specific “store”, there is still a process to go through to deploy the same content.

It is fair to say that the reduction in content management effort will reduce the complexity of managing your website.

Sample CSS with “media query” to determine behaviour on different screens

3. More chance of your marketing “reaching” your customer

According to Campaign Monitor, 42% of all emails are opened on mobile devices. The Pew Research Internet Project discovered “67 percent of mobile owners find themselves checking their phone for messages, alerts, or calls – even when they don’t notice their phone ringing or vibrating.” No matter the study you examine, one thing is clear: whilst your marketing may be sensitive to device size, it will not know what kind of device will be used to take action.

Even if your email is mobile friendly, your landing page also has to be as well. A mobile-optimised email sending the visitor to a desktop website will not prove effective.

One study from KISSmetrics reported that 90% of people will delete emails if they don’t open or click through properly; this is further exacerbated by the fact that click-rates decrease on mobile devices when compared to laptops in the first instance.

Since customers are regularly going back and forth on devices it’s generally helpful if the landing page works equally well on desktop and mobile.

4. Social is mobile

Social media has gone mobile, which you may have noticed. How important is mobile for social media users? According to a study from ComScore, 55% of social media consumption happens on a mobile device.

What this means is that people will share and view content on mobile devices: what’s the point of sharing content on social media if it’s not compatible with mobile devices. Again, if a website isn’t functioning on a mobile device, users get frustrated and leave. High bounce rates lead to low conversion rates.

5. Google says so

With a massive market share, when Google speaks, search marketers listen. Google states that responsive web design is its recommended mobile configuration, and even goes so far as to refer to responsive web design as the industry best practice.

Here’s the bible from Google. https://developers.google.com/webmasters/smartphone-sites/

Because responsive design sites have one URL and the same HTML, it’s easier for Google to crawl, index, and organize content. A separate mobile site which has a different URL and different HTML forces Google’s busy spiders to crawl and index multiple versions of the same site.

Additionally, Google prefers responsive web design because content that lives on one website and one URL is much easier for users to share, interact with, and link to than content that lives on a separate mobile site.

Ultimately, Google realizes that unhappy people will go elsewhere, meaning that bounce rates increase and the site will not rank on mobile searches. In other words, it’s just bad for business for both Google and all of the websites that aren’t taking advantage of the benefits of responsive design.

At the end of the day, it is much easier for your target audience to find your business online if you only have a single home address, that is, a single website URL.

Watco’s responsive e-commerce website

What Magento says

As a Magento Gold partner and specialist, we are pleased that Magento itself has invested in responsive design – now reducing time to market for responsive work. Prior to this, all the coding for different devices had to be hand-coded into the website HTML.

Here’s Magento’s own words on the subject:

“Responsive is the best mobile solution for many merchants because they can invest in one site that serves customers using any device, while ensuring a consistent brand experience on every device. A single responsive site is less costly to develop and requires less time and effort to maintain than different themes for different sites and different devices.

Responsive is also good for boosting conversion, with a shopping cart and checkout designed to work in any environment and on any screen size. And having a responsive site makes it easy for mobile device-using customers to move from an email offer, for instance, to check out.

All of this is good news for merchants aiming to take advantage of the explosive growth in mobile commerce. eMarketer predicts even more growth ahead, with mobile commerce growing from 19 percent of retail ecommerce sales in 2014 to 26 percent in 2017 in the US, and from 24 percent of retail ecommerce sales to 35 percent in the same time frame in the UK.

There are SEO advantages too, because responsive is Google’s recommended approach to mobile optimization and because it allows merchants to focus all their content energy on a single site. Great content that supports SEO also engages customers, provides a richer site experience and can reduce bounce rates.”

Planning a responsive project

Smashing Magazine has put together a useful guide on how to plan a responsive project [see [http://www.smashingmagazine.com/2014/03/19/how-to-plan-your-next-mobile-e-commerce-website]

Here’s a quick summary:

Putting together a mobile e-commerce website is a multidisciplinary task that encompasses business management, design, development and marketing. Whatever your agency’s size, create a boilerplate process that you can follow for all websites but that you can adapt to each project’s specifics. In the planning stage of this process, cover the following:

• Who are you designing for (i.e. your customers)? How would they use your website & how do you send them there? What are their buying habits, and what drives them to buy?
• Create designs that are suited to mobile devices, including button design, font size and so on.
• Consider what content and functions should be where on each target screen size
• Generate wireframes with details for all key pages (home page, category page, product page, basket and checkout).

Planning in this way will help you deliver an e-commerce website that is well optimized for mobile, that is targeted at your client’s customers and that converts more visitors into buyers.

Donald Russell's mobile optimised site

Donald Russell’s “mobile-optimised” e-commerce website

Are there any downsides?

Cost

The obvious challenge is cost. Bespoke responsive design and development implies that there is at least two versions of every element on every page: things don’t just end up in the “right” place without consideration.

Whilst the availability of responsive templates from Magento reduces some of the development work, there is always going to be some overhead in customising the size and location of each function, image or content area.

Typically, responsive design can nearly double the design effort and add up to 50% to the overall development effort. QA and testing is effectively at least doubled, because every page needs to be checked and tested for all the target device sizes (not considering all the permutations available in the Android world).

It’s the same site

Some retailers may not wish to have identical product, categorisation/navigation and content on their mobile site – for perfectly sensible marketing and commercial reasons. For example, their catalogues are so large or their product information/configuration is so complex that it just won’t work well on a small screen. Alternatively, their customers’ prime mobile usage is about last minute purchases inspired by promotional emails – not browsing or research.

In these cases, a separately configured mobile-optimised website may perform better.

Speed

People worry about the impact of “big” single pages which include all the HTML, code and content for all known device sizes. Theoretically, they have a point and one that becomes particularly important when considering how customers might interact with your website through a comparatively slower mobile data connection.

However, performance in our Magento world is largely dealt through proper and optimised configuration and hosting. For example, use of cache-ing systems can dramatically improve page load times.

Thinking responsively

E-commerce managers and developers need to think responsively whenever any decision that touches the website is made. Many folk still overlook those small screens – old habits die hard. Content needs to be considered vertically (as opposed to horizontally).

Particular attention needs to be paid to the technical tasks of content creation. Old style HTML tables won’t work: website managers need to use DIVs. Fixed image dimensions will break responsive designs.

Summary

Given the increasing proliferation and range of different sized devices, it clearly makes sense to deploy a mobile offering. The payoff is easily calculated and predictably returned.

The debate is around how: do you go responsive design or mobile-optimised? The former is clearly a more strategic approach, as you are laying the technical foundations for all sorts of different device sizes and planning for a more manageable online presence. However, companies may baulk at the budgets involved, particularly if they have an existing website with which they are happy. Should that be the case, our advice is that if a re-platform or significant redesign/re-brand is being planned – making it responsive will be a time saver and much the best long-term decision.

By Roger Willcocks

Pin It on Pinterest

Share This
image_1

Sign Up To Our Newsletter

Join our mailing list to receive the latest e-commerce & Magento news from Screen Pages.

You have Successfully Subscribed!