Email Design Best Practices

  • Updated

Personalize Your Emails

Personalization is an essential part of email design because humanizing your messages can increase engagement from your contacts and ultimately benefit deliverability.

  • One of the best places to practice personalization is in the subject line of your email. The subject line plays a primary role in persuading contacts to interact with your content. Adding a personal touch can be a thoughtful way to initiate a positive connection with your contacts.
  • When personalizing, always make sure to test the fallback text for proper grammar in the event that your personalized text does not populate with the contact’s information.

To learn all the ways you can personalize an email, see our guide: Email Campaign Personalization Guide

Use Responsive Design

Responsive Design considers the variety of viewports, email platforms, and environments within which a person will view your content. Being proactive about responsive design helps minimize the circumstances under which your email message may render improperly and ensures that your content is being viewed as intended.

  • Try incorporating white space into your design. Leaving some screen space can make content easier to read on smaller screens.
  • Use shorter paragraphs and smaller file sizes to make any email message more mobile-friendly.
  • Test your email messages by sending them to as many different devices and email clients as possible.
  • Create Responsive, Adaptive, and Mobile-friendly Designs

Incorporate Images Efficiently

Images are one of the most effective ways of communicating with your audience. Following best practices for incorporating images into your email designs can help you send more precise messages and leave lasting impressions on your contacts.

  • Always set the dimensions for each image so that they fit the width of your email. For images spanning the width of your email, set the pixel width to 600px. To fit an image into one column in a two-column section, set the image width to 300px or 50%.
  • Choose the correct file format when sending your email message. The best and most commonly used image file types for email designs are JPG/JPEG and PNG because they strike a good balance between image quality and small file sizes.
  • Add alt text to your images! Not only is this practice beneficial for people with visual impairments, but it’s also helpful in providing contacts with context to understand what an image represents when it doesn’t load correctly.
  • Make sure your images are visible in dark mode by testing emails on devices with dark mode enabled. For more information, see Can I Design My Act-On Email in Dark Mode?
  • Background Images

Finetune Style Elements

Fonts

  • Choose a font size that is larger than 13pt for your message body and 16pt for titles. Always check to make sure your fonts are legible when testing your emails.
  • Choose a websafe font that will render reliably across most email clients.
  • You can also use the default email font. The three most popular desktop email clients have the following defaults:
    • Gmail: Arial
    • Microsoft Outlook: Times New Roman
    • Apple Mail: Helvetica Neue
  • Some email clients reject CSS shorthand for the font property, so make sure to declare font properties individually like this: 
    p { font-weight: bold; font-size: 1em; line-height: 1.2em; font-family: georgia,times,serif;}

Color

  • Some email clients don’t support shorthand hexadecimal colors like color:#f60, so use the longhand form, color:#ff6600, to get the best results.
  • Some email clients will overwrite your link colors with their defaults. You can set a default color for each link inline and then add a redundant span inside the <a> tag to get around this: 
    <a href="http://somesite.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a 
    link</span></a>
  • Many email clients ignore background colors specified in your CSS or the <body> tag. Set background colors by wrapping your entire email in a 100% width table and giving the table background color. 
    <table cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td
    bgcolor=”#000000”>Your email code goes here.</td></tr></table>
  • Use contrasting colors to make your text easier to read.
  • Make sure that your text and designs are still visible to people with color blindness.
  • Use colors to make your CTAs stand out from the rest of the email.

Email Header, Body, Signature, and Footer

  • Using an email header is considered standard practice for email marketing, so you should never forget to include one! Visit How to Create Custom Email Headers for more information.
  • To get more consistent paragraph spacing for your email body, set the margin inline via CSS for every paragraph in your email. 
    <p style="margin: 0 1 1.6em 0;">
  • You can also avoid paragraphs altogether and set the text formatting inline in the table cell.
  • Email signatures strengthen brand recognition, marketing personalization and provide your contact information. To learn more, visit Create and Use Email Signatures
  • Email footers are used to convey legal disclosures and provide contacts with basic information to comply with regulations set by the CAN-SPAM Act. You can learn more about customizing the footer to match your branding by going to How to Create Custom Email Footers

Tables

Act-On always uses tables because they are widely supported across virtually all email clients. Using nested tables as the framework for your email will get you the best results when dealing with buggier email clients and is much more reliable than setting left and right margins or paddings for table cells.

Here are some things to keep in mind when coding your table structure:

  • Always specify a cell width
  • Some email clients (like Gmail or Outlook) have inconsistent support for float, margin, and padding within table cells. The most reliable way to set the width of your table is by setting a width for each cell and not the table itself. 
    <table cellspacing="0" cellpadding="10" border="0"><tr><td width="80"></td><td
    width="280"></td></tr></table>
  • Never use percentage-based widths, and stick to pixels to eliminate inconsistencies in email clients (like Outlook).
  • To add padding to each cell, use either the cell padding attribute of the table, or the CSS padding for each cell, but never both.
  • Email designs should have a width of 600px to fit various email inboxes.
  • Avoid whitespace in table cells as some email clients can add additional padding above or below cell contents, which can break your design.

Prioritize Key Information 

  • Place your call-to-action (CTA) as high as possible, and organize the rest of the information in your email message in descending order of importance.
  • Put information that your contacts need to know and any other important content towards the top.
  • Don’t overcrowd emails with too many CTAs or links. Your contact should be able to scan the message in a matter of seconds to gain a brief understanding of the topics by using the email’s layout, hierarchy, headlines, and images to focus their attention on the most relevant information.

Design and Test for Deliverability

  • Always accompany your HTML email with a plain text version. When spam filters see an HTML email without a plain text counterpart, it is more likely to be flagged as spam.
  • Email clients continually change their standards support, so it’s important to regularly test and retest your email designs.
  • Keep your designs simple! Complex email designs may fail if an email client receives them with inadequate standards support.

Was this article helpful?

Have more questions? Submit a request