Mobile Experience Matters: Responsive Design Best Practices

Austin Caldwell, Senior Professional Services Manager

Author Bio

Austin Caldwell was a Bronto power user for five years before transitioning to the Bronto Professional Services team. He brings extensive knowledge in email, paid search, SEO, affiliate, social media, marketplace and display advertising from his management of online marketing channels for two IR 500 companies. At Bronto, Austin spearheads the Managed Services team, which handles ongoing marketing campaigns, custom integrations and special engineering projects for Bronto clients. In 2013, he received the Retail TouchPoints Channel Innovation Award for successful email, social and mobile synergy. He was previously the Marketing Director at Heels.com and Interactive Marketing Manager at eCampus.com.

During the holidays last year, over 66% of emails were opened on a smartphone or tablet (58% Apple and 8% Android). This comes as no surprise to email marketers who have been living in a mobile first world for some time. They know that in order to deliver the right message at the right time, they must also design that message for delivery in the right format.

These days, the best way to ensure optimal email experience is to incorporate responsive design. Creating responsive emails can seem overwhelming—designers have to consider multiple operating systems, browsers, screen sizes, devices and email clients. Since there are no consistent content rendering standards, this exercise ultimately results in finding the lowest common denominator coding that works across all platforms.

Today, I want to highlight some developer best practices to help you and your team avoid common pitfalls and design a successful responsive template.

Layout

When crafting a responsive template, email designers should approach the mobile layout first. Start simply with a one-column layout and work your way up to a more complex two or four-column desktop design. It’s much easier to add content than remove it. Embrace the white space to distinguish content sections; you can use padding or borders to achieve this differentiation. This welcome message from Incoco does an excellent job stacking a two-column desktop layout into a one-column mobile layout.

Incoco Examples

Responsive CSS media queries take advantage of fixed browser window widths; they differentiate desktop and mobile layout behavior. Until the latest generation of iPhone 6 smartphones, the most popular iPhone and Android models used the gold standard 640 pixel desktop, 320 pixel mobile responsive layout.

Responsive Design standardsNow that the iPhone 6 and 6 Plus have wider media query breakpoints, email designers will need to increase their layout widths to retain compatibility with newer devices. It’s still possible to keep your 640/320 pixel wide responsive layout. Just increase the max device width in the media queries to optimize for the iPhone 6 like this:

@media screen and (max-device-width: 414px) { /* Insert styles here */ }

Header

The most effective header designs are simplistic, minimalist and brand-focused. The primary goal is to be instantly recognizable. Since the preview pane for most desktop and mobile browsers is 400-500 pixels height, you should strive to keep your header below 150 pixels to maximize the available area for your hero section. Responsive design’s objective is to try to get the promotion and call to action above the fold.

With media queries, responsive coding can modify or hide unnecessary header information (such as category menus, social icons, pre-header text), allowing more room for click-worthy content. One of my favorite tricks is to move category menu links in the header of the desktop version and swap them to the footer section of my mobile version in a one-column menu; Smallflower used this media query to maximize their above the fold hero content to improve click-through rates.

SmallflowerContent

Since less time is usually spent reading emails opened on mobile, due to distractions or being on the go, message content must be impactful and quickly recognizable. Click-through heat maps confirm that striking content (lifestyle photography, bold calls to action, special offers) showcased center stage in the browser’s window receives the most attention. Because most smartphone content is glanced top-to-bottom and then analyzed left-to-right, consider using media queries to stack rows of two products instead of merchandising one row of four products, This simplifies the user experience as it gives users fewer options when glancing from top to bottom.

Images should be retina pixel density, which means all images should be saved at twice the aspect ratio of the original for iPhones. This makes beautiful lifestyle photography really pop on a smartphone and avoids blurry pixelation. In order to save overall HTML file size (and avoid additional download time when customers are browsing without WiFi), save images for web at 80% high quality.

It’s best to use short sentences or phrases with left-aligned text so that it wraps and legibly displays on smartphones. Choose a readable font with a large enough text size that can be easily read without pinching to zoom. When embedding a custom font in the HTML, default to a standard, web-safe font when it fails to load on email clients such as Outlook.

Headlines should be at least 22 pixels and body copy at least 16 pixels in size. With responsive media queries, it’s possible to cheat and enlarge your text size on smartphones. Another one of my basic coding tips, utilized here by Paula’s Choice, is to make all headlines, product details and newsletter content clickable with HTML links; you can add this inline CSS styling to avoid unattractive blue underlines on your headlines:

<a href=”url” style=”text-decoration: none; color: #ff3d7e; font-size: 22px;”>Headline</a>

Paula's Choice ExamplesCall to Action

The main call to action should be intuitive, enticing, fairly big (minimum 44 x 44 pixels), and proximal to content with large tap targets. Embrace negative space around the call to action so it stands out even more. Hanky Panky does a great job highlighting their primary call to action in this Cart Recovery responsive message. Auto-applying coupon codes tend to have higher conversion rates than codes simply showcased in the hero graphic. If auto-applying codes isn’t technically possible, the next best thing is to style the coupon with HTML to allow for easy copy/paste.

Hanky Panky examplesEven though Apple and Gmail cache images and display them by default, it’s still a best practice to optimize content for images off by using alt text, background colors and live text. Utilize HTML to create category menus or tappable bulletproof buttons whenever possible so they are displayed with or without rendering images. Feel free to get snarky with the alt text and ask the user to display images in order to unlock their discount.

Footer

Historically, the footer has been the afterthought, the boring fine print most customers completely ignore. That doesn’t have to be the case! Well-designed footer content can actually generate major click-throughs. Take advantage of the additional real estate with category menu links, value propositions, sticky content, social sharing and forward to a friend.

As always, comply with CAN-SPAM regulations. Don’t hide the unsubscribe, always include the organization’s complete contact details and explain why recipients are receiving the message. A customer’s inbox is a very special (and lucrative) place. Make potential customers feel at ease with well-designed responsive campaigns that look great from start to finish.

Woodwind Brasswind examples

Americans check their smartphones an average of 150x a day, and 85% of consumers start shopping on one device and finish on another. It is paramount that user experience flows seamlessly across devices. Responsive design has been proven to enhance the overall user experience, drive more click-throughs, improve conversion rates, and reduce unsubscribes and SPAM complaints. On the other hand, poor mobile design can have devastating effects. If an email isn’t optimized for mobile devices, 80% of customers straight up delete it and 30% actually unsubscribe from the brand. We are living in a mobile world; let’s start designing for it!

  • Does media query work on all email clients?

    We couldn’t get it to work on the following email clients… is this correct…?

    Gmail app (iOS + Android)
    Android Outlook Exchange via native client
    Android Yahoo! Mail app
    Gmail (Android Browser)
    Mailbox (iOS + Android)
    Outlook.com (Android Browser)
    Yahoo! Mail (Android Browser)

  • Austin Caldwell

    Unfortunately, media queries do not work in all email clients. This is why I always recommend to fall back to Inline CSS styling when media queries aren’t recognized. Your list is accurate. The biggest culprit is definitely the Gmail App for iOS and Android; it has the largest market share of the email clients you mentioned. Hopefully Google will get their act together this year and upgrade their email client functionality to accept media queries.