In the e-commerce team, we spend several hours fine-tuning e-mails for new e-shops. The aim is to ensure that system messages, such as payment confirmation, order dispatch information, etc., are correctly displayed on all devices, browsers and e-mail clients.
There are more and more ways to check your e-mail every day. Their modification is therefore becoming more and more difficult and we had to find the right tools and ways to make it easier for ourselves. In my opinion, these are:
-
Get rid of the divs!
Divs are the basic building block when it comes to websites. However, Outlook will ignore them. Therefore, in order to maintain consistency, it’s better to use tables. For everything – whether it’s displaying content side by side or simply centering text.
-
(No) border-radius in Outlook…
The border-radius style causes the element corners to round. Unfortunately, it isn’t supported in the Outlook e-mail client on Windows. An overview of where it’s supported can be found here: https://www.caniemail.com/features/css-border-radius/. How to add it? It isn’t easy, but it isn’t impossible either. A good guide can be found at: https://kontent.ai/blog/emails-outlook-containers-rounded-courners/
-
… and no margin and padding either
If you want to use margins and indentations in a table, define them separately for each cell, not in the introduction at tag table. In the latter case, Outlook tends to count margins and paddings from the table as well as td. Useful tips are listed here: https://www.emailonacid.com/blog/article/email-development/7_tips_and_tricks_regarding_margins_and_padding_in_html_emails/
-
Images – attached or embedded?
When displaying images directly in the body of e-mails, it’s important to be careful about the way in which images are displayed. Base64 won’t appear at all in some clients, Attachment(cid) will appear as an attachment in some cases and images linked via URL won’t appear in basic settings, for example, on Outlook. More on the topic can be found here: https://mailtrap.io/blog/embedding-images-in-html-email-have-the-rules-changed
-
iPhones want a custom tag
It’s apple-disable-message-reformatting. This useful meta tag, if active, causes e-mails on iPhones to appear correctly and not just as a delayed version of a desktop design.
Other useful links when preparing custom template e-mails:
- https://www.goodemailcode.com/
- https://www.emailonacid.com/blog
- https://www.litmus.com/blog/
- https://responsivehtmlemail.com/
- https://www.caniemail.com/
- https://previewer.mailninja.co.uk/ – suitable for checking HTML e-mails
- https://mailtrap.io/ – offers the possibility to test e-mails via mailtrap SMTP and check the appearance of an e-mail as well as the support of the CSS used
