Designing and developing custom email templates is not a simple task. The frustration of spending countless hours coding a file that perfectly matches a design template, only to see it break inexplicably in Gmail or Outlook can crush even the most seasoned of developers.
With that in mind, knowing some of the various rendering issues specific to the most popular email clients will help alleviate the pain at the outset. Recent findings by Litmus show that the five most-used email clients are Apple Mail (for iOS devices, as well as the desktop), Gmail, the Google Android mail application, Outlook, and Yahoo. Here are some potential problems an email developer might encounter with the top five mail clients:
Apple Mail, in general, does a good job rendering HTML mail as expected, which may help account for its popularity. One issue to be aware of is the lack of support for font tags. To make life easier, use span tags to style fonts for best results.
Gmail, on the other hand, can be quite frustrating to deal with. The Gmail client blocks images by default and clips long newsletters, resulting in the apparent need for users to click the dreaded "View as Webpage" link. Keeping email newsletters to a reasonable length and using background colors for image containers help minimize the problems, here. Worse, though, is the lack of support for responsive designs: Gmail doesn't always honor CSS declarations and ignores media queries altogether. Given Gmail's market share, reliance on intricate CSS and media queries is not recommended.
By contrast, the native Google Android mobile app demonstrates excellent support for HTML and CSS, including most CSS3 properties. Stay away from box-shadows and everything else should go smoothly.
All the Outlook clients seem to have their own sets of limitations, frustrations, and issues: CSS floats and positioning are not supported, nor are border colors. In addition, the Outlook client tends to do strange things to unordered lists (leaving empty bullets at the end, for instance) and defaults links to blue.
Fixes include adding the code "<div style="display:none;"> </div>" before the closing </ul> tag to clean up the empty bullets, and making sure all text is specifically color-formatted to help force styled link colors.
Finally, Yahoo Mail forces a margin around email, regardless of style coding, sometimes breaking fonts, and duplicating content for no apparent reason. The client also ignores paragraph padding by default, so manual line breaks may be necessary to keep paragraph integrity.
In the end, contemporary HTML and CSS are still not fully supported, even in the most popular email clients, so keeping things simple and straightforward are still the best practices. The wow factor of a cutting edge design is lost when mail clients ignore the code necessary to create them.