Email Layout Design Best Practices

This Best Practice article describes topics an Email Designer should be aware of when building Layouts for Activator Approved Email.

Building the correct basic setup:

First, start with a breakdown of the basic setup for your email into sections.

A well-designed email is typically set up with a header section, a body section containing an intro text, the message(s) of the email, an outro text, and a footer section.
Please see the example to the right.

All emails created in Activator have a width of 600px, ensuring that the email is supported by most email clients on desktop computers and mobile devices.

After deciding which content to add to your sections, you can start building the different sections in Activator.

A section is built by using three core elements:

1. Layout container (The purple line)
- This container allows you to save your design as a layout. This mandatory element unlocks the option to add a row container.

2. Row container (The blue line)
- This container allows you to add multiple column setups into one layout container by having more than one row container per layout.

3. Column container (The green line)
- This container allows you to split up your design into multiple columns by adding multiple columns to your row container.

Working with multiple rows and columns:
As mentioned above, it is possible to work with multiple rows and columns, but if this isn’t done correctly, the email may not be displayed as expected on the end device.

TIP: A row container can only contain 1 line of column containers, meaning: If you know that your content will need both a full-width column and a 50/50 column setup, then you need to split it into two rows. In the example to the right, there is a row container for each line of columns.

A good way to start an email is by start building the container blocks first, which become the base of your email. After placing these, you can add content elements like text, images, buttons, lines, and dividers. You can read more about email components here Email Components

Working with text:

When you add text to your email, it is important to choose the font family because the default font looks like Arial. Most companies use Arial as their web font, to make sure the font is supported by the email program the receiver is using.

5 TIPS FOR FONT:

Font family - This field should never be empty. ALWAYS remember to pick a font family to ensure your email will be displayed with the correct font.
Font weight - Set the weight of your font, and choose the text pieces that need to stand out, by using italics or bold.
Font size - The default is 16px, but a headline is often 30px. Body text is often between 12-14px.
Line height - A good rule of thumb regarding the line height is to add 4px to the font size. If your font size is 12px, your line height should be 16px. This will give the correct spacing between the lines.
Padding - Please always add a 10px padding to both the left and the right side of your text box to prevent the text from going all the way to the edge when the email is read on a mobile.

Best practice for designing an email:

When designing an email, we have a few best practice tips:

Keep your email as short and sharp as possible.
If you start your email with a full-width image, try not to make it too tall to prevent too much scrolling. Alternatively, you can hide the image on mobile, so the receiver reading the email on mobile won’t skip reading it because they have to scroll too much to reach the message.
If you have CTAs (call to action buttons), ensure the button appears before the “fold” or the scroll area. If the CTAs are too far down the page, the receiver might not reach the CTA.
Remember to keep it to a MAX of only 2 CTAs per email. The receiver will likely not click any if you have 4-5 CTAs.