1/ The absence of a pre-header
Often forgotten by marketers and unknown by developers, the pre-header can nevertheless boost the opening rate. This is the first tag with display:none or visibility:hidden applied to qui arrive dans le <body> and the text that appears immediately after the subject of the mail.
Example without pre-header: the alternative text of the gif at the beginning of the email body is displayed in the email preview, we don’t know what to expect.
Example with pre-header: The important information is displayed right away, we recognize the intention of the email right away.
In order to integrate an email well and improve its open rate, we recommend that you pay special attention to this element.
2/ Do not use tables.
To place the elements of an email, it is almost impossible to do without tables.
The support of css display attributes like flex or grid and float being very partial, arrays are still a safe way to have a consistent layout on all platforms. They are still needed for Outlook versions 2007 to 2019 on Windows, to center the body of the email on some email clients and to realize some layouts with columns.
The case of Outlook on Windows is really singular since it does not interpret the css attributes width, padding, background-color and border on div tags and even removes some styles. Outlook represents almost 5% of email client users and is still widely used in the professional world, it is unthinkable not to implement alternative HTML structures dedicated to this email client. Fortunately, for optimal rendering on the maximum number of clients, it is possible to conditionally display these tables addressed to Outlook using the if [mso].
Two-column layout with a table structure is a good alternative for Outlook, in order to integrate an email well.
3/ Neglecting the choice of the Doctype
To avoid misinterpretation, a Doctype must be specified. This is especially true for emails opened via a browser rather than an application.
The most common doctype used by email clients is HTML5. By using this doctype you ensure that your mail will be displayed as you want in the vast majority of cases. However some rare mail clients remove the doctype, make sure that these do not alter the display of your email.
4/ Put everything in images, poor image management
When your domain name is not known to an email client, by default, it blocks the automatic downloading of images, the recipient must authorize the display of the images. The email displays “broken” or empty. There is a good chance that it will end up in the trash or in SPAM. An email with a single image is also more likely to be classified as SPAM.
In addition, the accessibility of these mails to people with reduced vision is greatly affected. It is impossible for a screen reader to interpret images. This is why, to obtain a well-built email, it is vital to control images with texts that are sensitive to the proper reading of the email and add alternative texts to it with the alt attribute.
It is recommended to have a text to image ratio of 80/20.
5/ Misstatement of CSS or JS
Surprising as it may seem, it is better to use inline CSS on the elements concerned with the style="" attribute rather than the <style> tag in the <head>. Some emails clients ignore the <style> tag and block external stylesheets loaded in the <link> tag.
CSS in the <style> tag is mostly used for progressive enhancement, in particular to counteract unwanted styles added on Outlook or to create a multi-column responsive layout with media queries.
For security reasons, JavaScript is blocked by the vast majority of email clients. Make sure you don’t put it on buttons, or forms etc.
One last tip on how to integrate an email: thinking that emails must absolutely be identical in all email clients is wrong!
Pacomail offers a debug mode to avoid all these errors. Your email is scanned, and direct solutions are suggested. You can apply them instantly in the code editor and see the changes instantly with live coding. Errors are sorted (HTML, CSS, acessibility, responsive etc.).
Try the debug mode now, we offer you a 30 days free trial!
Some essential resources:
- Can I email https://www.caniemail.com/ is a resource driven by Rémi Parmentier (emailing giant) that references the compatibility of HTML/CSS attributes according to email clients
- https://www.hteumeuleu.fr/ the blog of Hteumeuleu
- https://www.badsender.com/blog/ the blog of Badsender emailing agency with a lot of resources and humor!
- Envanto https://webdesign.tutsplus.com/categories/email is an online learning site that offers tutorials with the latest email integration techniques