Email Design Guidelines

Layout

Keep It Narrow. Most people don’t open emails in a full-screen window; instead, they scroll through a preview pane or viewing column that takes up only a portion of the screen. Added to that, consider that many people are using mobile email clients who, at best, have a few hun- dred pixels with which to work. A good maximum width to aim for is 600 pixels.

Know What Your Email Looks Like in a Minimal Preview Pane. For desktop email clients like Outlook and Apple Mail, the default preview pane is a tiny rectangle of space taking up lessthan 20% of the screen. Make sure that the first few hundred pixels at the top (and more spe-cifically, the top left) communicate useful information.

Don’t Rely on Using Background Images. Some email clients display background images; however, most do not, so it’s best to avoid relying on them to appear. Your use of background images should only be for enhancement and not as something your entire design depends on.

Consider Your Images Blocked by Default. Many people, either by email client defaults or personal preference, are blocking images in the HTML-formatted messages they are accept- ing. And then there are a small number of people who block HTML entirely. Only about 48% of email recipients see images automatically.

  • Email Clients that block images by default: Outlook, Thunderbird, Yahoo, AOL, Windows Mobile, Blackberry

Avoid All-Image Emails. The ratio of text to images should be around 60:40. Spam filters often use the ratio of images versus text as a flag to gauge whether an email is legitimate. All-imageemails are more likely to be marked as spam than mixed-content emails. Make sure your email design still gets the point across even when images are not displayed.


Typography

Your subscribers will almost always see the print content of your email before anything else. Our email provider does not allow web fonts, please use a web safe font.

Serif
Book Antiqua
Georgia
Palatino Linotype
Times New Roman

Sans-Serif
Arial
Arial Black
Comic Sans
Helvetica
Lucida Sans Unicode
Tahoma
Trebuchet MS
Verdana

Monospace
Courier New
Lucida Console

Each email client also has a preferred or default font which users would see instead of your chosen web font. The three most popular desktop email clients have the following defaults:

  • Apple Mail = Helvetica
  • Gmail = Arial
  • Microsoft Outlook = Times New Roman

Outlook is a special case. If a webfont fails in Outlook, it ignores the fallback fonts and just decides to render everything in Times New Roman. If this happens, add this CSS to your email and you should be good to go.

  
    <!--[if mso]>
      <style type="text/css">
      body, table, td, p, li, a {font-family: Arial, Helvetica, sans-serif !important;}
      </style>
    <![endif]-->
  

Add other elements like p, li, a, etc. if you need to fix Outlook rendering Times New Roman on those elements too.


Subject Line

  • A subject line should be: informative (mention some of the topics), short (or at least has the most important information at the start), and recognizable (so that it’s consistent with other emails from your client).
  • Do not use all CAPS. Keep the majority of your text in lowercase.
  • Avoid using unnecessary punctuation (!, $, 100%) to lower your spam ratings. Cannot have any special characters. Examples include: *, @, ©, ®, TM
  • Cannot contain website address.
  • Keep to 50 characters (including spaces).

Spam

CAN-SPAM Law
The CAN-SPAM Law requires that your emails must:

  • Have accurate “From” and “To” addresses, email headers, and routing information that iden- tifies the sender;
  • Avoid deceptive or misleading subject lines;
  • Contain an unsubscribe or opt-out mechanism; and
  • Identify itself as a commercial email and contain a valid physical address for the sender.

Avoid overuse of SPAM trigger words (eg, Click, Free, Sale, Discount, Win)


DOs AnD DOn’Ts Of EmAiL mArkETinG

Do Don't
Create an engaging subject line Exceed 50 characters within the subject line or use all caps or symbols
Apply Pre-Header Text that engages readers and explains the purpose of the email – this will help your email stand out in an inbox, especially with mobile browsing Use standard language in the Pre-Header Text area
Abide by the 60:40 image-to-text ratio Use 100% images – an image-heavy email will be flagged as SPAM, and images are not automatically displayed, causing the message to be missed
Incorporate alternative text (alt text) for all images – this tells recipients what the image is prior to downloading Leave images blank when not displayed
Keep the message concise and use engaging content Forget to tell clients what the message is about
Display a Call-to-Action early within the email Avoid placing the Call-to-Action (CTA) at the bottom of the email – recipients will miss this CTA if they do not scroll down
Keep it narrow – most recipients use a preview pane and/or browse emails on a mobile device Do not exceed 600 pixels
Utilize social media sharing buttons – adding this feature is shown to increase click-through rates

CSS

  • External style sheets are prohibited by nearly all email programs, and most email clients will strip out styles in the header. To ensure styles display, you must convert them to inline styles. A great resource for inlining your CSS is Campaign Monitor's CSS inlining tool.
  • Characters must be selected from within the US-ASCII character set (printable characters oc-cupying positions 0-127). Replace characters outside this range with suitable proxies (eg, two dashes for one em dash) or HTML character entities (eg, &copy; for ©).

Images

  • Image Maps. Use image maps sparingly. Instead, cut up the image into individual pieces so that each area that should be linked will be a separate image.
  • Scripts. No embedded scripting (JavaScript, VBScript, etc). No Flash or Rich Media. No video.
  • Linking. Images and links must use absolute URLs (cannot be embedded in the email itself). Image names cannot contain spaces and in some email clients are case sensitive. Do not put important content in images only.
  • ALT Tags. Always specify ALT text for images, especially images conveying information im- portant to the meaning of the mailing (eg, offer details). Unimportant images, like spacers and bullets, should receive null string ALT attributes (eg, alt=””).
  • Dimension. Most emails are 600-640px wide. However, to keep your image crisp on high-resolution displays, you need to make your image 2x the size (ie. 1200px) and use the image attributes and CSS to keep the image at the width you want.
  • File Size. 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’ll take for mobile subscribers to view and thus create a negative experience with your email. TinyPng is a great last step to images to help optimize.

Mobile Optimization

Email opens on mobile devices just keep increasing year after year. The latest stats are that over 68% of email opens occur on mobile. Making your emails mobile-friendly is easier than ever by:

  • Using a mobile-friendly template
  • Keep your subject line short
  • Use preheader text
  • Use minimal body copy
  • Use a clear and easy to click CTA button (According to a recent MIT study, the average size of an adult index finger is between 1.6cm and 2 cm, which translates to between 45 x 45px and 57 x 57px on a mobile device.)
  • Increase the size of body copy if it’s small on desktop emails. (16px is a good size for mobile)
  • Make sure your images aren’t too small or hard to see when on mobile

If you are coding your emails, there are two approaches to mobile emails: responsive and hybrid.

Responsive

  
    @media screen and (max-width: 480px) {
      .responsive-table {
          display: block;
          width: 100% !important;
      }

      .responsive-image {
          height: auto;
          max-width: 100% !important;
      }
    }
  

Hybrid

Hybrid gets a little more complex but relies on using a fluid layout that will shrink and grow with the size of the display. Plus, it doesn’t rely on media queries which can be a big bonus if you’re targeting email clients that don’t support media queries.