BLOG

Tips for Creating an HTML Email That Renders Universally

Satisfying the rendering differences between the vast selection of email clients out there is an ongoing battle with web developers. Here are a few tips that can help save you hours of coding headaches.

Use Inline CSS

When possible, write your CSS inline. Some email clients, notably Gmail, will ignore most CSS wrapped in the <style> tag. Inline CSS is implemented with the style attribute and is written on a single line, like so:

<td style=”color:#333333;font-size:16px;font-family:Arial;”>

Writing this way can get long and confusing very quickly, so keep your line formations consistent by grouping similar properties together and in the same order for every tag.

Do Not Use Shorthand

CSS shorthand is taking a set of properties and condensing them into a single one. For example, instead of

padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding: left: 15px;

you would write

padding: 10px 15px;

For hex codes, instead of color: #66cc00;, you would write it as color: #6c0;. Unfortunately, some email clients will not parse this shortened version correctly, so everything must be written in long form. It’s a pain and a bit more difficult to read as inline CSS, but it’s definitely a must!

Use <table>, Especially for Lists

It is usually best practice to use <div> as the framework for a webpage, but this is not the case with HTML emails. With how finicky email clients are, <table> tags are the best way to keep everything in its place.

Lists are another element that is difficult to tame, as some email clients will completely ignore the CSS that you assign to them. The best way get them to display correctly across different clients is to use <table> instead of <ul> or <ol>. Below is an example <table> list:

<table>

<tr>

<td>•</td><td>List Item One</td>

</tr>

<tr>

<td>•</td><td>List Item Two</td>

</tr>

<tr>

<td>•</td><td>List Item Three</td>

</tr>

</table>

Zero Out All Padding

Some clients, like Outlook, add extra padding around all table cells, which could be a problem if there are a lot of tables in your code. You can prevent this disaster from happening by applying

padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;

to all <td> tags and adjusting the pixels as needed.

Section Out Paragraphs with <div> and <br />, Not <p>

The <p> tag is another target of unwanted padding, and zeroing out each one will add unnecessary bulk to your code. Save time by wrapping them with <div> and using <br /> for hard returns, as both have zero padding by default.

Use Media Queries to Make Your Email Responsive

Media queries tell the browser or client what code to use depending on the screen size. This enables you to break down an email for smaller devices like smartphones.

The media query goes in the head of your code within a <style> tag and all CSS is wrapped within

@media screen (max-width: XXXpx) {

/* your CSS here */

}

One useful media query attribute is converting all the <table>, <tbody>, <tr>, and <td> tags to display: block!important; to break the grid formation and prevent your email from looking cramped on small screens.

Make sure to add

<meta name="viewport" content="width=device-width">

in the <head> of your code so that the media queries actually work!

Eliminate Whitespace Before Sending

Some email clients will automatically add a <br /> tag to every hard return in your code, which may cause display issues. Before sending, run your entire code through a compiler like HTML minify to compress it as much as possible and remove all whitespace. Be sure to save an uncompressed copy of your code should you need to go back to update it.

When Testing with Dummy Links, Use a Complete URL

This is something that I eventually discovered after many frustrating experiences with Outlook. If you have a few dummy links in your copy with # or javascript:void(0) as the href, they will break your email. You can avoid this by using a complete placeholder URL, like http://domain.com instead. Just don’t forget to replace it before sending out the email!

Finally: Keep It Simple

Make your HTML emails simple and to the point. Remove any unnecessary imagery, borders and accents to reduce the amount of items to code. Minimal design elements also mean less to worry about when making your email responsive. After all, the main focus of an HTML email should be the message and its readability.

These are just a few techniques to help you make your HTML emails work better. I also recommend subscribing to the Litmus blog to stay current on all of the best practices for email marketing.

 

Related Articles: