Email Best Practices for Publishers Part II: Design Optimization

Jump to:
Part I: Planning & Scheduling
Part II: Design Optimization
Part III: Content Optimization
Part IV: Tracking Performance
Part V: Split Testing

Introduction

Email marketing is an essential tool for communicating with your subscribers. It’s the most affordable way to drive traffic to your digital editions, remind readers of their subscription status, onboard new subscribers, and identify segments of your audience for specialized campaigns. When you look at the effectiveness and ROI of email compared to social media, it’s pretty clear that email is more effective. That’s not to say social media doesn’t have its place, but that’s an article for another day. Today, we’re going to look at email best practices.

In part one of this series, I covered planning and scheduling – which includes defining the goal of your email, audience management, and schedule optimization. In this article, I’m going to cover the overall aesthetic of your email template. This includes layout, imagery, typography, color palette, and accessibility.

Part II: Design Optimization

The design of an email looks at the overall aesthetic, size, text, fonts, colors, etc. When taken as a whole, these attributes can affect the visual impact of your email and help or hinder your message. A good design will call attention to your message, make your brand more recognizable, and increase engagement with your digital editions.

Brand Optimization

Brand optimization is a crucial part of design optimization. Every aspect of your email should be on-brand. Adhering to some of the following basic rules will help to ensure successful campaigns and sustainable brand reputation:

• Place your logo in the center or top-left corner of the email
• Include your brand name in the “from” field using an identifiable email address
• Be consistent with the design elements across all templates and campaign types.

Layout

Keep it Simple with a Single Column Layout

Studies indicate that an ideal email width is between 500 to 650 pixels, and a vertical layout is preferred over a horizontal one. Always optimize for mobile devices, and limit yourself to four or five sections for better visual emphasis. Try and use graphics and images to define content sections whenever possible.

A design with a responsive, single-column layout tends to look and behave better on mobile devices.

If you can’t avoid a multi-column layout, be sure the columns stack on mobile devices and pay close attention to the content orientation so that it stacks in the correct order.

Display Different Components on Desktop vs Mobile

There may be occasions when you wish to show or hide elements of your email depending on whether it’s viewed on desktop or mobile. For example, you can add a mobile-optimized image that is a better size ratio or call-to-action (CTA) button that will only display when a user opens the email on a mobile device.

Dynamically Sized Elements

Increasing or decreasing font sizes and images using media queries can quickly and easily create a better user experience on all devices. Using media queries, you can change the font or image size according to the viewport width (screen width) of a user’s device.

Use Touchable CTAs

Make sure your call-to-action button has plenty of real estate on mobile. Your buttons should be at least 44px wide. You can also make the area around the button touchable as part of the same link, so long as it’s not too close to other content. You can also make some of the areas around the button touchable as part of the same link, as long as it’s not too close to other buttons.

Use High-Contrast Designs

Mobile users like to lower their screen brightness to conserve battery life.

Email designs with higher contrasts will mean better readability, especially for mobile users who are reading your email outside in bright sunlight.

Graphics & Images

One of the biggest challenges facing email marketers is image blocking. One solution is to use alt tags to create pixel art in emails as a clever way to reach out to your subscribers who have set their mail clients to block images by default.

Many email clients do not support background images, so try and avoid background images layered behind text. Always make feature headers or offer images easily clickable, and use retina images to avoid blurred logos, images, and icons in your emails.

Try not to make your email too image-heavy. It’s easy to forget about file size in an email but you want to make sure your images are optimized. Especially since more than 50% of emails are opened on mobile devices. The bigger the email, the longer it will take for mobile subscribers to view and thus create a negative experience with your email.

Fonts & Typeface

Using web fonts in your emails is always recommended, but not all mail clients offer universal support. Always be sure to set up web-safe fallback font. Font sizes should vary between desktop and mobile. The safest bet is to use 16-18px font size on desktop, and 14-16px on mobile.

It’s also critical to have a good contrast between your font and the background. If you have an older audience, you may want to go with larger fonts. Try and use a line-height that is about 6px larger than the font size. You can also use media queries to dynamically change the font based on the size of the viewport.

To avoid making your emails look cluttered, try sticking to fewer than three typefaces.

[bctt tweet="Email Best Practices for Publishers Part II: Design Optimization"]

Design for Accessibility

According to the World Health Organization, over 1.3 billion people live with some form of visual impairment. So it’s highly likely that some of your subscribers will, too.

There are many adaptive technologies available to help visually impaired and disabled people better access the internet and email. You can further assist this audience by making emails more accessible with a few design adjustments.

Use Semantic Code

Using semantic code is a basic fix that you can apply to your template’s code. It’s important to use the correct header (<h1>) and paragraph (<p>) tags. These tags allow the screen reader to differentiate between headings and paragraphs, which creates a more pleasant reading experience and allows the user to navigate your emails easier.

Set the HTML Language Attribute

Setting the language attribute is a simple fix made in the head of the email. You can set this by using lang=”” with the correct language code. This code tells screen readers to expect a certain language and pronounce or display the words in a specific way. You can set the language by using the two letters that correlate to the language the email is written in, such as “en” for English. For an English email, the code would look like lang=”en”. If the email was written in Spanish, you would use “es”. If you aren’t sure of which language code to use, you can reference this list.

Set the Title of the Email

Setting the <title> tag will provide a title and some context for users with assistive technology, such as screen readers. An additional benefit is that it will set a title on the tab of the webpage when viewing the email in a browser.

Use Character Encoding

Adding the following HTML to the top of your template

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

will play a major role in the way an email displays, especially with respect to special characters in non-Latin languages or when copying from a text editor like Microsoft Word. This code lets the browser or email client know which type of characters to expect in the subsequent code. It also ensures nothing breaks the reading pattern for a subscriber, whether they are reading the email themselves or using a screen reader.

Don’t Set Titles on Links

Try to avoid setting titles on links whenever possible. Instead, stick to including the key information either as part of the text or the link itself. Screen readers will break their reading pattern to read the title and it can make the content harder to understand.

Set and Style Alt Text

Setting the alt text of your images ensures your email is still readable before the images load. Alt text also serves a purpose for accessibility. Setting the right alt text will enable screen readers to accurately describe images. However, not all images need alt text. If you’re using an image purely for the aesthetics of the email (such as a spacer GIF or shadow), be sure to set an empty alt=”” on the image. This tells the screen reader to skip over these images.

Conclusion

A well-designed email will make your message more effective. While aesthetic elements such as colors, fonts, and layout all play an essential part in your campaigns, it’s important that you also think about accessibility during the design process.