By: Amanda Garceau

Date: September 27, 2016

Email marketing is easy, right? Just write some words, plop a picture in, hit send and watch the web traffic spike and sales roll in. If only that were the case.

Every day we hear from new and prospective clients about their struggles with email marketing. While many come to us with deep experience others are completely new to email marketing. For both old hands and new recruits, we have created this guide for you that outlines the best practices we have refined and use every day.

For the first post in this series, we’ll dive into layout, fonts, images, mobile design, and inbox previews.

Email Layout Considerations

The layouts of your emails are more complex than just typing copy and hitting send. With the vast number of applications customers view email, devices they receive email on, and specific graphic elements you wish to employ, being aware of the different variables and how to plan and design your emails is crucial.

Email Width

Email width should be between 600-750 pixels. For mobile, the width should be set to 100%.

Consider designing your emails for mobile first. If your customers predominantly view their email on their smartphones, you will provide them with a better experience. Additionally, the most popular email app, Gmail, will not resize your emails if they are not designed mobile first.

In addition to the Gmail app, there are a quite a few other email clients that will not resize your emails because they do not support media queries:

  • Android Outlook Exchange via native client
  • Android Gmail app
  • Android Yahoo! Mail app
  • Gmail (Android Browser)
  • Outlook.com (Android Browser)
  • Yahoo! Mail (Android Browser)
  • Windows Phone 7
  • Windows Phone 8

Global Elements

Including common elements on all your emails provides consistency for your customers and creates a sense of direction and familiarity.

Typical header elements include:

  • Pre-header
  • Logo
  • A simplified site navigation

Typical footer elements include:

  • Unsubscribe link
  • Profile update link
  • View as web link
  • Social links
  • Physical address
  • Disclaimers
  • Copyright

Background Images

Achieve cross client compatibility by utilizing a method called Bulletproof Background Images, which ensures images show up in the emails you send (several versions of Outlook will not show images if you don’t).

Be warned, it can be difficult to work with this method if you are not somewhat familiar with HTML. While template builders typically provide a place for you to upload an image, with this method, there are several variables that must be hard coded into the HTML directly.

For example – to add a background image behind your content, wrap your content with:

<table cellpadding="0" cellspacing="0" border="0" height="300" width="100%">
  <tr>
    <td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" valign="top">
       <!--[if gte mso 9]>
       <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
         <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" />
         <v:textbox inset="0,0,0,0">
       <![endif]-->
       <div>
        [content goes here]
       </div>
       <!--[if gte mso 9]>
         </v:textbox>
       </v:rect>
       <![endif]-->
    </td>
  </tr>
</table>

Text Overlays

For text overlays, use web fonts when possible, this allows for images to be stacked above the text on mobile. In the following example, for the mobile version the text color is changed to black and shown separately from the image to improve readability.

nau

Alternate Images

If using web fonts over the image is not possible (often due to the need for using branded fonts), you may need to recreate the image for mobile. In this example, to ensure readability, an alternate image for mobile should be designed for and added to the HTML. As seen in the example below, an alternate image is provided for mobile since the desktop sized one will become too small to read when scaled down to mobile size.

Selecting Fonts

If you have data regarding the devices and email clients used by your audience, and the data shows that the majority of your readers are using custom web-font friendly email clients, then the risk to use a custom web-font may be worth it.

For email clients that don’t support custom web-fonts, be sure to have a web-safe font set as a backup and that the design of your email is still intact using the fallback font.

Cross-Platform Fonts

Fonts have limitations within email. Many email service providers will only render fonts that you have natively installed on your computer (Arial, Helvetica, etc.)  Unfortunately, computers all across the world only have about 10 common fonts:

  • Arial
  • Comic Sans
  • Courier New
  • Georgia
  • Impact
  • Palatino
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

The following fonts are widely supported, but make sure to include a fallback just in case:

  • Arial Black
  • Century Gothic
  • Geneva
  • Lucida
  • Lucida Sans
  • Lucida Grande
  • Courier
  • MS Serif
  • New York
  • Palatino Linotype
websafe_font_fallback

Custom Web-Fonts

Your brand is important, and a big part of your branding is the typography and fonts used in your materials. Unfortunately, support for custom fonts is very limited at this time. Some popular services for hosted fonts include Google Fonts or Fontdeck. Listed below are the small number of email clients support the use of custom fonts:

  • Outlook 2000
  • OS Mail
  • Apple Mail
  • Android (default client, not Gmail)
  • Thunderbird

Image Considerations

Animated GIFs

Animated GIFs can increase engagement and are supported across most email clients. The few that don’t, will display the first frame of the animation. Keep image sizes down, under 1MB.

animated_gif
promo_code

Alternate Text Styling

Before images are allowed to load, customers will see the text supplied as the alternate text of the image. If the image never loads, it is still nice to have a styled experience for the user. Style the image alternate text and ensure that image slices are not too short, otherwise the text will be cropped. Slice images in a way to mimic the image (i.e. text size and color). In the following example, even if the images never load your customers will still see the custom headline sizes and colors.

black_friday_mobile

Mobile Considerations

For a mobile-first approach, start with a single column layout.

For a completely fluid email that scales to any screen-size, single columns work the best. Design for smaller screens first, then add more features and content for larger screens as needed.

mobile_considerations

Automatic Links

On most mobile devices, content such as dates, phone numbers, addresses will be automatically hyperlinked. Be sure to properly account for this with CSS.

link_styles

Calls to Action (CTAs)

Any email should have at least one (and often times, only one) call to action. These are typically accomplished using a button or link to an external webpage. For links and buttons, ensure there is enough vertical and horizontal space between them to avoid unintentional clicks.

Keep the following dimensions in mind for touch navigation:

  • Average Index Finger = 45-57px
  • Average Thumb = 72px

Retina Display

With the popularity and sophistication of mobile devices, retina images should be used whenever possible to ensure that images look crisp on all devices. These high resolution images should be used especially for logos and icons. To create a retina image, it must be two times the size of a standard image.

Alternating Columns

A common layout for email includes a two column alternating image/text. Special considerations must be made when determining the stacking order for mobile. The natural stacking order is for the right column to fall under the left column:

guide

Line Breaks

Ensure that your text doesn’t wrap in strange places by using mobile line break tags. The tag is only applied to mobile devices, since the line break in the same place for desktop might not make sense.

text_display

Email Inbox Previews

Pre-Header

The pre-header text is used to customize the message that displays in the preview window of some email clients. Be mindful of the length of your subject line in relation to your pre-header. If your subject line is lengthy, your pre-header ext will get cut off.

Good use of pre-header text (Quality content, fun addition of emojis):

Free Shipping on Stocking Stuffers - Small sized packages to round out the perfect gift.   Stuff their stockings. 20% off.

Bad use of pre-header text (View in browser, Unsubscribe)

The Importance of Healthy Digestion - Email not displaying correctly? View it in your browser.

View As Webpage

To help view emails that may not properly render (especially on mobile), we’ve seen brands use a View as Webpage link in the pre-header. This allows for a quick link to view the web version.

However, there is risk that the text link will appear in the preview window, which is not ideal. We recommend moving this feature to the footer.

Spam Triggers

Subject lines (and email content) should not include spam trigger words. Below are a few obvious trigger words:

  • Free
  • Buy
  • Sale
  • Deal
  • Cheap
  • Earn
  • Income
  • Finance

Personalization

When possible, use personalization within the subject line and the email content. Personalization can range from name, age, location, and gender. Be sure to include a more generic subject line for email contacts that lack specific personalization information.

Subject Line Length

Be aware of how the subject line works together with the pre-header in an inbox preview pane. If your subject line is too long, your pre-header may be cut off. Most subject lines are between 41 and 50 characters.

Subject lines 61 – 70 characters long had the highest read rate (17%).

subject_line_length

Emojis

Emojis will help the email stand out in the inbox and help to increase the open rate. This is worth setting up an A/B test because the success of the emoji can be reliant on your industry and customer type.

For reference, here are MailChimp’s most popular emojis by subject line appearances :

emojis

From Names

For most email marketing, send emails from your brand or company name (not a personal name or a no-reply address).

Utilizing multiple ‘from names’ can help differentiates individual messages such as promotional versus transactional. Below are some well known companies and their use of multiple ‘from names’:

from_names

Bringing it all together

These guidelines are the general best practices for designing the layout, fonts, images, mobile design, and inbox previews for your email marketing program. Your subscriber analytics should also be reviewed to ensure that decisions are being made based on data. For example, if most of your audience is using Outlook 2003, the email should be designed and built in a way that will fallback gracefully. If your subscriber base is fairly up-to-date, this allows for more flexibility and customization.

And remember, testing is the key to ensuring your emails look spectacular in every email client.