Secrets to delivering ROI with responsive design

Responsive design is coming into its own, and that means learning lessons from the early adopters. Many brands have transitioned to a single site approach to manage its desktop, tablet, and smartphone experiences. Brands such as 1-800 CONTACTS, Seventh Generation, and Disney made the switch to responsive design because of the benefits of SEO, social linking, unified web teams, and the ability to enable omni-channel.

We have all heard these benefits before, but brands have still struggled in understanding how to effectively achieve them. After a couple years of responsive design implementations, we can tell you about the coveted secrets.

Users want the full site

Mobile experts have been saying the opposite of this for many years, but that's just it, it was many years ago. Today's consumer is different. According to a Pew Survey conducted in 2013, 21 percent of people use their mobile as their primary device. Don't assume you know what the user is looking for, or that mobile is on the go. Your mobile site should "feel" meaningfully similar to your desktop site and have the same level of content. It's simply a matter of prioritizing content and optimizing layout. Concern of more content creating a slower site is something to be considered, but our experience has shown that a well-done, full-featured site on a mobile device converts at a higher rate than a pared-down mDot site that is slightly faster.

Speed is critical to ROI

Set page load speed goals, such as getting the site to load in under four seconds on iPad. Experienced developers and designers will make the biggest impact to your project. There are a number of tools and work methodologies that will insure you are designing and developing for speed. Image optimization, lazy-loading, gzipping, and maximizing use of CSS over JavaScript when possible will all create a faster site.

Responsive design requires process change

The organization must adapt to mobile first design. Instead of focusing on pixels, focus on the percentage and the fluidity of the website. This means designers should be using tools like Axure instead of Photoshop for design prototypes. Force the content prioritization discussion with stakeholders. Ask yourself: If it doesn't belong on mobile, then does it really belong on your site at all? Many newly built sites are doing this well and creating a seamless user experience. See www.disney.com for a good example of a content heavy site that has effectively minimized where possible and in turn, improved the user experience.

Consider analytics and A/B testing strategies early

Get your web team involved in analytics and A/B testing for responsive design early. Responsive A/B Testing is harder than traditional testing, as you are testing variations on-top of variations. Ensure that your "breakpoints" and your A/B Testing tool match up -- they both need to track the same thing. The last thing you want to report against is something that no users are seeing or experiencing. Track device orientation -- don't assume that portrait and landscape users want the same experience. Test device specific behavior -- such as swipeable images and zoomable images vs standard web controls.

Balance time, resources, and budget

While this is an obvious philosophy, there are considerations unique to responsive design. The more breakpoints you have, the more initial build and ongoing maintenance costs you have. Start with phones: 768px and tablets: 768-992px and analyze your analytics to see where additional needs may lie. With responsive design, you are looking at lower costs than managing three separate sites for desktop, smartphone, and tablet -- but more than desktop alone. Let's be realistic -- efforts required to build and maintain a responsive site will be more than your desktop site. Each site update you make will require consideration and testing around how it affects your smartphone and tablet breakpoints. Where you will see the major benefit is a unified message and team delivering a superior cross-platform experience at a lower cost than addressing each device individually. We have seen about a 30 percent reduction in cross-platform efforts for brands previously managing a separate desktop and mDot site.

Collaboration is critical

Having your team working together is critical. This begins from the top down. Executive level approvers need to buy into approving three breakpoints simultaneously, and push this approach. Designers and developers need to work closely from step one. Developers have a critical role in making sure the design is optimized for speed because the often necessary use of JavaScript.

Responsive design delivers the next evolution in web development -- uniting the smartphone, mobile and tablet channels. The challenges that come with this holistic approach require change to our usual working habits. Sure, developers will love to put this skill under their belt, and designers will relish the challenge, but everyone needs to understand responsive and be ready to adjust accordingly in order to achieve the best responsive design experience possible.

Patrick Collins is the SVP of the customer experience group at Merkle Inc.

On Twitter? Follow iMedia Connection at @iMediaTweet.

 

Comments