outlook-2003

Quick Email Coding Tips for Outlook

Tall images will be cropped in Outlook.
Outlook truncates the upper portion of all images higher than 1728px from the top-down. So, if your image is 250px longer than the 1728px limit, 250px will get cropped off the top. We’ve also seen Outlook re-scale an image so that its max height is 1728px. We suggest that you crop your images and stack them on top of each other.

Images with dimensions defined in HTML may render incorrectly.
Stretched images (e.g., bars, borders, gradients, etc.) may not render correctly. All graphics should have their correct dimensions in the file properties. Do not rely on HTML-defined dimensions for images that are critical to the email’s layout.

Animated GIFs aren’t supported by Outlook.
Outlook does not support animated GIFs, instead it only shows the first slide of your animation so make sure the most important call to action is on that slide.

bulletlist

Bullet lists in HTML Emails

The safest way to use ordered and unordered lists in HTML Email is to use a table with two columns.
Avoid using < ul > and < ol > tags since they do not render consistently across platforms.

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-bottom:5px; line-height:20px;" valign="top"
width="15"><strong>&bull;</strong>
</td>
<td align="left" style="padding-bottom:5px; line-height:20px;">
Lorem Ipsum 1</td>
</tr>

<tr>
<td style="padding-bottom:5px; line-height:20px;" valign="top"
width="15"><strong>&bull;</strong>
</td>
<td align="left" style="padding-bottom:5px; line-height:20px;">
Lorem Ipsum 2</td>
</tr>

<tr>
<td style="padding-bottom:5px; line-height:20px;" valign="top"
width="15"><strong>&bull;</strong>
</td>
<td align="left" style="padding-bottom:5px; line-height:20px;">
Lorem Ipsum 3</td>
</tr>

<tr>
<td style="padding-bottom:5px; line-height:20px;" valign="top"
width="15"><strong>&bull;</strong>
</td>
<td align="left" style="padding-bottom:5px; line-height:20px;">
Lorem Ipsum 4</td>
</tr>
</table>

Final result:

Lorem Ipsum 1
Lorem Ipsum 2
Lorem Ipsum 3
Lorem Ipsum 4