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.

Download a FREE copy of Best Email Subject Lines for Selling Premium Subscriptions and Memberships and discover an extensive list of email subject line frameworks that are consistently proven to sell and boost revenue for publishers.

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

  • 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.

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.

Comments
    Nadja v.

    The recent emergence of separate smart phone email apps (Gmail App, Yahoo App etc.), which do not support responsive design via fluid layout or media queries has made the build of cross compatible responsive emails almost impossible. The Gmail App doesn’t support media queries, same as its desktop application. The Yahoo App for both Android and Apple does not accept images with % measurements.

    This is going to be an interesting challenge as these independent, desktop rendering apps are gaining in popularity, due to their ESPs wide spread.

    I expect these smart phone applications to develop further and eventually support view port recognition, but so far this is not the case and responsive emails relying on media queries are bound to break and worsen the user experience, rather than make it better.

    Reply

    Thanks for these tips. We’ve recently begun implementing responsive designs into our email templates and we’ve seen a huge jump in click-throughs and interactions. So if it’s definitely helping on that front with so many of our lists going to mobile devices it was just a matter of time before this happened.

    Reply
    Catherine M.

    Responsive design is the best option for mobile sites that I’ve seen thus far. I think that it will adapt well to the constantly changing web design environment. Thanks for sharing!

    Reply

    Test – A LOT. Test on all major email clients and all major browsers. Make sure your email doesn’t break and that it has a good fallback if something happens. If you want a good place to start inspect one of your emails you get let’s say from a trusted and big corpo.

    Reply

Leave a Reply