There’s a new Outlook in town
Thursday, July 29th, 2010When Microsoft upgraded their flagship email client, Outlook, for the 2007 edition of Microsoft Office, they decided to make a fundamental change that completely rewrote the rules of email design. With the last incarnation in 2003, they used Internet Explorer (IE) as the rendering tool, which meant that provided your template looked fantastic in IE, it would look pretty much exactly the same in your inbox. However, for Outlook 2007 they changed the rules and opted to use Word for rendering purposes instead, which meant everything had to change.
Tricks and ideas that we used to use were out the window – it meant for a whole lot of changes to the way we code for email, but in a constantly evolving industry a change this significant was inevitable. So, with the latest version of Office comes a new version of Outlook – 2010 to be exact – which continues to use Word over IE.
Apart from front end changes, not much has altered in terms of rendering. Below are a list of items that you should look out for when coding for Outlook 2007 and 2010.
- Alt labels: Any alt text is replaced with the url, if the image is clickable, or does not appear if there is no link.
- Animations: Only the first slide of an animated gif will be visible, so make sure your most important content is included on it. Flash still is and has always been a no-go in email.
- Background: Background images are almost always stripped out – ensure you have a solid colour as a backup, in case you’re using white text on a dark image.
- Cascading Style Sheets: A lot of CSS won’t work, but the core elements will inline:
- background-color
- color
- font-family
- font-size
- font-weight
- line-height
- text-align
- text-decoration
- Character spacing: Outlook will marginally increase the size of your designated font, meaning that if you have a small amount of text boxed in by a series of images, where there is no extra room, it can lead to a breakage. Ensure that there is sufficient room to allow for this.
- Forms: Although the element will be visible and information can be inputted, the submit button will not work.
- Height: Try to visualise how your email will appear on a Word page. If you have a series of images on top of each other, an unexpected gap will appear where Word tries to insert a page break. Try to keep your content within separated tables or, if possible, shorten your email to reduce the risk.
- Images: Aim to use width=100 height=100 on images, to preserve the original aspect ratio. If style=”width: 50px; height: 50px” is used instead, this will be removed and the original dimensions reinstated. You can get around this by denoting width=50 height=50 instead.
- Padding: I’ve learned to use nested tables for my padding, so always ensure that tables and cells have a fixed width so that your spacing displays correctly.
Obviously some of these commands work differently in other email clients, but it gives an insight into any problems you might encounter with Outlook 2007 or 2010. If you have any questions, please email strategy@adestra.com
Neil Bursnoll, Adestra Production Team Leader
