Email Composer Best Practices
Contents
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:- Begin by creating a new template or selecting an existing template from the Templates List Page.
- Select the first row once your template loads. This will open the Row Properties in the Row tab.
- Scroll down to the Row background image section and turn the feature on.
- 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.
- 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
- To see the text over the row background, go to Content background color and set it to transparent.
- Select a Content component and drag it to the row content area.
- 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.- Follow the instructions to set a [Row background image].
- Add a Button component to your active row.
- Select the button to open the Content Properties tab.
- Set the Background color to transparent.
- Set your text color to one that contrasts with your chosen background. By default, it's set to #ffffff.
- Scroll down to the Border section and select More options.
- 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.
- 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
- 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
- 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
- Lucida Console
- Monaco