Creating a perfect HTML code for a newsletter, promotion, or other email marketing campaign is comfortable with these three elements. Then we will explain the Basic Rules of how to design an HTML email that looks good in each of the mailboxes: from Gmail to Outlook.
In a previous article, we discussed the six critical elements for designing email templates (the essentials). After your comments, we decided to dig further into the subject of the HTML code rules proper to Email Marketing. Especially those related to CSS themes and images.
- For the structure
- for email, avoid CSS
Gmail and other mailboxes do not support CSS (Style Sheets that are responsible for defining the structure of your HTML), so you should not use it in your HTML for email marketing campaigns. Most mail managers only support basic styles of HTML (font-family, font-weight, among others) and not advanced styles (such as bright, float, and z-index).
Another tip when it comes to formatting is to avoid short forms of code; it must be written in full. Here is an example of HTML email code for images:
It is not just that mailboxes do not support most of the modern CSS, but that they cannot refer to external files. By not loading them, they will also not apply styles that are generally defined in style labels inside the head. Many of these limitations are related to security because the loading of external files can affect the web where the mailbox is loaded.
This is why you should use the INLINE style in classes. Classes are not displayed well in some mail managers. For your HTML email template, add the form to each of the tags so that it does not fail at the time of visualization, as the image below:
Other times it is related to a low evolution of mailboxes and the need to maintain compatibility with previous versions. By the internal rules of each email client, the HTML code of an email does not always follow the same rules as for web design.
- prefer tables for your HTML template
When creating your HTML for an email campaign, you must use tables. Think first of the distribution you want for the content of your email (such as images, texts, and links). This way, you can create tables by placing each portion of the material in each cell in the table.
Level block labels such as <h1> or <p> can cause problems in some mailboxes. Use cells <td> to contain the text inside and apply inline styles, as indicated in the previous point.
The tables can have as many rows and columns as you need, but we recommend that they have a maximum width of 600 pixels. This width makes it easier to adapt in a mobile version so that your template is responsive. Also, the “Above the fold” concept also applies to email templates. The critical information in the mail should appear in the first 300-500 px since that is the average height of the “preview” of the majority of the emails.
- “Div”: not recommended
Mail managers interpret <div> tags in very different ways, so it is not advisable to use them. However, if you are going to use them, it is recommended that the entire structure of the tables be within a div containing the tag (for more information about the div tag in HTML5, read here). To make your arrangement even more flexible, you can include a table inside a cell or put one table under another.
- For content
- choose a universal typography
For fonts, you must verify that you use a source available on all devices. If the source you use is not open on the receiver device, whether mobile or desktop, the manager will replace it with the default. Finally, the content will be displayed differently. The standard fonts are Arial, Comic Sans MS, Courier New, Georgia, Lucida, Tahoma, Times New Roman, Trebuchet MS, and Verdana.
The use of Comic Sans MS is not recommended for reasons of image and seriousness. On the other hand, Google Fonts are an excellent option to give a modern copy. It should be ensured that the source used is universally available. As a tip, the most typical is Open Sans.
- Customize your links
We don’t always want the links to be the standard blue color. To change them to a tone closer to your brand’s image, use <span> tags between <A> and </a> to modify the format.
Also, if you want an extra effect, try the mouse_over or the hover effect. However, don’t trust it to work in all mailboxes. Remember to run tests before sending them massively.
- For images and interactive content:
- the Alt Attribute of the image
Unlike public Mail managers such as Gmail, Hotmail, and Yahoo, we know that most desktop managers block pictures and that the reader will not see them if he does not press the ‘show images’ button. It is for this reason that we must give our models the alt attribute. Alt text or ALT attribute is the alternative text that is displayed when an image is not downloaded or blocked.
The alt attribute is essential for your reader’s experience, but also issues of deliverability of your email. By showing that images of your shipments are worth downloading, you encourage your subscribers to add to their contact list.
It includes font and color attributes in <img> tags to format the alt attribute in different Mail managers. For more details on how to style it, read Litmus ‘ recommendations in its “Ultimate guide to styled Alt text in Email.”
- The weight of the images (and the code)
Before you think about adding pictures, stick to the rule of 75. This means that the maximum recommended size of the HTML code is 75 kb.
It is recommended that the weight of all images does not exceed 300 KB. Images must be loaded in the appropriate size, never adjusted via Design or CSS.
You should always keep in mind how the design will look. That is if it is valid even if the Mail manager does not download the images.
- special features: GIF, emoji’s and videos
Animated gifs, emoticons, and videos look very different in every email manager. However, they are elements that readers like today. To ensure that the intention to generate more engaging content does not damage the design, it is recommended to test different mailboxes and devices to verify that the expected effect has been achieved.
Finally, about using Flash Player, don’t use it! It is a bad practice that is not supported by managers for safety reasons. If you decide to use it, it is highly likely that your mail will be blocked or sent to SPAM.
- so that your HTML does not look like spam: Javascript and small print
To avoid problems with security filters, we recommend not to use JavaScript.
Also, another good practice is not to downsize the letters too much and not to use the red color too much. Gmail usually considers it suspicious.
If you want to try even more advanced items such as carousels, sliders or search boxes, we invite you to review the new trend of email Kinetic on the email Monks Blog.
- Technical Recommendations for HTML images
- Add the alt attribute to the pictures thinking of those who do not download the photos.
- Use format images. GIFS, JP,EG or PNG (avoid. BPM).
- Remember border value at 0.
- Includes images that have style= “display: block;” to avoid spaces below them.
- You must include the width attribute and avoid setting the height of the images.
- Make your design thinking that not all mail managers support background images, but you can consider using the bgcolor attribute for the background of cells or tables.
- Remember that many of your clients will review your campaign from your mobile, so you must make your mailing responsive. Add the media query in the head of your HTML.
Conclusion: try and know your contacts
Know your audience to find out what kind of mail client they use and what e-mails they like to receive. Don’t try to add emoji’s if your brand image is dangerous. It also takes more time to check how your mobile Mail looks if your readers are mostly millennials.
If you want to verify the compatibility of your HTML code with each email manager or just see a specific detail, we invite you to visit the “Emails standard project” project that reviews each of the managers and their criteria.
According to this, you can dare to use some functions or others. Don’t forget to do multiple tests before making the actual sending of your campaign and check it on different email clients (Gmail, Yahoo, and Outlook, among others) and different devices. Remember that 42% of subscribers unsubscribe from a newsletter that does not appear responsive on their cell phone.