When creating an email campaign, you must always preview and test the email on different email clients before sending it. Indeed, some email clients do not support all HTML content as email HTML isn't as developed as web HTML. Interactive elements such as Flash or JavaScript won't work in most email clients.
We recommend the use of the HTML block only to advanced users. Adding custom HTML code may affect your email campaign display on some email clients. Custom HTML has to be as email compliant and responsive as possible. To ensure that your email displays as expected on email clients, we highly recommend testing your email campaign before sending it to your contacts.
What is the difference between the HTML editor and the HTML block?
You can customize your email campaign design with two different HTML tools:
The HTML editor allows you to design your entire email campaign using HTML. To use the HTML editor, create an email campaign and choose the HTML editor from the Design step. To learn more, check our dedicated article Upload an HTML file to design your campaign.
The HTML block can be used in the Drag & Drop Editor to design some elements of your email with HTML code. To use the HTML editor, create an email campaign, and from the Design step, choose a template and drag and drop the HTML block into your email design:
Which HTML formats can I use in my email campaign?
Refer to the table below to know which HTML formats are safe to use or not in your email campaign:
| ✅ Safe to use | 🟠 Use with caution | ❌ Never use |
|
|
|
CSS is limited when used in email HTML. To obtain the best results when designing your email campaign, we recommend you:
- Use very simple CSS,
Use this website as a dictionary to check if your CSS will be well supported on email clients. - Use CSS only for general style elements such as font and colors,
- Use inline CSS instead of embedded CSS. In inline CSS, any background colors or <body> settings should be handled with a 100% wide <table> around your email.
❗️ ImportantSome email clients remove lines of code that start with a comma or period. Add a space at the beginning of every line that starts with a comma or period to avoid this.
Use fonts that are easy to read and easily readable by any email client. Check the fonts you are using before sending your email campaign. To make sure that your clients will be able to read your email campaign with a font that you chose, add a fallback font in the Drag & Drop Editor. You will be able to choose which fonts to use if the one you chose is not supported by your recipients' email client. To learn more, check our dedicated article Add Google and fallback fonts in the Drag & Drop Editor.
We also recommend you use a maximum of two to three fonts in one email campaign. To make your email easy to read, choose a size between 14 and 16px for your body text: 14px for long emails with paragraphs, and 16px for short ones (two to three sentences).
You can easily add image maps to your campaigns by adding a link to your image block in the Drag & Drop Editor:
- Add an image block to your campaign design and click the image.
- Click Add link. The Insert/edit link window opens.
-
Fill in the information regarding the:
- Type of link which is often an Absolute link (URL) but you can choose any other type of link,
- Link target which is the link you want your image to lead to,
- Link title is the word you want to display when hovering over the image.
- Click Insert.
By default, we escape the HTML (and JS) content of all variables. This means any HTML passed within a variable will be automatically escaped and printed as text. For example, if your variable content is <h1>My title</h1>, then your template would output exactly this text within your email: <h1>My title</h1> rather than outputting the phrase “My title” formatted as an H1 title.
To learn how to disable auto-escaping, check our dedicated article Disable auto-escaping and display double curly brackets in your emails.
⏩ What's next?
- Series of articles for the Drag & Drop Editor
- Upload an HTML file to design your campaign
- Creating an email campaign
- Add Google and fallback fonts in the Drag & Drop Editor
- How to test your email campaign
🤔 Have a question?
If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.
If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo expert partner.