Schools & Resources

8 Common Responsive Design Mistakes

A mobile-optimized website is a must-have for ecommerce merchants. To achieve this, many use responsive design, which makes a site render well across multiple devices. I addressed the basics of responsive design back in 2012, in “Getting Started with Responsive Design.”

As the use of responsive design has grown, so have the mistakes in implementing it. In this post, I will address eight common responsive design mistakes made by ecommerce merchants.

1. Failure to Analyze Visitor Behavior

Retailers, perhaps in the rush and the excitement to build their mobile presence, oftentimes will start the design process without analyzing their customer behavior. This analysis is a critical input to the design, as it reveals the most frequently used mobile devices, the most frequently performed operations on a mobile device (such as zooming a product image), conversion rate from mobile devices, and other issues raised by shoppers using the mobile devices. These factors are important to ensure the mobile experience meets the needs of shoppers.

This analysis needs to be done on an ongoing basis to continuously refine and optimize the site for the customers.

2. Starting with the Desktop Version

Most ecommerce merchants start designing their sites for the desktop version first, even though it is easier to start with a smaller mobile screen and then scale upwards for a desktop. Moreover, most retailers do not realize the technical challenges of scaling a site down to support smartphones.

By focusing first on smaller screens, the emphasis is on designing a better experience for mobile users — making it easier to design for both channels: desktop and mobile.

3. Lack of Testing

Testing is mandatory before making the responsive sites public. But responsive sites are often released with minimal or no testing. I’ve seen the primary flow for responsive checkout to be broken, for example — testing could have caught that. Most retailers have limited resources and hence once the responsive site is built, they want to take it live as soon as possible without thoroughly testing it.

At a minimum, test the main user flows on the site for the primary browsers (Chrome, Explorer, Firefox, Safari) and operating systems (Windows, Mac OS) and also for the top mobile device and browser combinations. And this needs to be done for any changes made on the site. With easy-to-use automated testing tools available — examples are BrowserStack, Viewport Resizer — testing these flows and combinations can be done in a few hours.

BrowserStack provides instant, cross-browser testing.

BrowserStack provides instant, cross-browser testing.

4. Call-to-action Buttons Too Small for Mobile Screens

In an attempt to fit everything on a small smartphone screen, ecommerce merchants often make the call-to-action buttons too small. If users have to zoom in to click a button or end up clicking the wrong buttons because the size is too small, they could get frustrated and leave the site.

Even laptops are available with touch screens. So, design an interface with properly sized call-to-action buttons that are not too small, or too close to each other.

5. Slow-loading Mobile Pages

Mobile users want to take quick action. It’s important to keep the page size as small as possible so that it will load quickly. Review all the content — images, buttons, text — before including on a page. Google has reportedly started including page speed for ranking websites in the search results, so that makes it even more important to have a lighter site.

If a page requires more content, then separate that content on different tabs. For example, a product page can have the basic product image, description, price, and buy button. Customer reviews and product videos could be on a separate tab, thus reducing he size of the main product page.

Beyond content, rendering a page requires multiple resources, like CSS files, image files, and JavaScript. Not every device needs every resource. Design the site to send only the required resources to display a page. Unnecessary resources will delay the loading of the page.

There are tools available that compress the size of resource files to reduce the download time — examples include Uglify and JSCompress.

6. Less Content for Mobile Users

Ecommerce sites often hide content for mobile users to make the page size smaller. In many cases, however, the page size is not smaller. Content is simply hidden when the page is shown to the end user. Other sites are able to properly generate the page dynamically to reduce the size, which does improve the download speed for a mobile users.

Regardless, showing less content to a mobile user is not good. It confuses the experience of users. Most of them use multiple devices during a shopping process. According to Google, 90 percent of Internet shoppers use multiple devices. Limiting their experience in responsive design is a mistake.

7. Supporting Only One Image Resolution

A well-designed responsive site will change the resolution of images based on a user’s device. But many sites, still, fail to do this. Large images result in slower load times for mobile devices.

There are several ways to automatically reduce the size of an image to fit a user’s device. Fluid images — a CSS technique that sizes images in relative units, rather than absolute pixel dimensions — can render the image properly. There are multiple WordPress plugins for serving the responsive image. And there’s an HTML5 element called picture that is becoming the preferred approach, as it serves the right image depending on the device.

8. Emails Are Not Responsive

Frequently sites are responsive and work well on desktops and mobile devices, but related emails are not responsive. As a result, mobile users struggle to review their order details or navigate through the list of recommended products in an email before finding the products that were actually purchased.

Emails are a key customer touch point. They need to be part of the responsive design and testing process. Keep the emails light, with only the most relevant information.

Gagan Mehra
Gagan Mehra
Bio   •   RSS Feed