The Good and Bad of Responsive Web Design on Ecommerce Websites
Responsive design is not just a fad, it’s a real response to the need for websites to serve users across devices in an efficient and scalable way. But it’s been relatively slow to catch on with ecommerce — with only 2% of the IR500 using a responsive solution for smartphone visitors, and 60% using mobile-specific sites or server-side adaptive HTML.
That is set to change, expect to see many responsive ecommerce sites to launch in the coming months. In the meantime, whether you have a mobile-optimized site or not, the question “should we go responsive” is one you need to evaluate. Answering that question begins with an understanding of the pros and cons of the responsive approach.
The Case for Responsive Design
The power of One
Responsive design works off one set of URLs and one set of HTML code. Rather than maintaining two (or more) code bases like m.dot and t.dot companions to your desktop, changes to your site need only be made once, and content can be run through a single CMS. This simplifies site maintenance and ensures all customers can access the latest content regardless of their device.
Mobile-specific sites require redirects, which can be overlooked when different marketing departments create custom landing pages for various campaigns. Responsive ensures all through email, search, display, social and affiliate campaigns point to mobile-friendly pages. With 25% of search clicks and nearly 50% of email opens occurring on non-desktop devices, this is critical.
One set of URLs also carries SEO benefits — all backlinks will point to a single domain, and your “mobile site” can leverage the link graph your domain has acquired. Google loves responsive sites — it means less work for Googlebot. Google recommends you use responsive design, but won’t downrank you for not using it unless you make one of the classic mistakes of using a mobile domain.
The biggest benefit of One is scalability. Catering to the form factors of TV, connected game consoles and the coming wave of Web browsers in connected products gets expensive if they all require their own solutions.
Mobile-specific sites can have stellar user experience. They can be designed specifically for device use context, and UX designers aren’t constrained to closely match the desktop experience, free to rework content, navigation and features as they please. However, your most loyal visitors may not intuitively know how to perform tasks they’ve learned on your desktop site when your mobile design and content is radically different.
For example, those familiar with the rich experience of Barnes and Noble’s full site may not understand the mobile site is built for search, not navigation, and browseable menus are for Nook titles only.
Staples customers looking to access account information can’t find quick links on mobile.
Similarly, Netflix users may not figure out where their log in area lives on mobile.
However, the same goes for responsive designs. Many responsive ecommerce sites pare down navigation menus (or hide them behind a menu icon), strip out hero shots and merchandising zones, looking like m.dot sites. And that’s OK. Maintaining consistency across devices is not a best practice. It truly depends on your site, product and customer. Neither responsive or m.dot can promise better user experience. It’s all in the design and execution.
The cons of responsive
Page load speed
The downside of responsive design with the biggest impact on user experience is site performance. Mobile-only sites can be stripped down to bare bones HTML. Responsive tends to be slower because the user’s browser must load content from the universal HTML file, even when some content is hidden from mobile users, then process instructions to avoid certain scripts, CSS and media (more code!). Though responsive sites can be built from the mobile experience up, adding scripts to dynamically add more content for bigger screens, this also requires additional code.
Web performance best practices can (and should be) employed on both m.dot and responsive sites. Assuming both approaches can be fine-tuned for performance, an equally optimized site has a better shot of loading faster on a dedicated mobile domain (though redirects when required can eat up some of that advantage).
Slower loading pages can impact conversion rates, customer satisfaction and loyalty, and even search rankings. While it’s arguably responsive’s biggest weakness, it doesn’t mean responsive have to be slow — it means performance should take priority over looking pretty when developing your responsive strategy. It also means you’re likely going to have to start your approach from scratch, rather than try to retrofit your existing desktop design into common breakpoints.
Because of its complexity, responsive design has a reputation for costing a lot of money. And in most cases, it does. It’s not as simple as crafting mockups in Photoshop and handing them over to a developer. UX designers have to re-architect a site that satisfies the needs of users on various devices and orientations that can serve them with a single HTML file, that will load fast and follows conversion best practices. Design and development must work together to ensure that layout and code work in harmony at every breakpoint.
Ironically, it’s the largest sites that may find responsive the most relatively expensive. A very small ecommerce site can select a free responsive WordPress template. An IR50 site like Staples or Target may end up spending hundreds of thousands (or even millions) on a responsive redesign.
For many organizations, going responsive will require organizational and process change. Design and development can’t work in silos anymore. Outsourced teams need to find a way to work together, or an in-house team must be adopted.
Sites that use advertising to monetize can find it challenging to fit standard ad units into responsive designs, but it is possible. Many publishers like the Boston Globe, Time and Glamour have made it work. The ad industry is also catching up. Google Adsense, for example, has recently introduced responsive ad units, and vendors like ResponsiveAds offer publishers and advertisers tools to create and display flexible ad units.
What’s holding ecommerce back from responsive design?
- Timing Ecommerce teams that have recently redesigned or launched a mobile site are understandably reluctant to jump right into responsive, and may opt to defer the project for a year or two until it’s time to redesign, or until more best practices have been established.
- Cost This needs no explanation. We can expect resource costs to drop in the next few years as the learning curve flattens and more skilled designers and developers become available.
- Risk aversion Because responsive design can slow down a site’s performance, there’s a risk of decreased conversion. There’s also a risk that conversion improvement isn’t enough to offset the cost of replatforming the front-end. While responsive can be A/B tested with tools that support client-side adaptations, It’s tough to test the ROI of responsive without actually doing the design and development work. Some ecommerce leaders will take a wait-and-see approach on responsive, watching to see if it’s a passing fad or made to stick.
If any of the above is holding your ecommerce organization back from going responsive, you can reduce your risk and cost by dipping your toe.