How to Coding an E-mail Template
Coding e-mails will have slightly different rules with coding web pages although both are using HTML and CSS programming language. Each mailbox has their own rendering mechanism that support different HTML and CSS properties, which will impact on how the e-mail will be displayed.
Structure of an E-mail Template
An HTML e-mail template is consists of multiple table elements. Each table element usually represents a main section for the e-mail, such as header, body, and footer.
The structure is pretty similar with the web page code. From this simple structure, we can modify the code to adjust the e-mail template design to be what we expect.
These are the basic CSS styles that we should add to our e-mail template for client-specific.
- To prevent WebKit and Windows mobile changing default text sizes.
- To remove spacing between tables in Outlook 2007 and up.
- Allow smoother rendering of resized image in Internet Explorer.
- To hide blue links in iOS e-mails. If we are not hide this, we may see dates and times in HTML emails turn into blue links.
- To fix center in Android e-mails. If we are not set this, some e-mail in Android OS looks like it has some margin or padding on the left and the email does not look centered.
Add Assets to E-mail Template
For e-mail that we send to the receiver, we hope that our e-mail is attractive, not boring to read, and loads fast. We must choose right assets to balance this: small in size but still looks good, and make sure can be loaded in various mailboxes. For smaller size, we can minify our assets first but keep the best quality of it (I usually use https://tinypng.com/ to minify image assets, especially for PNG format). Host our assets into good hosting, so it will always available anytime our receiver want to load or access it.
To add image assets to our e-mail template, we can simply use basic <img> HTML element.
Rules by Experience
This is the rules to create an e-mail template that I got from my own experience.
- For any variable that needs to be replaced by Backend data, make agreement with Backend side to choose any symbol to wrap the variable and make the replacement easier. Example: {{variable}} or ${variable}.
- Use table element to arrange data into rows and columns (HTML element such as table, tr, td). This will help ensure your e-mails display as intended, no matter what mailbox you use.
- Element placement using position absolute will not work as intended and will make your component placement not fixed in different mailbox.
- It is OK to use CSS inline styling although we usually avoid this when coding web pages to make our code organized.
- Do not use SVG or assets, use PNG or JPG instead. It won’t be loaded in Gmail mailbox.
- Avoid linear gradient that usually used for background color because it will not applied in several mailbox. Use image with that linear gradient as the background instead.
- Just use default font. No need to import font in e-mail template. Most of mailbox will ignore font that you set.
- And many more that you will find when testing your e-mail template! :D
Test E-mail Template
For testing our e-mail template, we can use Litmus PutsMail to send the e-mail template to our mailbox. Send the e-mail template to various mailboxes (Gmail, Yahoo Mail, etc) on various devices to check whether the e-mail template we have created is displayed as intended.
These are the steps to use Litmus PutsMail.
- Open https://putsmail.com/
- Register/Login
- Create new test and send
