Top Ten Mistakes while Implementing Responsive Web Design

Responsive web design is evolving considerably every day. But not every business is able to implement responsive web design on sites, the right way. Also, it is important to know that responsive design is a process of continual improvement.

A mobile-optimized website is important for ecommerce and helps a site to render across multiple devices. As the approach has gathered prominence, there are many company who have implementing responsive design for their sites wrongly. Here are the ten mistakes made by e-commerce merchants.

1) Failure to Analyse Visitor Behaviour

Retailers help build mobile presence without considering the changing customer behaviour. Behavioural analysis of the targeted market is critical to the design, as it reveals mobile devices that are frequently used along with the most frequently performed operations, mobile device conversion rate, and other issues raised by frequent shoppers and buyers. One needs to incorporate these results before implementing user experience. Additionally, it needs to be on an ongoing basis for delivering an optimized site for visitors.

2) Starting with Desktop Version and then to the Mobile Version

Most ecommerce merchants mostly design sites meant for the desktop version and then scale the site down for a smaller mobile screen and again scale upwards. There are various technical challenges of scaling down a site for smartphone support.

Instead it is better to focus on smaller screens first, design a great user experience for mobile users so that it would be easier to implement the site for the desktop version too.

3) Lack of Testing

Testing is important before the responsive sites are made public. But responsive sites are mostly public nowadays without any testing whatsoever. Most retailers have limited resources and hence they force developers to get the site live quickly without testing it.

At least, the main user flows on the main browsers need to be tested along with operating systems and diverse platforms. Testing the flows and combinations is important, so resort to tools such as BrowserStack for quick, cross-browser testing.

4) Call-to-action Buttons are Too Small to be Noticeable

Some companies try to fit every element on the smartphone screen, making the important elements to get lost in the crowd. Even the call-to-action buttons are too small. If users are forced to zoom into the call to action buttons and sometimes click wrong buttons, they can be easily turned off and the experience will force them to leave the site.

Even laptops are now available with touch screens. So one should focus on designing call-to-action buttons that are not close enough and not too small.

5) Slow-loading Mobile Pages

Mobile users are keen to click on buttons and have less patience when expecting page action. A page should be small enough to load quickly. Review all the elements of the page including buttons, headers and the like for keeping it as lean as possible. Even Google is now focusing on page speed for website rankings in search results, which means that a lighter site is the way to go.

Separate content on different tabs if more content is necessary. A product page can include a basic product description and an image, along with the price and buy button. All reviews and testimonials can be included in other tab of the main product page.

There are tools that compress the file size to reduce download time including Uglify and JSCompress that can be used.

6) Less Content for Mobile Users

Ecommerce sites do not show complete content to mobile users for smaller page sizes. But sometimes the content is hidden to the end user thus not rendering on time. Other sites generate the page dynamically, improving the download speed easily.

Showing less content to mobile users is not a good idea. Many users use multiple devices for the shopping process. According to Google, a majority of users use multiple devices and hence one should not limit the design to a particular device only.

7) Supporting Single Image Resolution

A well-designed responsive site should be flexible enough to change the resolution of images. But not many sites do that. One can reduce the size of an image by using fluid images which is a CSS technique that reduces the size in units and not pixels. An HTML5 element called picture should be used to incorporate the right image based on the device.

8) Emails Are Not Responsive

Sometimes sites are incredibly responsive and work well on desktops and other devices too, but emails connected to the site are not responsive. Hence mobile users have problems updating their orders or view details of recommended products through their emails.

One should give importance to emails as they are a key touch point for customers and hence should be part of responsive design

9) Disabling the Magnification

Disabling zoom functionality is a problem since it takes the control out of the users which will be frustrating for many.

10) Using Device Widths for Breakpoints

Using device widths for breakpoints is passe and does not make the cut and setting breakpoints device widths is killing the user experience. Create breakpoints where design breaks, or for a new layout.

Keval Padia is a Founder & CEO of Nimblechapps, a fast-growing iOS game development services provider. The current innovation and updates of the field lures him to express his views and thoughts on certain topics.