One of the elements we propose during a audit of emailing practices of our customerse-mail analysis. In order to carry out this study, we have set up a analysis grid which allows us to evaluate the code qualitytheergonomics and thegeneral email condition. Over time, we have developed this grid to keep pace with developments in both technical terms and marketing best practices. This update is therefore an opportunity to write an article to tell you a little more about the points we take into account.
Email campaign usability audit
For an email to be efficientthe message must be clear and precise that the relevant information immediately accessiblewithout searching. And the email must also be readable with minimum user intervention.
Email rendering
The first point, and the most important, is obviously to have a coherent rendering across all email clients. It may sound obvious, but you need to test your email across all the major email clients and those relevant to your target audience. Degradations can occur, and that's not a problem. not necessarily seriousAs long as the e-mail remains clear and legible. A classic example: the rounded corners that disappear in Outlook will make the e-mail less "pretty", but will have no impact on its readability. On the other hand, if your 3 columns take up maximum widths and force horizontal scrolling, then there's a problem.
Content readability
The second point is information prioritization. Keep in mind that most of the people you're targeting are bombarded with commercial emails, and that the attention span on an email is relatively short. If the objective of your message isn't clear, if the information is scattered in a colorful design that's not airy, but not very readable, with few margins, then you're missing out on part of your audience. An e-mail should have a specific objectiveand its design and content must serve this purpose. Please note that we do not not here the contentbut the formatting and readability. Editorial assessment will be carried out as part of the audit, but not through this grid.
And if just a few years ago the mobile rendering was not a priority, it is now vital to have an equally consistent email on smaller screens.
Still in the spirit of delivering your message to your target as quickly and clearly as possible, here's a list of more concrete points to keep in mind:
Text content in HTML
Content in the form of images several disadvantages. This often requires one more click from the user to display the images (one click = one additional action -> so you're already losing part of the audience). Images also require a certain time to loadThe image must be of sufficient quality for the text to be perfectly legible. Finally, the image must be of sufficient quality for the text to be perfectly legible, and the image's alternative text must be correctly filled in (particularly for accessibility, to which we'll return later).
And it's even more important for calls to action!
A template width of no more than 640 pixels
Even with wide screens, email clients often offer side panels that reduce the effective display area of the email. To avoid having a horizontal scroll appear, keep the width of your email below 640 pixels.
Readable without images
Having images in an email is not a problem, quite the contrary. All you need to do is use them wisely. An image must come support the message, it must not not be the message. Your e-mail must remain readable even without images. And when images are displayed, then your content is reinforced. In this way, once again, you avoid the need for additional action on the part of the user to receive your message.
Button at the top of the email
Here too, we're going to save the target from having to search too far for the button that enables the user to perform the action you're expecting. The lower the button, the less obvious for the user that you expect some action from him.
Weight less than 500kb
Always to display your email as soon as possibleWe recommend you avoid having an email with images that are too heavy. The heavier the images, the longer it will take to display the message. 500kb is a bit of a number pulled out of the hat, and it's not intended to be too precise. An email that's 700kb won't display any faster (not in a way that's distinguishable to a human, anyway). But the heavier the email, the longer it will take to display, especially in the case of mobile connections.
HTML code analysis for email
The technical part of your email will of course have a impact on renderingbut also on the various anti-spam filters and will tell you a lot about the sender's HTML development skills, including readable HTML code.
Need help?
Reading content isn't everything. The best way is to talk to us.
Correct HTML semantics
To write an email template, use the HTML languageThis language has its rules. Respecting them will not only give you a better chance of getting a correct rendering, but will also make you less likely to arouse the suspicions of anti-spam filters. It's really LE This is a critical point, since HTML code represents the structure with which you present your content.
Alternative images and text
The HTML attribute alt is important. Firstly, as we have already mentioned, for accessibility. If you have textual content in images, it won't be taken into account by a screen reader if the alt attribute isn't filled in. Secondly, it can also be used by anti-spam filters. So even if your image is purely decorative, it's important to add a alt even if it remains empty.
HTML attributes and CSS properties
The attributes HTML and the properties CSS are sometimes very similar, but they each have their own specific rulesand should not be confused. For example, the attribute width will take as its value either an integer without unitsor a percentage. Can the CSS width property take an integer? with unitsa percentage, or other expected values. Mixing the two shows a poor knowledge of HTML code, and above all risks causing rendering problems.
Doctype
Over the years, HTML language has evolvedand there are some different versions each with slight variations. The latest version is HTML 5. The doctype is a small line of code, the very first in the email, which indicates which version your HTML code was written on. It may seem trivial, but it can have a major impact on the rendering of your code.
Optimized HTML code
The same email template can be written in HTML by several different ways. The ideal is to factorize your code as much as possible to avoid having too many lines and a consequent file size. One marketing reason is to keep the weight of the email (excluding images) below 102kb. Beyond this limit, Gmail will truncate email and will require an additional action (if you've followed me so far, you'll know that additional action = less audience). Another point is to make the code clearer. If an email is to be reused and modified by another developer, the latter must be able to reading and understanding code to update it, even if the changes are simple. And finally, eco-design. Less weight means less space on servers, and therefore less CO2 emitted. More on this below...
CSS nomenclature and HTML code indentation
The aim is to enable different developers to save time by producing new emails based on existing ones. CSS class names explicit allow the developer reading the code to save a lot of time. For example, when adapting text to mobile devices: if the text changes from 30px in the desktop version to 24px in the mobile version, a class named text-24 will be immediately understandable, whereas a class named title will give no indication of its effect. Code indentation, on the other hand, makes reading HTML code much simpler and clearer. Next, depending on your needsThese measures often require a little more code. And so it's a subtle balance between your needs (e.g. email that can be picked up by others) and other priorities (e.g. eco-design).
Accessibility
While just a few years ago hardly anyone talked about it, accessibility is becoming an increasingly important topic. I often hear a shortcut between "accessibility" and "blind" or "screen reader". If indeed the technical part of the email will have an impact on the ability of screen readers to clearly deliver the message of the email, accessibility affects more than just blind people or almost. A person can have more or less pronounced sight problems, so you'll need to be careful about contrast colors. Or to the text size and line spacing. And the numbers are not insignificant, 2.2 billion people in the world are visually impaired A clear, concise message will also increase accessibility for people with disorders such as dyslexia.
If the technical section of the email, its HTML code, will be used primarily by screen readers, the design part of the email will have a on accessibility for anyone with a disability.
Eco-design
And finally, eco-design. The main source of an email's CO2 emissions comes from its storage and the storage of its resources on servers.
Without going into too much detail, because we already have a fairly comprehensive guide on the subjectjust a reminder: the servers on which emails are stored consume energyand (very briefly) this translates into CO2 emissions. At more servers are needed to store the data, the more it requires energy, and therefore CO2 emissions. So reducing email weight by only a few kilobytes can already have a non-negligible impact. As an indication, 10kb on four emails per month sent to 500,000 recipients represents 240GB per year...
It's also possible to reduce the weight of images, and not call up exotic typography or external CSS (which is inadvisable anyway).
Conclusion
You now have an overview of our approach to email quality assessment. This is a service that we offer as part of a audit covering all aspects of emailing strategy. And if you need a refresher on how to code an email, we have a guide for that !
