How to style your HTML email without breaking anything
"Warning" when creating an HTML template
If you see this message when you create an HTML template, then most likely your code contains invalid tags, which you should remove in order to send your email correctly.
How to do it:
How CSS Can Break Your Email Template
Email clients are famous for mangling CSS in a variety of creative ways.
Using CSS for layout. CSS just doesn’t work for email layouts. Most email clients do not support CSS layout or will break your CSS layout—each in its own unique way. HTML tables may be old school, but they produce emails that look good across devices, and they are really the only way to go for email layouts.
Using external style sheets. External style sheets are standard for websites, but they cause major problems with email. An external style sheet tells the email client to go to the internet, find a file, and load it. To the email client, that sounds like spam—so the link will most likely be blocked. That means you’ll be stuck with the client’s default formatting.
Using embedded styles in the <head> section. The advantage of CSS is that you can set your styles in one place, rather than styling each piece separately. Unfortunately, many email clients don’t support embedded styles and will strip the information out of the <head> section. Again, you’ll be stuck with those default fonts and colors.
Failing to account for variations in CSS support across email clients. There’s no single way to do CSS for email because CSS support varies widely among email clients. That means you’ll need to know what clients your customers use and what CSS support those clients offer.
Smart CSS approach: Use inline CSS for styling
While we don’t recommend using external style sheets and embedded styles, using inline CSS styles can give you excellent styling control. You’ll want to use an inliner, which converts the CSS styles from the <head> section of your email code to inline CSS.
Here’s what embedded CSS looks like:
<html>
<head>
<style>
h1{ color: blue; }
</style>
</head>
<body>
<h1>A Blue Heading</h1>
</body>
</html>
And here’s the same styling inline:
<h1 style="color:blue;">A Blue Heading</h1>
Note: When you use an inliner, your email will look slightly different after inlining; the inliner tweaks your code to work inline. Make sure to test your email so you can troubleshoot any issues
A little bit more...
You can get great results with careful use of CSS in emails—and you want to make sure you’ve got a good reason before you commit the development resources you’ll need for it. Here are some tips to help you ace your next CSS challenge:
- If a stakeholder is keen on something that’s high risk and/or high-time investment, run the numbers. What percent of your audience do you stand to lose if deliverability is impacted or your email gets mangled?
- Don’t put style before structure! Make sure you’ve got a solid HTML foundation in place for email format before you add styles with CSS—and let your structure be your guide.
- Test and learn. You should always test emails thoroughly before sending—and that goes triple when you’re incorporating CSS. Review your test results to develop best practices to guide your decisions going forward.
- Compare soft and hard costs. If the CSS is worth doing, it’s worth doing right. The hard cost of using a vendor might outweigh the soft cost of your team’s time.
