Design Tip of the Week: Designing for Outlook 2007 and 2010

Posted by: Andrea Smith
Tuesday, August 3, 2010
Design and Code for Success
According to a recent study, Outlook users account for 43% of all email client users— beating out big names like Hotmail, Yahoo! Mail, Gmail, and AOL by significant margins. You might already know about some of the challenges posed by getting an email to display perfectly in Outlook 2007, and the newly released Outlook 2010 is much the same. We’ve compiled some great tips that will save you time and ensure your success when it comes to this environment from both a design and HTML coding perspective.






Email Design Tips
Our latest whitepaper includes the following email design best practices and tips:
  1. Design with Image Blocking in Mind
  2. Don't Rely on Background Images
  3. Design Without CSS Positioning
  4. Continue Using ALT-tags
  5. Design Without Forms
  6. Avoid Rich Media and Animated .gifs
  7. Apply CSS Padding with Caution
  8. Additional Points
Read the full version of Eight Tips on Designing for Outlook 2007 and 2010 and stash it someplace safe for later reference. If you keep these email design essentals in mind, your subscribers will be viewing your message exactly as you intended in no time.

Email Rendering and Testing
For other information on rendering specific to other major email clients, view some of our past posts. And as we’ve said before, be sure to test!

Design Tip of the Week: Email Rendering in Gmail
Design Tip of the Week: Gmail takes two steps forward and one step back
Design Tip of the Week: Email Rendering in Hotmail
Design Tip of the Week: Email Rendering in Yahoo
Design Tip of the Week: HTML for the Unique Email Landscape

Andrea Smith
Design Consultant
ExactTarget Campaign Solutions Team

Comments for Design Tip of the Week: Designing for Outlook 2007 and 2010

blog comments powered by Disqus

Comments for Design Tip of the Week: Designing for Outlook 2007 and 2010

Wednesday, August 4, 2010 by Bryan Quilty:
I completely agree with all of your design tips but one. There's a new "hack" -- of sorts -- that actually allows background images to display in '07 and '10 versions of Outlook. http://www.campaignmonitor.com/blog/post/3192/add-a-background-image-to-individual-table-cells/
Wednesday, August 4, 2010 by Andrea Smith:
That’s a great tip! As we mentioned in the whitepaper, we recommend assigning a backup background color to table cells containing background images in case the background image isn’t supported. As a commenter noted in the CampaignMonitor post, background colors will appear “on top of” the background images using this technique. The original creator of the hack posted a fix for this (see http://www.campaignmonitor.com/forums/viewtopic.php?id=3862). As you can see from all the comments in the thread, the hack seems to have varied results depending on application and the type of service provider you may be using. Our advice? Use hacks with caution, and continue to test, test test!
Saturday, August 14, 2010 by Brian Thies:
The biggest reason for varied results is the method of coding used in the emails. Most issues I've seen are based on simple mistakes such as using the wrong file name, not specifying widths in all 's, using margin and padding, using colspans and rowspans, using improper tagging, and overall creating a structure that doesn't properly use nested tables. When proper coding techniques are used from the start, the background image fix becomes a simple addition of coding rather than a "hack". At this time the only downside to the background image fix is the lack of dynamic sizing for the background image shape. Although the image can be set to repeat, the VML shape holding it requires an exact height and width. In templates which require stretching horizontally, it would require an exact "maximum" height. For static designs, it definitely works! :-)