How Building a Responsive Website Increased Conversion on Mobile by 85%

Every client I work with in the ecommerce business is taking the mobile experience seriously. One client, personalised card retailer, TheDogsDoodahs.com, has seen mobile usage almost double over the last year.

To meet this demand they launched a new, fully responsive mobile site. It was worth the effort, in the soft launch phase, mobile conversion rates on the site improved by 85%.

Analysis of site stats showed an increase of 49% in people browsing the site by tablet. There was also an 83% increase in people browsing by mobile, expected to rise to 100% within months.

I quizzed Webnetism CEO Simon Mellor and Creative Director Tim Jay, responsible for the build, for their top tips for creating a mobile site for an existing web-based business.

What are the top three challenges in creating a mobile version of an existing site?

1. Integration.

The mobile version of the site is not a stand-alone version of TheDogsDoodahs.com. It interacts with the existing, complex personalisation process that was developed specifically for the original site.

Updates and improvements are continuous but on the day it was conceived, a portable version controlled by a touch screen, multi-gesture interface was not at the front of anyone’s mind.

One of the biggest challenges has been integrating seamlessly with existing technology; the desktop and mobile versions both interact with a single database, content management system and workflow engine.

A card started on the mobile site and saved, can be picked up and finished on the desktop version at a later date – and vice versa.

2. Design.

One of the most noticeable aspects of The Dog’s Doodahs website is the unique and quirky design. The website has a ‘personality’ that needed to be retained for the mobile site.

Yet, with a smaller scale, limited space and potentially restricted bandwidth (if used with a mobile data connection) we needed to strip the site back to its bare bones, and build back its identify from there.

3. Flexibility.

Phones and tablets vary so much: in physical size, screen ratio, operating systems and software variants and whether the preference is to hold it Landscape or Portrait.

That’s without taking into account custom installed browsers.  The mobile site needed to respond and adapt to make the user experience as flexible as possible.

How important is it to have a mobile alternative?

Stats in general show rapidly increasing (more than anyone would have dared predict) ‘mobile’ browsing.

The specific stats for The Dogs Doodahs tell us it’s not necessarily mobile phones being operated on the go.

Instead, a large majority of the site’s user base opting for a tablet as a quick and easy means to browse the web from the comfort of their sofa, presumably quite often alongside another activity such as watching TV.

Responding to this growing trend was a necessity to ensure the user experience was not compromised at all by using such a device.

In fact the opposite is the case, we’ve been able to enhance the mobile site by taking advantage of some of the benefits of touch screen browsing.

Are there different design challenges for Android and iOS?

iOS and Android do things differently, but it’s not as simple as that.

Different versions of iOS need to be catered for as well as retina and non-retina displays, and then there’s the physical size difference - increased available viewing area and different aspect ratios of iPad over an iPhone.  

Then things get even more complex when you look into Android devices; so many different manufacturers with a wide selection of products and a massive variation in screen size, resolution and aspect ratio.

There’s also different versions of the operating system, some devices restricted to earlier version due to limitations of the hardware, and then individual manufacturers customising the operating system for their own purpose.

The Kindle Fire being one device that stood out as ‘a bit different’.

The solution was to get back to basics, you can’t target specific devices or screen sizes so we opted for basically two views, landscape or portrait.

The assumption being a tablet you tend to hold landscape, more like a traditional desktop screen, whereas a mobile is more likely to be operated in a portrait view.

There was a lot of fiddling around to get a ‘best fit for all’ design but we’re happy with the result.

What's been the biggest success?

The most successful part is the thing as a whole!

From the years of experience gained with the current desktop site, understanding how the user moves through the process and having an opportunity to review this process and take a new approach to streamlining the process and user journey.

Photo (cc) Ed Yourdon on Flickr.