As I alluded to in my last post, Responsive Web Design (RWD) is more than just a Google recommended best practice - it's essential for retailers to provide a seamless customer experience across the multi-device retail landscape. RWD offers a host of advantages, but I want to focus on two primary ones.
- RWD uses a single code base that renders content based on viewport size to ensure a consistent user experience.
- RWD is "future friendly," meaning it adapts to new devices, and to ones that don't event exist yet, a big win in our dynamic technological landscape.
Retailers see the need for RWD - it ranked #3 on retailers priority list in a 2014 Forrester survey, jumping to 63% from 40% in 2013. Considering this, and the above, its natural to expect very high adoption rates of RWD across the industry. However, when we looked at the numbers, only 12% of the top 100 online retailers and 18% of the top 1,000 retailers have adopted it.
Thanks to conversations with industry leaders around RWD, I've found the following top five reasons why they haven't implemented RWD:
- Their current eCommerce platform doesn't support it or it would require significant investment to enable RWD
- The investment in current M. or T. sites makes it difficult to justify an update to RWD - especially with lower mobile conversion rates
- Performance of RWD is slower than the comparable mobile only site
- The mobile user requires its own distinct customer experience
- The goal is to drive mobile users to download and use an app
So what about performance? Getting your site responsive is just part of the process - performance is a key consideration when implementing RWD.
"Before you marry a person you should make them use a computer with slow Internet to see who they really are." - Will Ferrell
It's a fact that out of the box RWD makes your website slower than a comparable M. site, especially for image heavy websites that are the norm for many online retailers. Why? RWD downloads the full, desktop experience and then determines what to display based on viewport size, while hiding the rest of the content via CSS styling instructions. In addition to full size images being downloaded and shrunk to fit the device type, RWD also downloads images hidden via CSS. As you can imagine, "download and shrink" and "download and hide" can significantly increase page load time, resulting in dissatisfied consumers.
There are many things you can and should optimize on a RWD site. I'll address one of the most critical ones - images, but for a more in depth look, Responsive and Fast by Guy Podjarny is a must read and you can download it for free on Akamai.com or buy the hard copy version here.
A solution to the image issue is Responsive Images, which can lead to massive savings in downloaded image weight and significant reductions in page load time. Consider Tim Kadlec's Responsive Image test on 500 websites, which showed savings of up to 72% less image weight.
As you can see below, Responsive Image techniques such as Akamai's Adaptive Image Compression dynamically resizes images based on what's most optimal for the device and the type of network the device is on.
Implementing these techniques along with RWD will allow online retailers to deliver rich, engaging, personalized experiences across devices and networks to end users without sacrificing speed and performance.
I'll quickly address the separate mobile site or driving users to download an app. For retailers who are still using a separate mobile site, I would still advise making it responsive, as it will be able to handle all future devices. By taking a mobile first design approach you can use this site to migrate your desktop to responsive in the future.
Starbucks is a great example of why to go responsive even with a great mobile app. The app itself is excellent, combining both a loyalty and transactional element. In 2014, 16% of all Starbucks transactions went through the app, yet if you browse on www.Starbucks.com you will notice they still provide a responsive experience. This is ideal because not all users who come to your site are willing to download an app immediately, and those who don't download the app still need to be provided with the optimal customer experience across all devices.
All in all, RWD may not be the perfect solution, but when properly optimized it is clearly the best solution to provide a seamless customer experience.