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. 
  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.

Message Size

Some email clients impose a size limit on the HTML content of your messaging and clip anything over that limit. This is currently around 100KB, excluding images. Your total message size, including images, should not be over 1MB. 

This limit may be subject to change, depending on the email client.

Every HTML element you use must be defined on the backend, which can increase the size of your HTML. To handle this limit in Email Composer:

  • Minimize the number of elements like empty rows you use.
  • Use padding instead of a divider to keep your message weight low.
  • Start with clean plain text and apply formatting from there. If you’re changing text formatting, strip the existing formatting before applying anything new.
  • Consider using JPEG for some images. These will be smaller in file size than PNG files but may 

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.

Top