Coding InStyle

When my company moved from text to HTML e-mail newsletters last year, I found myself going back in time for web design. I had to toss out using semantic code and advanced CSS to create HTML e-mail designs that would be compatible with the wide assortment of e-mail clients. I was humbled as I would complain about cross-browser testing, but it was nothing compared to trying to design a HTML e-mail that would work for the varieties of e-mail clients. Needless to say, I’m glad I don’t do HTML e-mail designs all the time.

I’m going to get a bit technical hereafter, just as a heads up. I found that GMail strips out all my embedded CSS code so my designs would look unstyled. In order to get it to work in GMail, I went back to designing layouts using tables (Eww..) and found online tools to convert my embedded CSS code to inline.

However, every time I made an edit, I had to go back to the tool, and copy and paste my HTML and CSS separately to get a final HTML page with inline CSS for deployment. I was surprised that there was no open source tool to help automate this process (or perhaps there are, but Google and I didn’t find them). So I decided to create my own and share it for anyone else who found themselves in my position.

I call it InStyle, in trying to be clever. It’s a PHP class that will extract the embedded CSS in a HTML file, apply it inline, and return HTML code with the inline CSS. Since I needed it to work in PHP 4, due to server configuration limitations, I used another PHP class, Simple HTML DOM, to help me navigate the DOM and apply the styles to each HTML element defined. I was surprised and pleased at how well it worked.

I’ll likely be making updates it to it as my company uses HTML e-mails more often. I’ve added the project to GitHub, so it will track my changes over time and serve as a project download site. I’m excited to release this to world and hope that it helps someone else who wants to simplify their HTML e-mail deployment process.

Go to the InStyle page »