e-Commerce professionals have spent a better part of the last 10-15 years figuring out how to make their online presence more effective. With the introduction of smartphones and tablets, this situation has become exponentially more complex. In this post, we’ll cover some of the implications of responsive design on both e-Commerce revenue and user experience.

Key Takeaways:

  • Visitors behave differently on different devices
  • Responsive Web Design (RWD) has great potential as visitors are using a variety of devices to view websites
  • Responsive design needs to be tuned to each form factor separately

Why should I care about how responsive web design works?

Understanding how responsive design works can help you build a solid strategy for multivariate optimization. Also, understanding how a typical website structure works will help you better visualize and consider the different scenarios your visitors might undergo. When building an optimization campaign, I recommend that you understand the structural layout of the site and how the site looks in various size ranges.

Two years ago, TechCrunch revealed that 38% of smartphone users have made at least one purchase from a mobile device. Additionally, according to CNET, mobile traffic is growing so rapidly in some areas of the world that we find more browsers using mobile phones than desktop computers.

Your visitors are using more and more devices

Before the mobile form factor became heavily fragmented, fixed-width mobilization was popular amongst marketers. However, technology is constantly evolving, and this has led to hundreds of different form factors and a myriad of existing devices in the market. To compound this problem, the line between mobile and tablet form factors is blurred: now we have the “phablet” – a device that falls somewhere between both a phone and a tablet. In this way, it’s becoming more and more impractical to create versions of your site for each screen size and resolution as time goes on.

Responsive design addresses many of these concerns. For example, responsive websites require no re-direction, reducing visitor load times. Additionally, your visitors can get a consistent experience on your website from their mobile phone while waiting for a flight or sitting at a desk looking at a large monitor. There are many other benefits – the sum of which have convinced Google itself to recommend responsive web design as their preferred method for handling mobile websites. In that recommendation, Google indicated that having a responsive designed web site improves their crawler’s efficiency, allowing faster and more thorough site indexing.

Baker St. Inquisitor on display on iMac Display, Macbook, iPad, and iPhone

How it works

Responsive design is centered around a website that contains multiple scalable designs that target certain groups of devices based on maximum pixel width. When that resolution is detected, the elements will adjust to fit accordingly. In this way, RWD doesn’t simply resize the page’s content to fit a particular form factor, it actually moves the elements themselves to prioritize and display them in a way that focuses on the user experience.

Responsive design at a high level is just HTML and CSS with a few key requirements for proper implementation. The heart and soul of a responsive design is:

  1. Media queries changes your CSS based on browser response.
  2. Fluid grids with percentage based flexible content columns.
  3. Flexible media and images that allow for dynamic resizing.

Responsive design uses media queries to determine the resolution of the visitor’s device, then serves up different fluid grids and scales images to suit. The visitor’s browser provides info on its maximum pixel width. A responsive website works like this: when you drag the edges of your browser, which adjusts that width of the visible region, the site shrinks and expands until it hits a breakpoint. When the breakpoint is hit, the layout of the site changes to better suit the visitor’s new display dimensions. In responsive design, it is recommended you measure using em instead of px: whereas the px (or pixel) is a fixed unit, the em is a relative unit of measure.

fixed sizing vs relative sizing

The Navigation Challenge

Navigation presents challenges on many responsive design sites, and if you have read our navigation blog series, you might already understand the significant impact navigation has on revenue. Historically, website navigation has been horizontal across the top of the site. Left side navigation was commonly reserved category pages only, but is now a commonality on most responsive design sites. Navigation campaigns can help you understand, predict, and adapt to visitor preferences – improving not only your revenue, but your overall user experience.

Latin Website behind Nokia Astound displaying mobile version

Some have tried to solve the navigational issue by trying different icons in smaller form factors. Though there are some folks out there trying to spearhead an initiative to standardize these icons or symbol sets, this is not yet fully realized. In the meantime, exploring these in optimization campaigns usually provides interesting results. Different symbols generate different reactions in different people based on a number of factors. Exploring what works and what doesn’t work in relation to your revenue is the only way to identify the right solution.

home, cart, message, no, search, help

Size Matters

Some vendors suggest testing the most popular size first and then roll out the changes to all sizes, but with the right technology solution that is not always necessary. Making decisions based off partial information carries with it a dramatically increased probability to fall second to optimizing all of the site traffic. The result is more accurate data and increased revenue.

When you run multivariate optimization campaigns on your responsive design site, bear in mind how the responsive elements function. For example, if you are making a change to an image within the site, you will want to ensure that the image is replaced with images that are scalable.

Multivariate optimization pairs nicely with responsive design websites because RWD is very modular; this makes optimization more controlled, and allows you to present these modules in a particular order or priority. With multivariate optimization, the order of information could be one dimension of visitor preference that is explored by re-ordering the modules. The content within particular modules can also be adjusted for content, design, layout, and all of the normal elements that would be explored in an experiment.

With segmentation, further insight can be brought to surface regarding different platforms and form factors. Different screen sizes may respond the same way as a group yet simultaenously respond in ways that differentiate themselves from other groups or segments.