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 700px or less
Most subscribers read emails on narrow screens, so keeping the width under 700px ensures that the content is readable to all users. Attentive sets all of our email templates to 675px, and the preview reflects a 675px width.
Historical email standards often cite 600px as the best width, but as technology adapts this is no longer the case. For example, previous recommendations limited email width to 640px because Gmail would not display background colors beyond this width, however an update to Gmail allows background colors to be displayed regardless of email width.
While you have the freedom to choose, Attentive recommends keeping the width under 675px.
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.