A quick guide to designing responsive email

As more web traffic continues to move to mobile, designing sites and experiences for different sized screens becomes more important. The trend towards responsive web design began WAY back in 2010 when web designer Ethan Marcotte posited that “rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.” Design once, view appropriately everywhere. What a great idea!

The responsively designed web began with the use of fluid grids, flexible images, and media queries, and soon enough, these CSS elements were welcomed into our inboxes as well. Once Gmail began supporting embedded CSS back in September 2016, the top 4 emails clients all recognized and played nice with the parts necessary for responsive email design.

Still sending your emails in plain text? Wondering whether you should be designing emails that are responsive or scalable (or even fluid)? Here are some reasons why you should start thinking responsively and some best practices for getting started.

Related: Responsive design mistakes–and how to fix them

Why is responsive email important?

Before we talk about some of the qualitative reasons why you should be sending emails that are responsively designed, let’s take a look at some of the numbers:

• Email is first opened on a mobile device 51% of the time, and that number is rising → Source: The ultimate mobile email statistics overview
• The most prominent email client is the Apple iPhone at 28% → Source: Email Client Market Share and Popularity – December 2017
• Mailchimp found that unique clicks amongst mobile users for responsive email campaigns rose from 2.7% to 3.1% — a nearly 15% increase → Source: Impact of Mobile Use on Email Engagement – Learning Resources – MailChimp
• For every $1 spent, $48 is the average return on email marketing investment → Source: Why Email Marketing at Experian.com

So it’s likely that your audience is reading your emails on a mobile device, and it’s possible (by changing the styling and methods of your mobile-focused communication) that you could reach 15% more potential or current users while multiplying your investment in email by 48x.

Let that sink in for a second.

Now that we’ve got the numbers out of the way, let’s talk about some of the upgrades in quality you’ll see by designing your emails responsively. Inline (i.e. not attached) images? Check. Big, beautiful call-to-action buttons instead of tiny hyperlinks? Check. Gorgeous, engaging content with a minimal amount of effort? Double check.

Now that I’ve got your attention, let’s look at the characteristics of different models of email design.

“Design once, view appropriately everywhere. What a great idea!”

Scalable vs. fluid vs. responsive design

Scalable email design

Scalable email design often consists of a few different components: a simple layout that is often a single column that’s scalable for all sizes; large, attention-grabbing text; and large, clickable call-to-action buttons. Use this format if you’re looking to change things up with a minimal amount of coding effort.

Fluid email design

Fluid email design makes use of percentage-based sizing to automatically adjust the width of tables and images to the device’s screen size. Use this format if you’re not afraid of a bit of extra whitespace around the edges of your content.

Responsive email design

Responsive email designs are all about providing content that is customized for your user’s chosen device. With responsive design, you can send email templates which can change depending on what screen size they are viewed. These emails will always render correctly regardless of the device it’s viewed on.

Responsive email designs use CSS media queries to produce two different copies that depend on the size of your user’s screen. Media queries will automatically adjust the email copy’s layout, content, and text size to the user’s device screen. There’s more effort required at the outset, but a good template should last for a while.

Responsive email design best practices

• Stick to a single column layout. Less shifting and moving makes it easier for your audience to read your content.
• At minimum, use 13- or 14-pt font for the body text and no smaller than 20-pt for the titles. This will make your email much more readable on a small screen.
• Place your most important call to action or your most important information “above the fold”. This is a term borrowed from print journalism that means you want your most important content readily available without making your audience scroll to find it.
• Avoid using hyperlinks and especially avoid cluttering several hyperlinks together. We’ve all tried to tap one link in an email, only to accidentally select another that’s situated very close to the original. Use big, tappable button instead.
• Use smaller, responsive images (or use images at 2x for retina screens) and make sure to use alt tags in case an email client doesn’t load your images. This is also a best practice for accessibility.
• Test your email. Use a service like Litmus or Email on Acid to see how your email will appear in your audience’s inboxes. This is a quick and easy way to avoid an embarrassing error. Don’t forget: once that email is sent, you can’t take it back.

Respond responsibly

How can you decide which style of email design is right for you, your business, and your audience? Start by considering the email habits of your users. How often do you send out email newsletters? What are your user’s favorite devices to view the content you send them?

Now test, test, and test again. Most email automation software (like Mailchimp, Drip, and Constant Contact) has A/B testing built in. They also offer responsive templates that you can tweak and tinker with to your heart’s content. Try responsive, fluid, or scalable design and check your results. Once you’re dialed in on a format that gets a response, all you’ll have to do is continue producing great content.

One of the great features of the soon-to-be-released InVision Studio is the intelligent adaptive (read: responsive) layout. Studio’s first-rate adaptive design engine empowers you to design with confidence, proving the perfect responsiveness of your final results—right from the start. That means easier responsive email. Sign up below for early access to InVision Studio!