Responsive Web Design, Part 2 (2015)
Responsive Email Design
Webmail Clients
Webmail is how the world receives its email, even though its popularity has been sinking year after year owing to the rise of mobile readership. It wasn’t always like this; back in the mid-1990s, webmail began its meteoric rise with the release of Hotmail, one of the first free email services available on the web.
OUTLOOK.COM
Microsoft’s Outlook.com is the current evolution of that client. It’s easy to take pot shots at Microsoft and some of its products, but Outlook.com ranks as one of the best webmail clients available today.
Its support for HTML and CSS is very robust, though it isn’t perfect: web fonts aren’t supported, and neither are more advanced CSS3 properties like animation. It also has some pesky CSS quirks that are known to cause frustration, like the lack of support for the margin property, and finicky handling of line-height. Thankfully, these issues are fairly minor and easy to work around.
YAHOO MAIL
Another email client with a long history, Yahoo Mail launched in 1997 during the free webmail boom. Today, it’s the third most popular webmail service after Gmail and Outlook.com.
Like Outlook.com, Yahoo Mail has come a long way over the years and boasts fairly comprehensive support for HTML and CSS. It does, however, fall short on support for CSS3 properties like border-radius, and, of course, doesn’t support web fonts.
GMAIL
Of the major webmail services, Gmail is the youngest, only becoming available to the general public in 2007.
In the relatively short amount of time it has been around, Gmail’s user base growth has been nothing short of explosive, owing to the proliferation of Android devices worldwide. Ironically, despite its newness, Gmail’s email rendering capability is closer to desktop Outlook than Outlook.com. That’s primarily due to the fact that Gmail’s code sanitizer strips <head> and <style> elements, meaning all CSS in an email needs to be inlined in order to work, which makes responsive email impossible.
AOL MAIL
Finally, there’s AOL Mail, and it’s one of the better webmail clients out there. No, seriously. Its rendering engine is better than those you find driving some other webmail services.
It has its share of problems, however. Like Gmail, CSS needs to be inlined for styling to render because <head> and <style> are both stripped from the email’s HTML. This also means that media queries aren’t supported, despite the fact that the client itself is adaptive on smaller displays. Additionally, there’s a lack of support for some CSS3 properties.