Email Composer Best Practices

Images

Make certain that your message can still be read and understood if a user has images turned off in their email client. To ensure readability and create an accessible message, use alt text for your images. 

Hero Images

When using a hero image, the image should be 500px - 700px in width. Email Composer should resize the image automatically for mobile. 

Row Background Images 

To create a row with a background image:
  1. Begin by creating a new template or selecting an existing template from the Templates List Page. 
  2. Select the first row once your template loads. This will open the Row Properties in the Row tab.
  3. Scroll down to the Row background image section and turn the feature on.
    The Row Background option shows as blue when activated by clicking the pill button.
  4. Select Change Image to open your image folder. Find the image you wish to use and select Insert
    • If you wish your image to stretch across the entire background, select the Full width option. 
  5. Not every email client supports background images. Go to Row background color and select a color that works with your design if you send to users who use the following email clients: 
    • Outlook desktop on Windows. Background images work on Outlook 2011 & Outlook 2016 on OS X, and on outlook.com
    • Lotus Notes 7
    • free.fr email client
    • T-Online.de email client
    • Xfinity / Comcast email client
  6. To see the text over the row background, go to Content background color and set it to transparent
  7. Select a Content component and drag it to the row content area. 
  8. Add content to the component. Your content should appear overlaid on the background. For example,

    When you add more components, they will have a transparent background.

Message Body Images

To avoid a small space between the middle and last images in a row of three, set the justification to centered for all the images.

Design

Buttons

General Notes
  • Button text should be under roughly 5 words/25 characters so the text won't wrap in mobile.
  • Consider creating mobile-specific buttons. You can hide specific components or rows so you can tailor your content to the environment. 
  • If you use the same button or buttons for each message, create a Saved Row with your formatted buttons. 
  • If you want to use a button that takes up a specific amount of space in a column, turn off auto-width. You can then select the column width percentage for your button.

  • For buttons that stack automatically in mobile, make sure Do not stack on mobile is turned off. When turned on, the slider button will appear blue.

Create a Transparent Button
Use a button's Background color and Border options to create a button that uses the Row background image as its fill. 
  1. Follow the instructions to set a [Row background image].
  2. Add a Button component to your active row. 
  3. Select the button to open the Content Properties tab. 
  4. Set the Background color to transparent.

  5. Set your text color to one that contrasts with your chosen background. By default, it's set to #ffffff.
  6. Scroll down to the Border section and select More options
  7. Set the type of line you wish to use, the color, and the line width for the top, right, bottom, and left borders of your button.

  8. Once you set those properties, your button should appear with a transparent background and visible border.

Email-safe Fonts

There are some limitations in ensuring consistent rendering of fonts across platforms. When creating HTML emails, choose a small list of fonts that are known to work across all platforms. A reliable selection of fonts resembles the following:
  • sans-serif: Helvetica, Arial, Verdana, Trebuchet MS
  • serif: Georgia, Times New Roman, Courier

Sans-Serif Web Safe Fonts

These are considered safest options for sans serif fonts. If you include these in your font selections, most people will see the design as you intend.
  • Arial
  • Arial Black
  • Tahoma
  • Trebuchet MS
  • Verdana
The following are widely supported fonts, but it's good practice to include a more common one as a backup in your font selection:
  • Century Gothic
  • Geneva
  • Lucida
  • Lucida Sans
  • Lucida Grande

Serif Web Safe Fonts

These are the safest options for serif fonts.
  • Courier
  • Courier New
  • Georgia
  • Times
  • Times New Roman
The following are widely supported fonts, but it's good practice to include a more common one as a backup in your font selection.
  • MS Serif
  • New York
  • Palatino
  • Palatino Linotype

Monospace Fonts

There are fewer monospace fonts with wide, cross-platform support, and these are the safest choices:
  • Courier
  • Courier New
These fonts are somewhat widely supported:
  • Lucida Console
  • Monaco

Widely Supported Cross-Platform Fonts

The following fonts are widely supported across platforms. Helvetica, Arial, Arial Black, Comic Sans, Courier New, Georgia, Impact, Charcoal, Lucida Console, Lucida Sans Unicode, Lucida Grande, Palatino Linotype, Book Antiqua, Palatino, Tahoma, Geneva, Times, Times New Roman, Trebuchet MS, Verdana, Monaco.

Contact us

Top