As we all know Outlook holds the place of second largest email client in the world. Creating HTML emails for Outlook is more hassling than it seems. Because Outlook is one of the oldest email clients, subscribers are more likely to use it. Thus, it becomes extremely vital to design emails for Outlook that don’t look so out-of-focus after arriving in the inbox.
Here are some of the most commonly faced issues when designing emails for Outlook and how to resolve them.
- Breakage of the text
For email designers, one of the most come-across issue is the breakage of the text in the email. Because Outlook offers a limited length of 22 inches, it becomes crucial to design an email in specific frame. However, if an email exceeds the length, the text starts to break it into different 100% tables.
#What you can do about it:
->Eliminate the nested tables that contain greater length.
->Remove unnecessarily used nested tables to reduce the length below 22 inches.
- Poor support for padding and float
Outlook 2007 has a poor support for margin, padding, and float. In such case the usage of tables can be used as framework for support.
#What you can do about it:
In order to set the width of your table that doesn’t look like falling stairs is to set the width for each cell instead of setting it for the whole table.
Here is what you can do about it:
<table cellspacing=”0″ cellpadding=”10″ border=”0″>
<tr>
<td width=”80″></td>
<td width=”280″></td>
</tr>
</table>
If you are including padding for each cell, then make sure you avoid merging the CSS padding and cell padding attribute of the table. Avoid using rowspan and colspan, instead, use tables to merge two columns or rows.
- Lack of support for background images
As many email marketers are very well aware that Outlook 2007 isn’t background image lover, as it doesn’t support background images.
#What you can do about it:
If you are providing a background image in your email, then include a background color, so the email can fallback. Also, you can alternatively use VML code to support background images to render correctly on outlook.
Outlook isn’t GIF friendly, because of its email editor. Thus, if you do create a GIF email for your subscribers, then be ensured to offer first frame that lasts for mili-seconds. This will convey the message appropriately.
- No support for borders
Outlook doesn’t support borders, thus it is best to avoid the usage.
#What you can do about it:
If you still want to opt it then, you can use td to fill up the colors for borders using width.
Avoid using UL LI, or OL Li since they aren’t friendly with Outlook. One best way is to use defined conditional CSS for outlook and there you can define the CSS using UL LI. Don’t forget to add margin left in order to allow bullet appear in 2007.
A great way to fix this issue is to use this provided CSS after your main CSS:
<!–[if gte mso 9]>
<style type=”text/css”>
/* Your Outlook-specific CSS goes here. */
</style>
<![endif]–>
<!–[if gte mso 9]>
<style>
li {
text-indent: -1em; /* Normalise space between bullets and text */
}
</style>
<![endif]–>
<styletype=”text/css”>ul{ margin:0; padding:0; list-style-position: inside;}ulli{ font: normal14px arial, helvetica, sans-serif;}</style><!–[if gte mso 9]><style>ul { margin: 0 0 0 28px; padding: 0; list-style-position: inside;}</style><![endif]–>
Normally with responsive emails, when two columns are coded as independent tables, they tend to have different height depending upon the content in it. For that you can use height parameter or equal number of characters/words in both the tables.
Two tables seating beside each other having very less margin would push the right table down by few pixels in outlook. Use conditional TD code to get it right.
<!–[if gte mso 9]>
</td>
<td valign=”top”>
<![endif]–>
Get in touch with us to know how this actually works…
Outlook 120DPI have different techniques that can be used while coding.