If you use a WYSIWYG editor (i.e., you type your email in software that looks like a word processor), you probably have buttons that do some of these tricks. But if you want to take complete control over your format, you need to know what’s going on under the hood.
Warning: When writing an HTML email, always draft a text version that your ESP will bundle and send alongside the HTML version.
Trick 1: Tables and Nested Tables
Email providers including Gmail and Outlook will strip the head and body tag from your email formatting, but you can place your entire email inside one big table cell. Tables can be infinitely nested inside each other.
A simple nested table begins like this:
Which looks like this:
Create your nested tables largest to smallest. By varying table width, cell padding and spacing, and continuing to nest cells, you can place elements exactly where you want them.
Trick 2: Bulleted and Numbered Lists
Numbered lists are useful to create a table of contents, countdowns, or any other time you have lists that look more interesting in numerical order.
The code for a numbered list is:
It will look like this, with a bonus headline at the top:
Don’t want numbers, just bullets? No problem. The code for a bulleted list is (with bonus headline on top):
It will look like this:
In case you need a mnemonic, the “ul” stands for “unordered list,” as opposed to “or” which stands for “ordered list.”
The bold, larger text on top is a headline, designated with the tag H4. The smaller the number, the larger the font, from H1 to H6. The headline tag is a convenient way to make headers stand out, which is a good way to break up chunks of text, just like I’m breaking up different topics in this article.
Trick 3: CSS for Text and Background Formatting
CSS for email is limited because Gmail and other mail protocols block linking to an external style sheet and strip out some CSS tags, including the head and body tag. The solution is to write your CSS code inline.
If you want to use colored boxes, use headers or tables, or just color formatted text boxes.
Your email marketing software may have tools to help you use CSS effectively in email.
Always test your emails across browsers and devices to ensure that it looks as you intended to all your customers. If you’re not sure if your code is right, have it validated by copy/pasting the code into this tool.