Techniques for troubleshooting html emails

We get a lot of questions from frustrated designers trying to deal with their beautiful designs being mangled by various email clients. Often we don't have a single straight answer, because it is an issue with support for a particular form of HTML or CSS.

We're going to start pushing for standards in HTML emails, but even so we all need some skills in how to track down problems with our HTML and CSS.

Here are a few techniques I use for web pages and for emails - feel free to reply with your own techniques, processes and ideas.

* Borders on everything: Adding a 1px coloured border to different elements helps you to see where the elements are interracting with each other, whether sizes are applied and where you might have munged tags. Tools like Firebug can let you do this live.

* Chop it in half: If you can't figure out where a problem is coming from, try cutting out big chunks of the CSS until it goes away. It helps you narrow down to the section that is causing the problem, which can save a lot of time.

* Validate your code: Even if you aren't going to be able to make it 100% valid, it will pick up broken tags and incorrect nesting, things that you can easily miss when you've been looking at the code for hours.

How do you troubleshoot your designs?

morley, 10 years ago

Our situation is a little different: we have a lot of B2B clients, so it's predictable table-based for us, and problems are usually small matters of table math.

But usually, these techniques help:
* Firefox Developer Toolbar, which adds borders on block elements / tables / currently-selected element / a whole lot of other stuff. Plus, it has an option for disabling background-images.
* Sometimes, using Firefox's "View Selection Source" helps us debug a single webmail client by looking at how they mangle our code. Same deal with "View Source" in Outlook 03.
* Looking at the email list. If there's only one or two accounts of the offending webmail client, sometimes it makes more sense to make the design only work 95% in that one client rather than spend hours for that extra 5%. (I know it's lazy, but let's be honest now.)

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free