Over the years, we have done a number of posts about email design best practice, and these highlight one feature of email design, that can create some time consuming work. That is the issue of inline CSS. When you design your email, you will normally find that CSS is defined using classes, with the classes defined in a block at the top of the code. For websites, using class-based CSS, and ideally referencing your CSS from a separate, dedicated style page on your website is very much the preferred option. This is not the when designing emails. Because oof the way many email clients render HTML emails, it is much more reliable to include CSS style data in-line, in the body of your message.
However for email, these css styles need to be defined “inline” using style=”” rather than Class=””. so the above code, set up for email would be:
Although it is a simple case of cut and past to deliver this format, in more complex emails, this can be a time consuming job. But no more, as we have found this useful tool for converting classes to inline CSS: Premailer – Pre-flight for HTML email. Simply click on the “Paste HTML as the source ” text, and past the code you want to convert into the box that appears, and click “submit”. The site will then deliver the in line css for you to copy and past back into your email. We have used it on a number of emails, and the CSS it delivers seems pretty accurate. However, as always, make sure you test your emails before sending them. If all this seem like hard work, and you would like some help in ensuring that your emails reach their destination looking as you had intended, please feel free to get in touch, we are always happy to discuss the options.
