To write an e-mail that works for all of the clients via e-mail, or almost everyone, is important if we want to make a successful e-mail marketing campaign, additionally we want the e-mails to be in HTML. An e-mail in HTML is nothing more than a web page, but in spite of the fact that we are in an era of HTML5 and CSS3, talking about e-mails in HTML should be synonymous with simplicity, back to the basics. In fact, as basic as possible. For some e-mail clients, plain text is better than nothing.
But, what happens if we want to give style and design to e-mails? What is there to consider?
WYSIWYG
It’s important to write the code HTML without the help of WYSIWYG editors (What you see is what you get). These can add invalid code to HTML e-mails in the structure of HTML. It may be a good idea to use an existing template that’s compatible with Activecampaign or Mailchimp.
“Multipart/Alternative MIME”
To ensure that a greater number of people can receive the e-mail properly that we are sending, it’s good practice to also send a plain text version, an alternative to the HTML version. Sending it in the “Multipart/Alternative MIME” format and using an e-mail service provider makes the process simpler and more secure.
Good Practice
Focus on the content as it is most important for the campaign
The images should be minimal, or at least shouldn't be a central factor. But if you must use them, then they should be hosted on a publicly accessible server with absolute links that lead to the images. The server should be fast. Many clients are not shown the image automatically and according to a study made in the last few years, 40% of the people don’t even click on the link, nor do they click on the classic “show images” button.
Maintaining the simplicity of the HTML structure, you should forget the “divs” and use tables. They not only work on Internet Explorer and Chrome, but also in Outlook and are included in Microsoft Word.
The e-mail should not be too wide. The majority of the people read emails from their mobile devices so 600px wide is a good idea.
Test and quizzes
As always, to test it is mandatory, the list of e-mailed clients is almost infinite, and many people use them. Surely it will be possible to test it with Outlook, Outlook 2007, Outlook 2003, Gmail, Hotmail, but not much more. That’s why simplifying is the best. If not, there are always tools to test it such as MailChimp Inbox Inspector.
Webmail, Tags, and CSS
Webmail like Gmail or Outlook are not interested that your code substitutes for theirs, it will clean everything that is inside the tags HEAD, BODY and DOCTYPE; Javascript, background colors, and CSS styles. The majority of CSS will not function.
The trick is to use the CSS styles online. Applying the style in line in relation to other styles gives you priority. It might be a good idea to apply the styles in line after designing the entire e-mail, therefore saving time. On the other hand, there are tools that automatically create CSS styles in line catching the styles that are inside the HEAD.
Typography
“Keeping it simple” is the key, it’s also good to practice using a font that’s a cross-platform and take into account that it’s not the same as a website. In HTML e-mail these fonts, for example, Gotham, may not work. Arial, Geneva, or George are fonts that tend to work correctly.
Web Fonts
Some e-mail customers, among them iOS Mail, Apple Mail, or Thunderbird accept the use of the CSS @import rule, which allows the use of fonts from Google Web Fonts or FontDeck. This functionality is still at an experimental phase and seems to me important to invest time in other concepts related with sending HTML e-mails and simplifying them.
Written by Chiyana Simoes
Translated by Emily Smith, INUSUAL intern
Sources:
How To Code HTML Emails
Coding your Emails
Premailer
Typography
