GuideToEmailCSSSupport

While email still seems to operate in the stone age in terms of markup and css support, it is still progressing at an exciting rate. We can probably credit the push to the strength of the mobile market. Email is no longer the daily routine where you sit down infront the computer, open up a browser or email client. Nope, it is right in the palm of your hand, every minute of every day.

So if email is progressing so well, but still in the stone age, where is it going? There are a lot of bright developers who have been doing great work in regards to responsiveness and pushing the limits for css support. A recent project of mine was to revamp our user email notifications at CarBounce.

Templates and Generators

MailChimp’s Email Blueprints

A thorough selection if email layouts. If you’re not using Mail Chimp you will notice there are a Mail Chimp specifics in the html. None the less a handy collection.

Zurb’s Responsive Email Templates

Possibly one of the best recent collections of responsive emails available. The templates feature different layout combinations so one is bound to fit your need. I give this 4.5 stars since it works for nearly every email client.

Adding Background Images

A simple approach to add background images to emails. If you new to this support is hit and miss, so this is a big help to achieve cross client support.

Email Background Generator

A generator for using background images in emails, and to achieve the highest compatibility.

Email Button Generator

A generator for creating buttons in emails.

CSS Inliners

CSS inliners are very helpful tools. As you may or may not know, currently the best way to get a high support rate for css is to place it inline in your html. The downside is this completely defeats the purpose of css. CSS inliners will take you css file and distribute the styles for you into the html tags. A prime example of the DRY principle! If you plan on using Zurb’s responsive templates you will soon notice the css is in a separate file. You WILL be visiting one of the following links.

Emogrifier

This is a php based solution. There is a Drupal plugin and a Cakephp plugin. We currently utilize the cakephp plugin on Car Bounce.

Premailer

A web based inliner with an available api.

MailChimp’s CSS-Inliner Tool

A development of MailChimp, however you don’t need an account to use this web based tool.

Guides and Reading

CSS Support Guide

An extremely well documented and up to date resource for nearly every css property in the most popular email clients. A must bookmark!

Email Guidelines

A great place to start if you have little experience with email development. It gives a solid introduction to support and best practices.

Email on Acid Blog

Email on Acid is a blog with great tips, advice, and support news. They touch on great topics like avoiding the spam box.

BEN – Beautiful Email Newsletters

We’ve all seen dozens of CSS galleries, but BEN is an email gallery. Great to get inspiration and see how others approach their email newsletters.

Mail Chimp Resources

For this final resource you best wait for a rainy day, a hot cup of coffee, and a several hours spare time. Mail Chimp provides an elaborate collection of ebooks ranging from mobile to spamming.

By the time you have made it through these resources you should have a pretty solid resource bucket work from. Go forth, create, send!