Responsive Design: Optimizing For Mobile User Experience

Optimizing Responsive Design For Mobile eCommerceResponsive design is an increasingly popular option for companies looking to update the look and feel of their digital store. When a website is built to be responsive, it can adapt how it appears depending on the size of the screen displaying it. This allowed web developers to build the site once and have it adjust for mobile, tablet, and desktop screens seamlessly.

While this can allow designers to create a beautifully seamless experience across devices, there are a few key areas that designers should pay attention to when trying to create be best experience for users.

Mobile Optimization:

It’s not a secret that customers are increasingly turning to their mobile devices when browsing for merchandise online. When they navigate to your eCommerce site, they expect that they’ll be able to browse everything your company has available. Sadly, this is not always the case.

Some elements from a full desktop site won’t translate well on a mobile screen, such as an interactive map or popup asking the customer if they want to subscribe to your email list. Most customers will expect this, provided these items are not a primary draw for your site. What they won’t accept, however, is not being able to purchase what they want from your website, or having trouble finding it.

Responsive designs will often help you avoid this issue since it uses the same navigation screen at any resolution, but if you decide to target specific devices (such as the iPad) make sure that your customers can navigate to any product page easily. One common pitfall are image banners on your site that might be switched out for something smaller on a mobile device. If you are promoting a product on your main page, make sure it is available on mobile as well.

Image Loading

According to Radware’s “2014 State of the Union: Mobile Ecommerce Perfomance” report, images on an eCommerce site can account for as much as 50% of a website’s “weight,” or load time. The same study also found that sites took an average of 4.8 seconds to load despite the fact that more than 50% of consumers will abandon a page if it does not load in the first four seconds.

With phones offering resolutions above 1080p and desktops with “retina” class displays becoming more popular, many marketers will suggest that you use the highest quality images possible for your site and let the browser scale them on demand. This will force your customer’s computer or mobile device to load the full image before it can scale it and load the rest of the page.

One way to avoid this is by giving the image a specific size in your code. This will allow the browser to load it in the background while continuing to build the rest of the page. For responsive design websites, you can dictate several sizes such as small, medium, and large for phones, tablets, and computers respectively.

If you, or the designer working on your website, is familiar with Javascript, implementing something like adaptive images, or the script free Src also offer potential solutions. Both of these services will adjust the size and resolution of an image based off of the size of the screen automatically.

Finally, you can compress your images, which will make them load quicker on mobile devices, but could mean sacrificing the look and feel of your full desktop experience unless you pair this with one of the options listed above.

Reducing image loading times will make your site load much faster overall, which is one of the quickest ways to improve user experience.

Never Stop Innovating

When done correctly, responsive design allows for your web team to present an attractive storefront to customers no matter what device they’re browsing on. Treating mobile browsers as “first class” consumers and reducing load times will go a long way towards keeping your clients happy.

The most important design asset any eCommerce site can have according to is innovation. Finding creative ways to present your products to customers before your competitors will help to ensure that they keep returning.