Contents
Or read the White Paper below ...
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”.
I think we can assume – at the very least for the purposes of this article – that some kind of mobile support 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.
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.
Having a separate desktop and mobile site theoretically requires having separate catalogues, product sense, to include copy, data, images, e-commerce operating settings and website parameters).
It is fair to say that the reduction in content management effort will reduce the complexity of managing your website and the time and resources required to do so.
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 which 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.
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.
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 organise 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 realises 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
As a Magento Gold partner and specialist, we are pleased that Magento itself has invested in responsive design – now reducing the 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 what Magento has to say 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 optimisation 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.”
Putting together a responsive 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 state of this process, cover the following:
Planning in this way will help you deliver an eCommerce website that is well optimised for all devices, that is targeted at your client’s customers and that converts more visitors into buyers.
The obvious challenge is cost. Bespoke responsive design and development implies that there are 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.
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 is being planned – making it responsive will be a time saver and much the best long-term decision.
