Best practices: Email HTML

Attentive offers an HTML editor you can use if you prefer to code emails from scratch or import an existing email. Our HTML editor is entirely independent of our drag-and-drop editor; therefore, switching from one editor to another causes you to have to start over from scratch. However, if you want to incorporate HTML into your drag-and-drop email, you can do this by adding an HTML row. For information on how to use the HTML editor, see Design your email in HTML.

Note: Attentive can’t view or edit HTML on your behalf. We only advise that you use this feature if you have email HTML experience.

Add preview text

When designing your email with HTML, you must include the preview text in your HTML. The Preview text field for both campaigns and journeys isn't applied when you design your email with HTML.

Set your email width to 600px or less

Most subscribers read emails on narrow screens, so keeping the width under 600px ensures that the content is readable to all users. Attentive sets all of our email templates to 600px, and the preview reflects a 600px width. 

Note: If you’re using the HTML block in the drag-and-drop editor, setting the block’s content width to be wider than the email’s may cause unintended results.

Use inline CSS

Some email providers, such as Gmail, remove external CSS or style tags from your email’s HTML. Because of this, you should add CSS inline with HTML.

Use media queries to optimize for mobile devices

If the design allows you to do so, we recommend adjusting the text size and ensuring that content is mobile-friendly.

Avoid JavaScript and video elements

JavaScript and video elements aren’t guaranteed to appear in your email. This is because mailbox providers:

  • don’t render video content reliably.
  • strip tags from your HTML.
  • view these elements as a security threat that could lead to deliverability issues.

Keep styling simple

The more complex styling you use, the less likely that all email providers will support it. We recommend that you research which CSS properties are supported for each mailbox provider before using them.

Test your email before sending it

If you’re coding from scratch, it’s especially important to double check that the email appears the way you intend. We recommend previewing it, then sending yourself a test email before sending it to subscribers.

 

Learn more about Attentive Email

If you're interested in learning more about Attentive Email, please submit your information here.

Articles in this section

Was this article helpful?
0 out of 0 found this helpful