I’m in the process of creating an course talking about how to use my favorite email autoresponder service, Aweber, and I regularly get questions about html styling in emails.
This post is to help address a real common problem with email CSS styling regardless of the email service you are mailing from (assuming it supports html that is).
When we create pages or “templates” in tools like Kompozer (free) or Dreamweaver (pro) these tools adhere to the correct standard for styling via CSS which is to pull the styles into a <style> </style> section in the upper part of the document.
Unfortunately that will not work for most email services as they open the <body> tag, which should come AFTER the styles before you are able to input your content.
The same issue also applies to converting CSS styles to inline CSS for use on the affiliate platform I use, Rapid Action Profits (RAP) as it’s header is universal across all the pages in the directory and it opens that header before you add your content to the salespage.html file.
Generally conversion of CSS styles and stylesheets to inline CSS is annoying, tedious, technical and costly. Absolutely NOT something I wanted to be doing myself!
What I found is that tools exist, known as “PreMailers” or “PreMailer PreFlight Checklists” that are able to auto-convert the CSS styles into inline styles and that… surprising to me… they actually WORK!
The currently free PreMailer I’ve been using is found here.
The page is white-on-white so you may not at first realize you need to click on the words “Paste HTML as Source” which is a button that opens the text box for you to put your code into. (You also can point the premailer to a file already on the web.)
I then put a check in to two boxes “Remove classes” & “Remove IDs” but I leave the other two options (remove comments and retain style tags) unchecked.
Click submit and VOILA! Like that, you’ve saved yourself a ton of billable hours with a designer.
You will however still have the need to check your styling and layout on a number of browsers and email clients and that can be done very cheaply using Campaign Monitors Email Testing Service.
Assuming it does not past testing, it will now be a LOT less hours to fix and get compatible. Its worth nothing that MOST CSS behaves differently in different browsers and certainly in different email providers. Do not expect your template or page to look the same to all users, but try to find a “good enough” (or settle on giving up a lot of styling finesse, your choice)!
Now you know my new secret to quickly and easily converting CSS styles and stylesheets into inline CSS for use in spiffy email templates and other environments where things before the opening body tag are out of your control!
Taking The Headaches Out Of Online Marketing
PS: Speaking of newsletter, are you signed up for mine? Drop your name and email in the box so I can send you cool stuff!