I got a call from a client with a slick WooCommerce shop. Everything was dialed in, but their transactional emails, the order confirmations and shipping notices, looked like they were straight out of 1999. A real brand killer. They wanted them to match their site’s design. “Should be easy,” I thought. That was my first mistake.
The core problem is that reliable HTML email styling is a completely different universe from web development. You can’t just link a stylesheet and call it a day.
The Gmail style gauntlet
I built a beautiful template on my local machine. Modern CSS, everything pixel-perfect. I sent a test to my own Apple Mail client and it was flawless, so I shipped it over to the client for a quick review. The reply came back fast, with a screenshot attached: “It’s all broken on my end.” It was from Gmail. All my styling was gone, just plain unstyled text.
My first thought, of course, was that Gmail was doing something weird and I could force it. I started throwing !important tags on everything, trying to bully the styles into place. I wasted a good hour going down that rabbit hole, and it doesn’t work. The real issue is far more fundamental.
Email clients, and Gmail is the king of this, are notorious for stripping CSS out of the <head> of your document. They just ignore it. To them it’s a potential security risk or a performance drag. So your carefully built stylesheet might as well not exist.
The only reliable fix: inline everything
After the initial frustration, I remembered the cardinal rule of email design: you have to inline your CSS, every single style. It’s tedious and feels like a big step backward, but it’s the only way to get consistency. You can’t put styles in the head; you attach them directly to the HTML elements.
<!-- This gets stripped by Gmail -->
<style>
.button {
background-color: #0073aa;
color: #ffffff;
padding: 10px 20px;
text-decoration: none;
}
</style>
<a href="#" class="button">Click Me</a>
<!-- This actually works -->
<a href="#" style="background-color: #0073aa; color: #ffffff; padding: 10px 20px; text-decoration: none;">Click Me</a>Inlining styles by hand is a total nightmare, but there are tools for it. Years ago I ran into a similar problem, and a post much like the one I read on carlalexander.ca pointed me toward automated inliners. Mailchimp has a good free tool that takes your HTML and your CSS and returns a version with everything inlined. It saves hours of painful, error-prone work.
So what’s the point?
The lesson here isn’t only about CSS inlining. It’s about understanding the environment you’re building for. Email is not the web. You have to forget about modern conveniences and code defensively.
- Assume nothing works: go in with the mindset that email clients are hostile environments for your code.
- Inline your styles: it’s the only way to be sure they’ll render.
- Use tables for layout: yes, tables, like it’s 2002. It’s painful, but it’s the most reliable way to structure a complex email layout.
This stuff gets complicated fast. If you’re tired of debugging someone else’s mess and just want your site to work, drop my team a line. We’ve probably seen it before.
Have you ever lost a day to a “simple” email template? I want to hear about it.
