Responsive Design: Why it's Your Best Option & How to Do it Right
August 6, 2014
The explosive growth of mobile and ongoing proliferation of a variety of devices make responsive web design (RWD) the best option for retailers and brands that want to optimize how they engage with customers across all digital touch points. According to Internet Retailer, 261 million US consumers own mobile devices and 66 million of these device owners are shopping with them. In fact, Internet Retailer has seen a 159% increase in merchants on the IR Mobile 500 using responsive from 2013 to 2014 as merchants push to stay competitive and to meet the needs of consumers on the go.
Mobile versions of desktop sites have been a popular solution up to now, but the experience often lacks critical branding and content elements and ties up valuable staff and budget with managing two versions of a website. By delivering information from a single codebase that recognizes and adapts to the mobile device, responsive design solves both of these problems, and from a single URL.
Yet just as launching an eCommerce site is not a guarantee of business success, a highly performing responsive site takes equal consideration and planning. If not done right, responsive sites can bring as many challenges as they solve: slow performance, expensive, time consuming, and complex development testing delays, and it may unmask architectural challenges that require rewrite of the site. In a recent Moovweb study of 12 responsive sites, Internet Retailer noted that performance was 513% slower on smartphones than on PC’s and tablets with some sites taking 18.24 seconds to load, well above the 3 second industry best practice page load time.
Optimizing for Responsive: Before You Start
In a recent Magento-sponsored Internet Retailer webinar, guest speaker, Forrester Research, Inc. Analyst Mark Grannan stressed that, like most projects, a successful RWD implementation begins with aligning business and development goals. Taking time up front to analyze mobile traffic patterns, create device priority lists, and review your information architecture and content will allow your teams to move faster. Closely connecting design and development teams and accelerating their collaboration with prototyping tools and development frameworks can similarly improve time to market. Grannan also advised that engineers solve for long-tail requirements from the beginning, such as determining if CMS or web architecture changes are needed to support responsive design projects, and proactively address speed and site acceleration through frontend optimization techniques. Finally, Grannan recommended matching business value metrics (such as site traffic and conversions) to the development scope.
Optimizing for Responsive: Map Your Customers’ Journey
Like everything else, optimizing your site for multiple devices starts with your audience – their composition and behaviors.
What percent of your site traffic comes through mobile devices? Most merchants peg 20-30% mobile traffic as the trigger for considering responsive
How are they accessing your site today? Macro trends matter less than the specifics of your site and your customer
What devices/browsers does your customer population favor? It’s important to keep in mind that responsive web design is implemented using techniques that are incompatible with older browsers (notably IE8 and older). Identifying the top devices accessing your site will also help you determine the number of screen breakpoints for which you should design your site
Optimizing for Responsive: Define Your Content Strategy
Preparing content for a responsive website is one of the biggest challenges that merchants will face, as they will need to change how they think about content. It’s often said that implementing a responsive web design is more a content strategy question than a design question.
As Gravity Department’s Brendan Falkowski put it, "Mobile First is a methodology that asks you to design interactions by thinking of the small screen first. Mobile first is not a stripped down version of a desktop site.”
Look at the search terms your customers use and start by defining the important interactions for your store. Prioritize functions and information to organize the mobile view more efficiently, and then scale up to a cleaner site for large screens. Creating a winning experience isn’t about stripping out utility or depth.
To the contrary, users expect to be able to perform any action from whatever device they're holding. That means filtering search results, reading reviews, saving to wish lists, and check out need to be universally accessible.
Optimizing for Responsive: Code and Images
One challenge of RWD is that its single codebase can be very large and slow to load. Consider these tips, many shared by Mark Grannan in the recent Internet Retailer webinar, for an optimal mobile experience:
Load priority content first and late load (“lazy load”) content below it to create the perception of faster performance, rather than waiting to display content after everything is loaded
Use server-side technology to deliver or render images appropriately sized for the device
Code your site to reduce the number of round trips back to the server to reduce latency
Use open web fonts rather than custom fonts to reduce page weight
Consider using third party acceleration providers, like CDNs, to optimize performance through a range of technologies and local content caching
Going Responsive: Lessons from the Trenches
Skinny Ties is one of the largest retailers and wholesalers of neckties in the United States and one of the first companies selling traditional neckwear online. So it was only fitting that the retailer should be one of the first merchants to develop a responsive site back in early 2012.
To create the exceptional customer experience that Skinny Ties was after, Gravity Department drastically increased the complexity of their taxonomy by mapping every attribute to a standardized format. Before users could only navigate a rigid category tree. The dynamic taxonomy opened multiple entryways to every product.
The combination of responsive design and a flexible taxonomy contributed to a massive boost in revenue, SEO value, and conversion rates across every platform and form factor.
58% increase in transactions YOY
20.8% increase in AOV
187% increase in revenue from Android devices
224% increase in revenue from iPads
437% increase in revenue from iPhones
Vax is a best-selling floorcare brand in the UK and part of the floorcare division of Hong Kong– based TTi, a global leader in products for the home improvement and construction industries.
The business is growing at 40% per year and the online business has experienced 85%+ growth.
The company has seen tremendous success from flash sales, or what it calls Yard Sales.
These five-day events bring in 3,000+ concurrent users at peak and have been very successful! When the company saw that 40% of traffic for Yard Sales came from mobile devices, they knew they needed a mobile optimized site.
TTi Floorcare’s EMEA IS Director Nigel Aitchison shared great results from their Vax line after launching on Magento Enterprise Edition 1.14’s responsive theme, which took them just four weeks to build and test. With the responsive site, Vax saw conversion during their big Yard Sale increase 42% on tablets and 156% on mobile phones.
Internet Retailer [webinar] – July 23, 2014: Steps to Achieving Responsive Web Design Success
Forrester Research – Jan. 16, 2014: Six Responsive Website Project Pitfalls And The Best Practices For How To Avoid Them [subscription required]
Internet Retailer – May 2, 2013: Skinny Ties gets a 211% bump in mobile sales with its responsive design site
Brendan Falkowski [presentation decks]: https://speakerdeck.com/brendanfalkowski
Moovweb [webinar] – July 2014: 8 Ways to Improve Performance of Your Responsive Site
Magento Blog – May 13, 2014: Magento Enables Responsive Sites in Half the Time