Getting your HTML e-mails to work across different e-mail clients and browsers

May 23, 2014 at 11:41 AMMadestro

If you have worked on creating HTML e-mails, you know how frustrating and time consuming it can be.

Not all browsers (and e-mail clients) are created equal, so it's very hard to get stuff to look the same in all of them.

I was editing an e-mail the other day and sure enough, it looked great in one browser but completely messed up on the other.

While  reviewing the HTML in Chrome with the Developer toolbar (F12), I noticed a couple of interesting things:

1. The Elements tab does not display MY code. It displays Chrome's rendering which presumably fixes some inconsistencies and most importantly ADDS consistency by tweaking your HTML slightly.

2. The styles tab displays a box at the bottom with a drawing representing the ACTUAL size, margin and padding of the selected object. Notice I said ACTUAL, not the HTML/CSS defined values.

So, armed with these two things, I did the following:

1. Made sure I got it looking great on Chrome.

2. Copied the source from the Elements tab and replaced my source (right click on the HTML node and select "Copy as HTML"). This effectively gives me cleaner, Google-sanitized HTML code.

3. Used the little Styles tab to get the ACTUAL height, width, margin and padding of my objects. I then drew a little diagram on paper to make sure the numbers made sense (sometimes you put a table with 500 width and include a 520 width TD in it, lol). I took all the ACTUAL values and replaced my ORIGINAL values. For instance, if I had declared a width of 500px for a table, but the actual value was 495px and the table looked great, I replaced the 500px with 495px on my document.

Needless to say, it worked like a charm.

Granted, this is not going to fix all inconsistencies among browsers/clients. Some issues require more complex workarounds but this will take you most of the way.

I also know there are tools out there that can do this for you. This is just a quick, free way to get your HTML e-mails displaying properly (for the most part).

Good luck!

Posted in: Web Development


Feel free to share this blog wherever you want!

May 23, 2014 at 11:37 AMMadestro

Hi all, 

I have come across a number of posts from people asking if it's OK to share the content of this blog. The answer is YES!

Please feel free to share the information in any way, shape or form. The main motivation behind this blog is to spread information and save others valuable time.

Have a great day!

Posted in: Everything else