4 ways to avoid the risks of responsive design

By Ari Weil

While responsive design can be a great tool for retailers and ecommerce brands looking to reach mobile users, more marketers are finding out the hard way that it can actually hurt Web site performance and sales.

The reason: Cramming all the content from a full Web site into a small screen can slow down site speed and degrade the customer experience. That is a serious problem in a world where more consumers are powering up their mobile devices to connect with the brands that are important to them.

Too often, responsive design backfires by causing slower rendering and page load times. So while marketers think it will lead to better mobile engagement, they are surprised when their site analytics show a decline in key metrics such as time to render, time on site and conversion rates.

According to an estimate by the Aberdeen Group, a one-second delay in page load time can reduce conversions by 7 percent. So for mobile consumers on 3G or 4G networks, heavy content and rich media can slow load time to the point where they abandon a page in frustration.

It turns out that responsive design is not the magic bullet for mobile Web sites. But with a little more planning, marketers can ensure it improves the customer experience as originally intended.

Tips for optimizing responsive design sites
A study by Nielsen showed that United States adults spend more time on the Internet using mobile devices than desktops, and 87 percent of smartphone and tablet owners use their devices for shopping.

As more consumers turn to smartphones for ecommerce, retailers must change their mindsets and start designing pages for small screens first and then tailor their sites for desktop.

Here are four tips to help retailers improve responsive design performance and enhance the mobile experience for consumers.

1. Get outside and test the real thing: One thing that catches many of our customers off guard is the experience of actually using their site like a mobile consumer.

Synthetic and real-user monitoring can be helpful for testing, but nothing compares to seeing the real thing.

Everyone involved in your Web site – from the business team to the engineers to quality assurance – should be encouraged to access your site at lunch, in the elevator and while they are traveling between cell towers.

In other words, get outside and off of your high-speed Wi-Fi connection. The insight into where the gaps occur in the user experience is invaluable to making and prioritizing the right decisions for your Web site project.

2. Put mobile first: Many solutions exist for adjusting page layouts or grids for the user’s screen size, but a collapsing grid can become a conversion killer if not done correctly.

If you are still trying to scale your desktop site down for mobile devices, you are likely to damage the page layout and inadvertently alter the buyer’s journey on a given page – a critical call to action may be buried below the fold, fixed-width ads may challenge the collapsed layout, and rich media and third-party content may overpower the rest of the page.

With that in mind, it is crucial to design your grid for mobile first to ensure that information is organized for small screens. Scaling up is simpler, too.

3. Incorporate dynamic serving: Dynamic serving is a critical aspect of responsive design that changes the HTML code of a site based on user device and other factors.

This creates a customized user experience because retailers can resize, compress and sequence images for each site visitor.

Dynamic service creates rules defining how content is delivered based on factors such as location, device and connection speed – meaning the online shopping experience is optimized for each individual visitor.

So while desktop and tablet users might get served rich media, mobile users experience a much leaner site that loads faster because it is not slowed down by complex content and media.

4. Prioritize your content: Sequencing your application’s content allows brands to deliver important page elements such as product details first and serve rich media information at a later time, depending on the user’s time on site and on-page interactions.

This helps site owners improve site speed and conversion rates on responsive design Web pages by waiting to load large site features and content until the user is ready to access them.

Also, this just-in-time content approach ensures that visitors do not have to wait to see a page getting bogged down by elements such as social media widgets and videos.

WHILE IMPLEMENTING responsive design might result in a functional, good-looking mobile Web site, marketers have to consider more than just aesthetics.

By also focusing on user engagement, brands will ensure that responsive design actually meets the goal of improving the mobile experience.

Ari Weil is vice president of products at Yottaa, a Boston-based cloud-based acceleration platform. Reach him at aweil@yottaa.com.