Responsive design: Will your mobile customer thank you?

Carin van Vuuren is the Chief Marketing Officer at Usablenet.

There’s no doubt that the debate around responsive web design (RWD) has reached every level of most organizations, almost achieving mythical status for “one design to rule them all.”

[aditude-amp id="flyingcarpet" targeting='{"env":"staging","page_type":"article","post_id":846821,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"C"}']

Responsive design’s claimed ability to deliver great experiences on every mobile screen, while simultaneously saving companies’ money through reducing code and mobile experience management, sounds too good to be true. Which, unfortunately, is exactly what it is.

---

Editor’s note: Developers! If you’re good and want to be great, our upcoming DevBeat conference, Nov. 12-13 in San Francisco, is a hands-on event packed with master classes, presentations, Q&As, and hackathons, all aimed at boosting your code skills, security knowledge, hardware hacking, and career development. Register now.

---

It should be noted that certain areas of the web experience – such as editorial content and e-commerce checkout functionality – can be effectively extended across mobile devices using RWD. However, there are many other areas of mobile web functionality where responsive design simply does not deliver. Businesses with complex web functionality, such as a comprehensive retail site with thousands of products, high-resolution images, user-generated content, high-frequency marketing offers and campaigns, and videos and animation, should think twice before embarking on a responsive redesign.

In order to better assess when responsive design does and does not make sense for your mobile customers, businesses must examine three areas of potential impact: performance, user context, and marketing control over mobile promotions.

Responsive sites are pretty, but slow

On mobile, performance boils down to speed. With every second of delay causing a 7% decrease in website conversions, commerce sites built with RWD run the risk of underperforming compared to unique mobile experiences achieving the desired three second page load time.

Keynote, a leader in online performance monitoring, regularly publishes indices on mobile and desktop website load speeds across major industries. Interestingly, not one of the retail or travel mobile sites that top its industry charts are responsively designed. This points to one of the flaws with responsive design: as it relies on code that delivers consistent content across all devices, pages with high-resolution images and other heavy content take much longer to load. While the result is a great looking site, the overall customer experience for mobile users is substandard.

Here are some additional tips to keep in mind when creating high-performing mobile experiences:

• Reduce amount of IP requests: Desktop sites often make over 100 IP requests, but on mobile these requests take time and need to be minimized at all costs. Mobile sites should aim to use 40-60 as a reasonable average number of requests.
• Go light-weight on mobile: Brands need to make sure their mobile site loads smaller sized images, as well as reduced CSS and JavaScript so the mobile web experience does not end up hogging users’ device data.
• Effective mobile UI & UX: Users are drawn to visually stimulating mobile web experiences — especially bright colors, intuitive touchpad experiences and engaging content. Remember that speed does not need to come at the expense of a rich mobile experience.
• Use a CDN: There is no doubt that a CDN will enhance the speed of your desktop AND mobile site. If you require a redirect to get to your mobile page, the redirect can be done at the edge-server, saving valuable milliseconds.

Context matters to users

In a report on mobile customer experiences, Forrester Research predicts that businesses that integrate the use of context – that is, sharing appropriate services, prices, and content with customers at the right moment – will gain significant advantages over competitors. Mobile sites built with responsive design are much less able to take context into account when engaging with mobile users.

[aditude-amp id="medium1" targeting='{"env":"staging","page_type":"article","post_id":846821,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"C"}']

An alternate approach to creating context-rich experiences is to fuse responsive and adaptive design approaches for mobile. Strong examples of these hybrid mobile sites include Mercedes Benz USA, FedEx and many insurance sites like New York Life. By combining responsive design with specific pages containing experiential elements that are adaptive, mobile users can enjoy the best of both worlds: visually appealing sites that are fast and context-rich.

However, if you are a brand seeking to personalize the mobile customer experience by using mobile campaigns, sweepstakes, giveaways, push messaging, location-based notifications, or any other personalized form of content, you should consider building a dedicated experience for each mobile channel.

Ready to yield control?

When considering whether or not to implement RWD into your company’s mobile web strategy, a major trade-off to keep in mind is relinquishing control to other stakeholders in the mobile marketing development cycle. A responsive approach pulls the marketing team out of the driver’s seat, making it much more difficult for marketers to quickly create and manage unique campaigns across channels.

I’ve had clients from large media agencies come to me disappointed after a responsive project. They did not realize the amount of testing that goes into creating a RWD site and how, in the end, they had to substitute functionality and performance to get their site live in a timely manner.

[aditude-amp id="medium2" targeting='{"env":"staging","page_type":"article","post_id":846821,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"C"}']

Focus on the mobile user

“Mobile-first” is often touted as the mantra of responsive design. While the premise is sound, a “user-first” approach is likely to yield better results and stronger engagement with mobile consumers.

A good example of a brand that takes this approach is luxury lingerie and ready-to-wear retailer, Fleur du Mal. Fleur du Mal’s next-generation mobile experience couples engaging content, visually enriching images, intuitive browsing and checkout options, and content publishing tools to enable frequent real-time campaigns and promotions.

The mobile experience loads in under five seconds, and visitors immediately notice how easy and engaging it is. Every aspect of the experience is designed to promote product discovery and enable fast, efficient browsing. The mobile site also features advanced social integration and personalization via location-based targeting, which sends users targeted mobile-web based information on local deals, promotions and pop-up retail events. As an online-only brand, Fleur du Mal recognized the importance of creating unique mobile experiences enabling them to better engage with their customers via mobile.

Ultimately the key to finding the right approach to designing for the mobile web is focusing not only on achieving internal business goals, but also delivering the kind of experience that customers will appreciate and share with others.

[aditude-amp id="medium3" targeting='{"env":"staging","page_type":"article","post_id":846821,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"C"}']