written by David Hoang
With the move from Outlook 2003 to 2007, Microsoft made a lot of security improvements. Along with that, however, were a number of design changes. Outlook changed its engine for rendering HTML content from Internet Explorer to Microsoft Word. Before, it essentially meant that if your code looked good in Internet Explorer, it looked good in Outlook.
However, that is not the case anymore.
This is a huge impact in the way we design emails; because of the high volume of Outlook users, particularly in the Business-to-Business realm.
Here are a few key elements to consider while designing email messages in Outlook 2007 to ensure it looks sharp.
Keep your styles in-line
Though Outlook 2007 does support embedded CSS, there are certain properties that present challenges, such as margin, line-height and float/clear. Keep your styles in-line while you are designing. In addition to being an email design best practice, using style attributes in-line will help ensure that your message renders properly.
No Animated .gif files
Animated .gif files will not function in Outlook 2007. However, there is a solution for using .gif files with Outlook 2007. Since the file will not animate, you only need to make sure the first frame makes sense; as that is what will appear in Outlook 2007.
Contain Yourself, No Floating!
Outlook 2007 does not support floating or CSS positioning in any capacity. Use standard HTML tables to contain and control the layout. This will ensure that your design elements won’t go flying all over the place!
Specify Accurate Table Widths
When using HTML tables it is important to specify accurate table widths to ensure proper display in Outlook 2007. This is especially important in table structures that contain multiple columns. For example, when you have a table cell that spans two columns, the width for that cell should equal the sum of the widths of the other two cells.
Continue Using Alt Tags
As it was in Outlook 2003, it is in 2007; images will automatically be blocked. While you’re designing your email message, keep in mind of what it will look like with images disabled. Remember that Outlook will display alt tags, but they will only appear after a default security message. For a list of acceptable tags in Outlook 2007, check out this guide on Microsoft’s website.
No Forms
Outlook 2007 disables embedded forms. If you design an email with a survey or form in the content, include a direct link (hosted from a website) to the survey for your Outlook users. Indicate clearly in your design that the form is not broken, so subscribers don’t get frustrated by trying to fill out the form.
With 2010 quickly approaching, you may be wonder if there will be any major CSS/HTML changes in Outlook 2010. Right now, don’t expect major changes.
To conclude, sticking to standard HTML table design for emails should help you effectively render emails in Outlook 2007. Be sure to read our design tips in the coming weeks for rendering tips in other email clients, including our past issue: Email Rendering in Hotmail by Anna Meier. Portions of this blog, Design Tip of the Week: Email Rendering in Outlook 2007 and more information on email rendering can be found in our white paper “Email Marketing Design: The New Essentials.”
For additional information about rendering in Outlook 2007, check out our white paper, Seven Email Marketing Design Tips for Outlook 2007.
With the move from Outlook 2003 to 2007, Microsoft made a lot of security improvements. Along with that, however, were a number of design changes. Outlook changed its engine for rendering HTML content from Internet Explorer to Microsoft Word. Before, it essentially meant that if your code looked good in Internet Explorer, it looked good in Outlook.
However, that is not the case anymore.
This is a huge impact in the way we design emails; because of the high volume of Outlook users, particularly in the Business-to-Business realm.
Here are a few key elements to consider while designing email messages in Outlook 2007 to ensure it looks sharp.
Keep your styles in-line
Though Outlook 2007 does support embedded CSS, there are certain properties that present challenges, such as margin, line-height and float/clear. Keep your styles in-line while you are designing. In addition to being an email design best practice, using style attributes in-line will help ensure that your message renders properly.
No Animated .gif files
Animated .gif files will not function in Outlook 2007. However, there is a solution for using .gif files with Outlook 2007. Since the file will not animate, you only need to make sure the first frame makes sense; as that is what will appear in Outlook 2007.
Contain Yourself, No Floating!
Outlook 2007 does not support floating or CSS positioning in any capacity. Use standard HTML tables to contain and control the layout. This will ensure that your design elements won’t go flying all over the place!
Specify Accurate Table Widths
When using HTML tables it is important to specify accurate table widths to ensure proper display in Outlook 2007. This is especially important in table structures that contain multiple columns. For example, when you have a table cell that spans two columns, the width for that cell should equal the sum of the widths of the other two cells.
Continue Using Alt Tags
As it was in Outlook 2003, it is in 2007; images will automatically be blocked. While you’re designing your email message, keep in mind of what it will look like with images disabled. Remember that Outlook will display alt tags, but they will only appear after a default security message. For a list of acceptable tags in Outlook 2007, check out this guide on Microsoft’s website.
No Forms
Outlook 2007 disables embedded forms. If you design an email with a survey or form in the content, include a direct link (hosted from a website) to the survey for your Outlook users. Indicate clearly in your design that the form is not broken, so subscribers don’t get frustrated by trying to fill out the form.
With 2010 quickly approaching, you may be wonder if there will be any major CSS/HTML changes in Outlook 2010. Right now, don’t expect major changes.
To conclude, sticking to standard HTML table design for emails should help you effectively render emails in Outlook 2007. Be sure to read our design tips in the coming weeks for rendering tips in other email clients, including our past issue: Email Rendering in Hotmail by Anna Meier. Portions of this blog, Design Tip of the Week: Email Rendering in Outlook 2007 and more information on email rendering can be found in our white paper “Email Marketing Design: The New Essentials.”
For additional information about rendering in Outlook 2007, check out our white paper, Seven Email Marketing Design Tips for Outlook 2007.
ExactTarget Feed
Powered by Compendium Blogware
Comments for Design Tip of the Week: Email Rendering in Outlook 2007