How to create an email that always looks good?

When sending a message, it’s important to stick to a couple of rules that will help you make a lasting effect on your readers. This article will list the most useful practices when working with our new editor.

General

  1. Make sure your message isn’t wider than 600px. This is the default width of a message that is supported by email clients, so it’s best not to go over it in order to avoid horizontal scrollbars.
  2. Keep your most important information above the fold. “Above-the-fold” is the 400-450 pixel space subscribers see when they open the message – everything that fits on the screen and can be seen without scrolling.
  3. Have more text than images in the message.
  4. Make the message colors consistent with your brand.
  5. Personalize the message where you can, for example by using the [[name]] or [[firstname]] tag. Learn more about personalization.
  6. Your email content should focus on a simple message, emphasizing the unique selling points.
  7. Your buttons should have a clear CTA (Call to Action) to make sure your readers know what is expected of them.
  8. Add social media links to increase your following and the message reach.
  9. Add a signature with details who is writing the message (photo, name, role).
  10. You can work on premade templates and adjust them to your needs for a quick start.
  11. Always save reusable blocks and sections to My blocks, so you don’t have to recreate them for each message.
  12. Test your message on as many email clients as you can.

Structure

  1. Include a header with your logo and a link to view the message online at the top.
  2. Use the same alignment across your message. If you decide you want to center the message text, make sure all the other elements are also centered.
  3. Use sections to make sure your message has the right hierarchy. Start from the most important information.
  4. Showcase your products or information in columns. You can also use them to connect images with text horizontally.
  5. Your messages should be clear and easy to scan through. Don’t put too many elements to avoid the message looking crowded. Make sure your message is clear and to the point.
  6. Add white space to create some empty room in your message. Use the spacer element to achieve that.
  7. Spacer can also be used to level out any differences in columns length.
  8. Your header and footer should be easily distinguishable from the rest of the message.

Text

  1. Use font size between 14-16px for best legibility.
  2. Don’t use more than 3 fonts in your message for best look.
  3. Contrast your words against the background. If you have a dark background, use light font colors.
  4. One block of text can have multiple fonts and styling. Use it to highlight the most important information. You can copy your styling from word editing software such as Microsoft Word.
  5. Always set up a replacement, fallback font when using a webfont. This makes sure your message will display correctly on multiple email clients.
  6. Be mindful of long words and big font. Keep in mind how they will look on the mobile version.
  7. If you’re using in-text hyperlinks, make sure they have a different color from the rest of the text and use underscore.

Images and video

  1. If you’re looking to add an image to a section or a background, upload images that are 1920px wide for best definition.
  2. Always add a background color for your message or section. It will be showed if the background image cannot be displayed in an email client. It should have similar color to your background image.
  3. Use GIFs to attract your readers attention.
  4. When using video, mind the fact that we pull the thumbnail directly from YouTube or Vimeo.

Tutorial video