Lessons from the Trenches on Responsive Email Design

Business.com / Marketing Solutions / Last Modified: February 22, 2017

The BDC email team breaks down responsive email. We share the lessons we've learned from battling in the trenches of email marketing.

You're a smart marketer. You've kept up on the latest trends and best practices. You already know that email marketing is one of the largest growing budget areas for marketing departments in 2015. And you also know that if your emails aren't responsive, you're missing out on a huge engagement opportunity. According to eMarketer's 2014 Benchmarks, mobile email opens nearly tripled from 2011 to 2014, and for the first time, mobile email usage reached 50% in November 2014. As an email marketer, my job is to get people to open and engage with our emails, without sacrificing brand continuity or content quality.

This means that our emails MUST look great on mobile devices. But ensuring that isn't easy, nor is it cheap. Many ESPs (Email Service Providers) have ready-made responsive templates to use. But for some marketers, these just won't cut it, especially those of us that have strict brand guidelines to contend with.

Here at Business.com, we faced a dilemma that all of our old emails were not responsive (or even mobile-friendly) and weren't on-brand with our new site design. Each department has unique concerns, needs, goals and visions of what "Responsive Design Email" means. Our designer, front-end developer and marketers are here to share some of the lessons we've learned on our journey to responsive email.

Related Article: 4 Rules for Mobile-Optimized Email Marketing

Why is responsive email important?

According to a Marketing Profs article, top complaints with emails received on smartphones include:

  1. Messages are too small to read and interact with (32% don't like)
  2. Difficulty seeing full websites on devices after clicking through (26%)
  3. Messages are often jumbled or not well-formatted for phones (21%)

In less than 10 words, each team member shares why responsive is essential.

  • Design: Optimization of user experience across devices promotes marketing efficacy.
  • Dev: I'll give you 3 words: phones and tablets. Increasingly, people are checking email on their mobile devices, and then later they often check that same email and respond to it when they are back at their desks on their main computer, so we need it to be a seamless experience.
  • Marketing: Responsive facilitates email engagement regardless of when/ where opens occur.
  • Ad Ops: To increase impressions and maintain list size and engagement.

What's the biggest challenge to responsive design?

Everyone involved in email will tell you that the worst part is the overwhelming number of browsers and devices. Our designer said it best, "A lack of uniform browser specifications produces an irritating variety of results." More specifically, if you ask an engineer, "Outlook, and both Gmail and Yahoo mail in the browser are the worst offenders. They often strip out, or just ignore, basic layout and styles. Responsive design isn't just about setting breakpoints and designing for those; it's about all the steps in-between the breakpoints. A user may view email on a phone with a 320 pixel wide screen, or a desktop with a 2048 pixel wide screen, or any number of tablets, phones, and "phablets" in-between, each with a different screen. The challenge is creating a design that will smoothly resize between all those possible resolutions, and still maintain its original look and feel."

Your email should be optimized for mobile devices and have a clear, easy-to-read design.

From a marketing standpoint, if you fail to deliver an email that is aesthetically appealing in a format that is easy to engage with, engagement and "unsubscribes" will suffer. It could even increase Spam complaints.

What's the difference between responsive and mobile-optimized? How does that affect your role in creating an email?

Your email should be optimized for all types of devices in mind including tablets, and have a clear, easy-to-read design.

Responsive is just that: it changes in response to whatever environment/client/browser on whichever device and OS the user is on at that moment. In the world of email marketing, mobile optimized is static design that doesn't change, but is designed to look good on mobile devices. Responsive is dynamic and looks different depending on the device/browser/screen size you're viewing on. Mobile-optimized or mobile-first is a step in the right direction, but you should strive for responsive design.

Responsive is just that: it changes in response to whatever environment/client/browser on whichever device and OS the user is on at that moment.

When it comes to ad ops, responsive design allows for images to be resized according to device, displaying them with an ideal proportion for the screen size and overall email design.

Related Article: How to Make Your Email List Irresistible for Your Blog Visitors

Standoff: Standard ABA ads vs. a 600px wide template

Ready-made templates are 600px wide; the ABA standard banner ad width is 728px wide. Our team took it in stride and came up with a custom solution. Since acquiring 600px wide banners was a nearly impossible task, and being confined to 728px width meant sacrificing responsive design, we quickly realized we needed a custom solution. Ultimately, creating a custom 728px wide email template proved to be the best solution. Now we have a set of responsive templates that are branded, standardized and easy to customize for our own needs. Rules are made to be broken in the pursuit of success.

How do you scale custom, responsive emails?

CSS, templates and a kick-ass code jockey. The CSS makes editing super easy and lessens the risk of breaking during editing. In the time it took to edit one inline email, we were able to edit 5 responsive ones using our new templates.

A word of advice to digital marketers: learn a bit of HTML and CSS. This allows you to make changes to a standard set of code and create a variety of emails without relying on technical resources or additional budget.

Tips for making responsive work

From a Designer: Design from a mobile first perspective. If it works and the smallest screen the rest will be a piece of cake.

From a Developer: Stop thinking about email as just a web page you send directly to someone. Design around smaller areas of interest, top to bottom. Think about scrolling vertically through an email, and what might capture a user's attention. Then, build out from there for your tablet and desktop versions.

From a Marketer: Consider the ROI based on increased engagement. It's a big project that will take resources, so know the impact responsive could have on engagement and revenue. Do your research, and trust your team.

Login to Business.com

Login with Your Account
Forgot Password?
New to Business.com? Join for Free

Join Business.com

Sign Up with Your Social Account
Create an Account
Sign In

Use of this website constitutes acceptance of the Terms of Use, Community Guidelines, and Privacy Policy.

Reset Your Password

Enter your email address and we'll send you an email with a link to reset your password.