Responsive Email Design Guidelines

Email design is crucial to a successful email marketing campaign. Making sure your email renders, is readable and easy to navigate often determines if your email marketing is successful or a failure.

Responsive email design is a powerful tool to accomplish this, but is often misused or misunderstood which causes disastrous results – like a Village People song.

Have no fear, grab a margarita and stick to these responsive design tips to find out how to keep your email campaign rolling!

Keep it in One Column and Keep it Simple

You’re not in the business of making art, you’re in the business of making money.

Emails are not paintings or websites – they have to perform a function and, in the case of mass email sending, be readable on as many devices and clients as possible!

The best way to achieve this is to design an email in one column. This ensures that it will scale down correctly on any device with a small screen. Two column designs aren’t too bad, as long as they’re symmetrical, meaning content blocks side by side.

Stay away from two column design emails and don’t even think about emails that are basically one sliced up image, require HTML floats or positioning (like overlaying).

  • Single columns are best
  • Symmetrical design comes in at second place
  • Use grid-based layers
  • Never use complex design (HTML floats / positioning, upwards of 3 columns)

Design for Mobile First

40% of email is consumed via mobile phones and 70% of consumers immediately delete email that doesn’t render well on their mobiles! While inline CSS support has come a long way, you can’t rely on all email clients to respond well to your design – it’s always better to be safe than sorry!

By designing for mobile, which is the most limited, you ensure that your mail will read well on other, more forgiving devices. Here’s some points that will help you design an email for mobile.

  • Keep your links large enough to be selectable with fingers
  • Keep large images to a minimum
  • Use large fonts
  • Use concise copy and calls to action
  • Avoid elements that require java or flash – rather use a .gif

Design for the Lowest Common Denominator

What’s meant by this is that you should create your email to be read by the widest possible audience and prepare for worst case scenarios.

To begin, you should design on a width of 600 pixels. Not only does this help with your email being rendered on as many devices and clients as possible, but it also helps it perform better in preview panes that are becoming more and more popular in email clients around the world.

You should always assume that your images will be blocked, or won’t load – so you should include alt-text on your images and have a good copy to image ratio.

Some email clients haven’t caught up with the times yet and don’t support certain fonts. Because of this, it’s best to stick to basic, cross-platform fonts such as Arial, Verdana, Georgia, and Times New Roman.

Be careful with using layered images and backgrounds. Outlook generally doesn’t support background images. Always use a solid background colour as a fallback and never include important information in the background.

  • Design on a width of 600px
  • Use Alt Text on your images
  • Always assume your images will completely fail to load
  • Stick with basic, cross platform fonts
  • Use solid background colours
  • Never rely on the background

Email Development Guidelines

Just as there are best practices for designing an email, there are a few things to keep in mind when coding your own HTML newsletter.

Code According to the Table Element

Code all structures using the table element and use element attributes such as cellpadding, valign and width, to set table dimensions. The goal here is to achieve a box-model structure, similar what was discussed above.

Keep CSS Simple

Avoid complex declarations in the name of style (“font:#000 12px Arial, Helvetica, sans-serif;”)  shorthand code (IE: #000 instead of #000000), CSS layout properties (IE: slot, position, clear, visibility, etc.) or complex selectors (IE: descendant, child or sibling selectors, and pseudo-elements).

In addition, be sure to inline all CSS before sending. Most email service providers will do this automatically.

Know the Limits

Use absolute links for your images and be sure that they’re hosted on a reliable, trusted server for the best performance possible. This means that your pictures can be accessed from anywhere on the web because they’re stored on an accessible location. Some email service providers provide image hosting for a fee or for free.

It’s a good idea to stay away from Java and Flash code, as almost all email clients reject it.

In the End…

SharpSpring Mail + recommends using single column layouts or symmetrical designs which are able to restructure properly on smaller screens. This will maximize the efficiency and readability of your emails.

SharpSpring Mail + also offers responsive email design templates that are created to render on a wide variety of mobile devices and computer applications. We also offer guidance and resources that allow you to get the most out of your email.

  • Author: maryka.burger

  • Maryka has worked across multiple industries ranging from hard news journalism to digital tech companies and advertising. She is an expert at building online presence, and offers a wealth of knowledge on digital marketing, social media and automation trends to agencies and digital start-ups.