EmailCoders » Code Tips https://emailcoders.com Responsive HTML Email Coders in the USA Wed, 15 Apr 2015 16:30:04 +0000 en-US hourly 1 https://wordpress.org/?v=4.2.38 Quick Email Coding Tips for Outlook https://emailcoders.com/quick-email-coding-tips-for-outlook/ https://emailcoders.com/quick-email-coding-tips-for-outlook/#comments Wed, 24 Sep 2014 01:42:14 +0000 http://emailcoders.com/cms/?p=3444 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.

]]> https://emailcoders.com/quick-email-coding-tips-for-outlook/feed/ 0 Bullet lists in HTML Emails https://emailcoders.com/bullet-lists-in-html-emails/ https://emailcoders.com/bullet-lists-in-html-emails/#comments Thu, 24 Oct 2013 01:08:55 +0000 http://emailcoders.com/cms/?p=3431 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
]]> https://emailcoders.com/bullet-lists-in-html-emails/feed/ 0