The Perfect Place to Start with Responsive Design

March 25, 2014

By: Jim Davidson,
Author Title: 
Manager of Marketing Research
, Bronto

Unfortunately the concept of using a “responsive design” is frequently misinterpreted to mean simply making your site or your emails mobile friendly. In truth, responsive design is a powerful approach to designing and coding that can ensure your customers are able to have a visually rich and functional experience as they browse, shop and buy all while hopping between devices. Members of your team (including higher-ups) have probably proclaimed “we should use responsive design for ______!” during a meeting like it’s the silver bullet for making the mobile experience better and driving additional mobile sales. The problem with these 1,000-foot views is that most of the detail is lost and it may be up to you to pull everything into focus.

There is a misconception that “all the cool kids are doing it, so we should too” but, a study by Bronto Software found that implementation of sites and emails using responsive design is surprisingly low. Only 4% of sites viewed in a PC and 8% of emails used responsive design. Considering the various screen sizes across laptops, desktops, netbooks and multiple OS versions, responsive design can even make the traditional PC experience better by scaling to fit the user’s monitor.

Does the low implementation rate among online retailers mean responsive design isn’t worth the effort? Not at all! While often incorrectly defined or just misunderstood, responsive design is one set of code that expands and contracts based on the device and screen size. Think of responsive design as sweatpants with a stretchy waistband that fit regardless of how often you’ve been hitting the gym. While expanding or contracting, various content elements can be included or dropped from the design. Clearly there is power in responsive design. But with great power comes great responsibility.

Take the time to evaluate existing site and email content to determine which elements are essential and most used by customers. The most time-consuming part of the process is recoding. Many retailers, especially those who have an adaptive site, may not want to invest the time and resources into a coding overhaul when there is an option for mobile browsers already in place. I think most of these adaptive sites would look stellar on the Motorola Razr flip phone I had about a decade ago, however on my smartphone, the one-size-fits-every-mobile devices disconnects from the rich, immersive experience I expect from my favorite brands.

Since the leap to a site using responsive design can be a big jump that may require some proof-of-concept before you get buy-in from your team, start testing responsive design coding in the inbox. Before you read the following ways to get started, it’s important to note that the various email clients, Internet Service Providers, mobile operating systems and device types will render responsive design in various ways. For example, the way an email is shown within the Gmail app on an iPhone will differ from the default web browser version seen on gmail.com using an Android smartphone. The following table can be used as a guide to set expectations of your results though it’s strongly recommended that you conduct comprehensive testing before sending the responsive email to your subscribers.

*Variations of screen resolutions, email coding, OS version, browser type and app edition could lead to different results. Testing is always recommended.

Composition
Most emails follow a similar layout. Pre-header, logo / navigation, hero image / primary promotion, additional products / offers and footer. All of this content requires multiple finger swipes to see everything on a mobile device. Determine which pieces could be more succinct or cut altogether. Your pre-header may wrap into several lines pushing the rest of the content out of view. Featured products in a 3x4 grid may get clipped or crunched on a mobile screen when a 2x3 grid of the hottest items would fit perfectly. As we review specific sections, keep the composition of your email in mind.

Navigation
On traditional PCs, you have the luxury of including many navigation elements. From standard links like product categories to seasonal links or specific offers, you have room for all of these click opportunities without cluttering the design. That same email viewed on a mobile device can result in small click areas that are not finger-friendly or even readable. Use responsive design to populate the most popular links and drop those that may be superfluous.

Images
Responsive design can be used to scale images to fit the mobile device though this may not always be the best option. Fine details in hero images may be lost when scaled. Replace the image to retain the amount of detail needed to convey the product or promotion. Animated GIFs will work in some mobile OS / email client combinations though the large file size may result in a delayed view on mobile connections. Use responsive design to replace these images with static images that have a smaller file size.

Calls-to-Action
Comparing subscribers clicking a mouse to those tapping fingers is like comparing laser beam to a squirt gun. You may be able to give PC openers a ton of click opportunities within a small area but the same approach for mobile openers will result in fat-fingers tapping the wrong links. For mobile email, you may consider using fewer click areas. Or, with responsive design, you can give mobile subscribers larger, clearly defined and easy-to-tap click areas.

The study by Bronto Software found that the default email app for both iDevices and Android provided the most consistent experience, with the smartphone versions processing the responsive design code and iPad scaling the full-sized email to fit the screen.

Responsive design in the inbox will still require you to adjust coding processes and include additional testing, though you will carry this foundation with you as you plan your responsive site. You will learn which devices your subscribers use, how to optimize content for those devices and which elements have the most impact with multi-device subscribers. You may consider this as a nice way to enhance your customers’ experience, but know that many customers now expect the mobile experience to be as engaging and feature-rich as your full site. Don’t get stuck in the past. Start testing responsive design now.

Jim Davidson is manager of marketing research for marketing platform provider, Bronto Software.
 

Bronto Software provides a cloud-based marketing platform for retailers to drive revenue through their email, mobile and social campaigns. The leading self-service email marketing provider to the Internet Retailer Top 1000, Bronto is used by top brands worldwide, including Armani Exchange, Timex, Samsonite and Gander Mountain.