It’s hard to find information about HTML emails development workflow, for sure they are not a new trendy thing that attracts developers attention, instead they stopped at a technology standard that predates IE6.
But newsletter emails are still nowadays the best direct marketing instrument to retain visitors, so it is valuable to know some hard facts before diving into templates development :
http://blog.pepa.info/php-html-css/html-e-mail/absolute-positioning-outlook-2007/
This article by Petr ‘PePa’ Pavel provides precious suggestions to handle better the development workflow for HTML/CSS email that are compatible with Outlook, some key points :
- Outlook and Word share the same HTML/CSS web rendering engine.
- Word can open the web URL using ctrl/cmd+O.
- Using a URL that prints an HTML page populated with dummy data it’s possible to check the markup behavior in Word whitout self sending many emails to check in Outlook.
- Even if Outlook/Word do support CSS selectors, Gmail ignores any style not declared inline as it doesn’t support the
<style>tag, so it’s necessary to somehow organize styles with the variables of the language we’re writing the template with.
To check the (terrible) CSS support across the most used mail clients the best resource is campaignmonitor.com.
Other things I noticed while developing templates for emails first hand :
It is important to pay attention to which version of Outlook we are using and on which operative system, comes out that the bugs we can find on Windows can change a lot between 2007 and 2010 versions.
Moreover the 2011 version for OSX has an overall advanced CSS support respect to the Windows version, almost similar to Chrome browser, meaning that it is not the best choice to test with it in the early stages, and the same applies to OSX Word 2011 as it shares the same rendering engine of Outlook, as previously stated. The best choice seems to test on Windows 7/8 starting with Word/Outlook 2007.
To test on mobile it is important to never forward the emails from a different mailbox. Every client tends to slightly modify the original HTML while adding information about the message such as date, sender and addressee. This way there is the risk of spotting layout errors that wouldn’t be present if the email is received directly in the mailbox configured on the device’s client.