Header image

Premailer

Don’t forget http://.
Note: make sure you use absolute URLs for all your links
Optional, but useful for adding tracking codes. Do not include the '?'.
e.g. utm_source=newsletter&utm_medium=email&utm_campaign=spring-sale
Many thanks to Campaign Monitor, Premailer’s sponsor. They do all this inline CSS voodoo automatically each time you send a message, and their interface is pretty, easy and powerful. If you haven't checked them out yet I heartily recommend you do.

What is this?

For the best HTML e-mail delivery results, CSS should be inline. This is a huge pain and a simple newsletter becomes un-managable very quickly. This script is our solution.

  • CSS styles are converted to inline style attributes
    Checks style and link[rel=stylesheet] tags and preserves existing inline attributes
  • Relative paths are converted to absolute paths
    Checks links in href, src and CSS url('')
  • CSS properties are checked against e-mail client capabilities
    Based on the Email Standards Project’s guides
  • A plain text version is created

A few things to note:

  • Things can get messy very quickly with the * selector—be careful
  • Only the screen, handheld and all media types are processed

Bookmarklet

If you’re using Firefox 3+, you can use a bookmarklet as a shortcut to processing pages.

To install, drag this link up to your toolbar: Premailer

Current status

The current version, 1.5.2, has a new home and active development has resumed. Please update your bookmarks to http://premailer.dialect.ca/.

Updates are announced at http://twitter.com/TheCHANGELOG.

Nuts and bolts

Premailer is written in Ruby, with a lot of help from Hpricot and the Sinatra framework (goodbye eruby). Premailer is still under active development—please send on any bugs you encounter.

The source is available on GitHub.

Written by Alex Dunae at Dialect (e-mail 'code' at dialect.ca), 2007-09.