Simple HTML Code Tricks that Will Enhance Your Email Newsletters

239766html-In email marketing, you want to write briefly and to the point. These HTML tricks will help break up your text and make your email easier to read and quicker to scan.

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:

nestedtableexample1

Which looks like this:

nestedtableoutput1

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:

numberedlistexample1

It will look like this, with a bonus headline at the top:

numberedlistoutput1

Don’t want numbers, just bullets? No problem. The code for a bulleted list is (with bonus headline on top):

bulletedlistexample1

It will look like this:

bulletedlistoutput1

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.

For example:

cssexample1

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.

Follow Us on Social Media!
Facebook
Twitter
LinkedIn
YouTube
Google+
RSS
Follow by Email

Leave a Reply

Your email address will not be published. Required fields are marked *