HTML Email Formatting Design Guide

You would be well-versed in creating a modern and accessible website. But, can you put that knowledge to email design? Well, not really; with the diversity of email clients and limited CSS support, there are some to-dos and dont when it comes to email design. This article will guide you through some points to consider when making your own HTML to create an email so that it functions properly.

Now, for clearing the air, we would say that the web design is not the same as an email design. Furthermore, W3C standards and/or CSS is not even relevant here.

I. Layout

• Design width: 650px or less

It is a standard rule to keep the email size below 650px. What this does is, get the email to display correctly in almost all of the email clients, and correctly display configurations.

• Simplicity works best in layouts

The simpler the email design, the better. The more complicated you try to make it, the more testing and debugging email client issues you will have to face. If you wish to make an advanced design, you will have to use more tables and testing than usual.

• Consider basic HTML tables

While the layout techniques and CSS floating do not render correctly across all the email clients, you would need the standard HTML tables to create the overall layout.

• Be cautious with table cell padding

Outlook takes the padding from any cell in a row and applies it to all other cells in the row. This might result in unwanted visual changes. What you can do is apply the same padding in all the cells in a row, or place a table that has padding or an inner div within the particular cell you want to add padding.

• Refrain from using colspans=”” in your tables

Applying colspan will either not be supported by some email clients or will have display issues.

II. CSS

• Refrain from using external stylesheets

They usually do not work with a majority of email clients, and you should try using CSS with inline CSS within your HTML

• Refer to using inline CSS over CSS classes

Inline CSS can come in handy instead of declaring CSS classes since there are many email clients that do not support CSS classes. One such instance will be: <div style=”color:#6c648b;”>content</div> instead of <div class=”cssclassa”>content</div>

• Refrain from using CSS shortcuts

You can set properties in groups with CSS. For instance, style=”font:11px, Calibri” . Rather than grouping all attributes, you can set each part individually, like: style=”font-size:11px;font-family:Calibri”.

• Avoid using position options or CSS float

In some cases, the email clients would overlook both the float and position CSS options. Therefore, use tables.

III. Images and Videos

• Use Alt Tags, Always

Majority of email clients would disable images; so, unless you utilize alt tags, your subscribers will only be able to see a blank box. With the usage of alt tags, your subscribers will be able to see the text in the alt tag.

• Refrain from embedding videos and/or flash

You should not include videos and/or flash directly into your emails. Most of the email clients would not support such codes and might spam or flag it. Instead, you can try to take a screenshot of the flash or video and embed that. Now, when they click on it, you can make the video/flash open in their browser.

• Animated GIFs are not supported fully

You should try to avoid GIFs unless completely required. The reason is that Outlook 2007 does not support animated GIFs even though most email clients do. Therefore, in case your GIFs are not supported, they are more likely to show only the first frame of your animation sequence.

• Be cautious with spliced images

Placing spliced images in your HTML using table cells or img tags next to each other will need you to test it thoroughly. Some email clients might add some extra spaces between your images and cause them to look bad.

• Carry out email check with images disabled

While most of the clients showcase your emails without images, it becomes crucial for you to check how they look without images in them.

• Watch your file size

Image file sizes should be kept low, just like you would do for a website. This is to ensure that the images load quickly and make it easier for your subscribers to download.

• Avoid images to stabilize your layout

Some of our users prefer using 1 or 2-pixel images to align their items. However, some email filters/clients may consider it as a potential open/read tracking image and penalize that email.

IV. Background

• Background images are not fully supported

While it depends entirely upto you to use the background images or not, some clients prefer not showing them. However, if you still want to use a background image, you should opt for HTML background options instead of CSS to declare a background.

• Full body background colors

Gmail, for instance, does not display any background color that you might have set for your main body tag (<body> tag). It is recommended that you set a background color along with a wrapping div that will surround your content. This will help even if your email client does not support background color. It will continue to show a background color much similar to what you have set.

V. Miscellaneous

• Refrain putting anything above the opening <body> tag

Anything that is there above the body tag is likely to get stripped and not used.

• Avoid Microsoft Office

Now, the HTML generated might have certain issues. Furthermore, when you copy and paste from the Office, the format will be that of Office which will likely have design issues.

• Avoid Including javascript

Doing so would get it stripped and more often than not, email clients and/or spam filters might mark it as malicious code.