A Beginner’s Guide to Excellent Email Templates
When sending out emails to customers, the last thing you want them to see is a jumbled mess due to improper formatting techniques. What looks great on one device may not look the same across all devices unless you understand the fundamentals of creating consistent layouts that adapt to each device. The good news is creating a great looking email template is easy!
Using Tables to Format an Email Template
The simplest, most tried and true method is using tables in your email. Once you have the basic layout concept in your head, it’s important to replicate that layout using tables. While tempting to use CSS3 or HTML5 coding, it’s important to note that with each update from Gmail, Outlook, browsers, etc. you will need to adjust the code. This can be quite time-consuming and lead to undesirable results if you don’t stay up-to-date with new changes. Save those fancy design techniques for specialized campaigns.
Understanding HTML Table Attributes
It is important to note that not all attributes are available for all elements. For example, the “width” attribute can be used on a table cell or an image, but you won’t use it on a link. Different elements may have unique attributes, but the most common are:
- Align — Aligns the table according to the surrounding text (i.e. left, center, right)
- VAlign — Vertical alignment (i.e. top, center, bottom)
- Border — Binary option that specifies whether a cell has a border
- Cellpadding — Space between the cell wall and the content inside the cell
- Cellspacing — Space between the cells
- Width — Width of the table or cell
Tips for Perfecting HTML Table Formatting
- Do not use margins in emails. To create space between the elements, wrap the element within a parent <td> and add padding.
- If you would like to use a box-shadow around elements, you will need to use an image because you cannot write box-shadow code in emails.
- The general rule is to limit table width to 600px, but can occasionally go up to 800px and stay within workable limits.
- Nesting table elements will give you greater control over the layout. A best practice is to create emails that are at least two tables deep.
- Strive to make every email responsive. To achieve this, set only one fixed-width table.
- For Outlook, you may need to add ‘ghost tables’ to maintain the proper format.
- If you’re struggling with formatting text, use an image to bypass most of the issues associated with text settings.
- To make it easier to create emails that look good even on small displays, create other tables, emailHeader, emailBody, and emailFooter. Then set their width to 100%. That way, you only need to work within the emailContainer table.
Sometimes, you will not achieve the layout you had in mind when you started. Keep in mind that email has limitations right now that we can’t bypass. The more you practice, the better you will get. With a bit of patience, you can even learn how to place GIFs into an email. Just be aware that Outlook doesn’t support GIF, and the final product will be a static image. This handy tool can help you practice using background images.
The final part of testing your design is perhaps the biggest challenge since it’s unlikely that you’ll have access to all current and most used devices. Don’t fret, though. There is a workaround called Email on Acid, where you can import your design and test it across various devices.
Above all else, remember to keep it as simple as possible. By becoming an expert in the fundamentals, you will quickly create an email template that looks great across all platforms. Great email campaigns can boost customer retention rates, increase sales, and generate buzz for upcoming events.
