Tips for Preparing a HTML Email

About Images

Tip 1: <img> Tag Should Have Their "width" and "height" Attribute

To ensure images are rendered correctly in email clients, define the width and height attribute in <img> tag.

Tip 2: The "width" and "height" Attribute in <img> Tag Should Equal to Its Actual Size

Some Email platforms like Outlook will ignore your specified width and height and display the images using their actual size.

This usually will break the whole email. So if you want to resize an image, please do not simply modify the size attribute in <img> tag.

You should resize the image in Photoshop or other image editors.

Tip 3: <img> Tag Should Have the Attribute border="0"

If you add a hyperlink to the image, without border="0", Internet Explorer will add a blue border around the image.

A fool-proof practice to avoid this case is adding attribute border="0" in every <img> tag.

Tip 4: <img> Tag Should Have the Attribute style="display: block;"

If you send HTML email using a lot of sliced images placed inside <td>, please add attribute style="display: block;" in all <img> tag.

Without this attribute, when viewing the email in Gmail, Hotmail (Now Outlook.com), Yahoo! or some other email platforms, mysterious gaps will appear between the images.

Tip 5: Images Should Not Be Higher Than 1728 Pixels

Outlook will clip the top of the image that is longer than 1728 pixels.

For more details, please view Email Cropped in Outlook.

Tip 6: Avoid Using Background Image in Your Email

Outlook do not display background image, so avoid using background image in your email design.

If you must use it, specify a fall-back background color.

Tips 7: Give <img> the "alt" Attribute

By default, all images are blocked in email clients.

When images are blocked, message in alt can still be shown in order to provide text-only message to your clients.

About <td> tag

Tips 1: Every <td> Tag Should Have the "width" Attribute

This is a fool-proof practice to display the email correctly.

<td>

If possible, set the "height" attribute as well. However, sometime the "height" of <td> is affected by the text content inside. In that case you should not define the it.

Note: Neither <table> tag nor <tr> tag have the "height" attribute.

About CSS in Email

Tips 1: Always Use Inline CSS

Some email platforms will ignore any CSS defined in the <head> section in HTML file. Always use inline CSS instead.

Tips 2: Avoid Using CSS to Position Element

Avoid using CSS to position element. Most web email platforms do not support "float" and "position".

Tips 3: Use "margin-bottom" Instead of "margin" or "margin-top"

Avoid using "margin" and "margin-top" since Hotmail (Now Outlook.com) will ignore them.

"margin-bottom" is relatively safe to use. You can add "margin-bottom" to <p> tag to control the spacing between paragraphs.

Learn more about tips about margins and padding in HTML emails.