Email Upgrade: 5 Responsive Newsletter Design Tips

Responsive newsletter design tips and resources for more flexible emails

To be a responsive designer, you must know how to design websites and emails to be viewed effectively on any platform.

For example, a responsive website design would never include flash, because at least 41% of the smartphone market is carrying a flash-unfriendly phone. Additionally, you find new ways to deliver pop-up ads that don’t slide off-screen, making them un-closeable on mobile devices. Or you remove them altogether when the browser detects they’re on a mobile website.

Some designers create entirely mobile versions of websites, which have been seriously upgraded from the days when a mobile website meant black Times New Roman on a white background. Others make sure their sites have no need for a “mobile” site by creating a singularly multi-functional site that will work on any device.

[text_ad]

Responsive email newsletter design

Obviously, the time involved in designing a responsive website is intensive and the standards once held may no longer apply.

Since 67.2% of consumers use a smartphone to check their email, we’ve moved into responsive design.

As we know already, every inbox is different, and we’re already using simplistic HTML and inline CSS to design for email to conform to cross-compatibility. Responsive newsletter design isn’t much different. While the iPhone is known for rendering emails pretty seamlessly, Android devices can vary from their built-in email clients to their Gmail clients. And when you put the whole list together, you get a lot of different combinations, from the Kindle Fire to any different type of Android, to the Palm OS and now the iPhone 6s Plus.

In generalities, Email on Acid has identified these widths as ideal break points in your mobile email template. At Mequoda we have been successfully following these guidelines:

1. A width less than 480px for the iPhone and smaller smart phones
2. A width between 481px and 640px for medium sized Android devices
3. A default dimension of 580px for tablets, web, and desktop email clients

Additionally, it’s important to know the difference between scalable, fluid and responsive.

• Scalable design is easy, works cross-platform, and doesn’t use a lot of the excess code. In general, these emails are simple, one column, and each device already knows how to display the content simply because there’s less code telling them what to do. Instead, they’re displaying how they think it should be displayed best.

• Fluid design is based on percentages. Instead of telling the email client exactly what to do, images and tables are based on percentages, so that they can be scaled easily. This is best for text-heavy emails.

• Responsive design relies on media queries (more info below) which means they’re coded to tell the email client exactly what to do with your email under certain screen sizes. Although much more difficult, responsive design gives control back to the publisher so you’re determining how your email displays.

Finally, if you’re ready to start designing a responsive email newsletter, these are some tips our developers have shared with us, along with some resources for further information:

Tips for Designing Responsive Email Newsletters

Use Media Queries:

Media queries (also known as @media) are mobile stylesheets, or the parameters, that define a mobile stylesheet for any given email. It tells your email what to do when it’s opened on different sized email clients. A majority of email clients support media queries.

Test one or two-column layout and use HTML

You’re going to be up to your ears in media queries the more columns you add. While one column is traditionally best for mobile emails, some publishers use two and use basic HTML. In most email browsers (but not all!) the email will automatically drop the second column under the first one seamlessly. However, if your featured product is in the right-hand column, you may want to look for a new featured location.

Progressive disclosure

If you have too much content in an email that you feel would be overwhelming for mobile devices, you can use a tactic called ‘progressive disclosure‘ to turn your email into a clickable table of contents. See how to do this.

Design fluid layouts

“By using a simple media query that applies a percentage width to elements (instead of fixed widths like 320px), it’s possible for your newsletters to feature content that has a standard ‘desktop view,’ but below a certain viewport width, stretches and contracts to fit,” says CampaignMonitor. “As a result, the newsletter can display optimally in a variety of settings, from small preview panes, to the tiny screens on web-enabled Nokia devices.”

Optimize images for mobile

There’s an array of ways to optimize images for mobile, which you should read here.

Responsive Design Resources

• CampaignMonitor.com allows users and potential customers to use their mobile-friendly templates and preview what they’d look like. They also offer a download that shows you which code works in which email clients.

• An oldie but a goodie, check out Chris Studabaker’s nine favorite responsive email examples. We found his examples helpful in showing how emails adapt to mobile when they’re built responsively. You can see how the content, and even the images get consolidated.

• KissMetrics put together an infographic on the how’s and to’s of responsive email design.

John Allsopp summed up the evolution of digital design nicely in his book, A Dao of Web Design: “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must ‘accept the ebb and flow of things.'”

Are you designing for mobile? What are the challenges you’re facing? 

Editor’s Note: This post was originally published in 2014 and has been updated.