Notes from eTail West: Part 3 - Responsive Web Design Not All Sunshine and Rainbows

1. RWD uses a single code base that renders content based on viewport size to ensure a consistent user experience.
2. 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.

To put this into perspective, in 2014 there were 18,700 different Android devices in use.


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

I think it's important to put the mobile conversation in perspective for retailers waiting on upgrading their platform or seeking to justify the cost of replacing existing infrastructure. While industry averages for mobile conversions are significantly lower than desktop, that's only a piece of the story and shouldn't deter investment into mobile. Many case studies, like this one for O'Neil, highlight the impact of moving to RWD in the form of increases of mobile conversation and other statistics. That said, it's important to look at mobile as a key part of your acquisition channel and how it attributes to the overall sales and bear in mind the high percentage of users starting the product research on the mobile device. If your site isn't optimized to provide a consistent experience across devices, you are opening the door for mobile users to move onto your competitors.

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.