Size your CSS for HTML e-mail with Premailer
One of the main concerns when creating an HTML page to send via email (like a newsletter) is that the application that will be used by the recipients to read your page has, at best, a very vague interpretation of CSS (at worst, no support at all), whether that CSS is linked from an external stylesheet or directly inserted into the document (in the HEAD section). Hopefully, there are alternatives. But some are far more usable and effective than others…
One of the ways to solve the headache is to force the CSS description into each HTML element that will be needing one. This technique is called inline CSS, and is proven to work. However, it’s quite a pain in the … (well, where you feel pain when you have to spend hours on boring stuff), since it’s a very time-consuming procedure.
To give you an idea, here is how inline CSS works. Imagine you have this:
<h2 class="sectiontitle">Welcome</h2>
and sectiontitle relates to:
.sectiontitle {
font: bold italic 24px/30px arial, helvetica;
color: #58fe2a;
letter-spacing: -0.08pt;
padding-bottom: 20px;
}
Now imagine you have about 20 h2 headings with that sectiontitle class in your document. Using inline CSS means that you’d have to turn each of these 20 h2 tags into:
<h2 style="font: bold italic 24px/30px arial, helvetica; color: #58fe2a; letter-spacing: -0.08pt; padding-bottom: 20px;">Welcome</h2>
Nice, uh? Oh, and the same applies of course for every HTML element you need to style.
Hopefully, here comes Premailer. It’s an online service that turns a regular web page with attached external stylesheets to something understandable by Outlook, Thunderbird or GMail. Simple, neat, and effective.
The tool is pretty straightforward: paste the URL of the page you want to convert, specify a querystring if needed (for example, a tracking code if you have one), and click on “Submit”. The engine parses your document and turns every CSS rule into its inline CSS counterpart, then displays a link to the converted document so you can check it and save it. It also provides a short analysis of the used CSS properties, and indicates how well each would be supported in the major email clients.
Needless to say, this service is really, really appreciated, and will save hours of headache to everyone who needs to create documents for an email communication campaign…