Building an email can be a tricky task. You have to undo all knowledge you know of the web and go back 10 years or so to working with tables. And with it, all the fun of the email clients and their little quirks.

Now some of these you’ll probably know, some you may not know. If you know of any yourself, please send them over and I’ll add to the list. I’m no expert but wanted to just share somethings I found out when I was building emails daily.

Hopefully you know all about having to inline style everything.

1. Images and display-block

This is something that I always got caught out with. Basically with GMail and I believe Hotmail, no matter how tight your design build is, images always had padding around them breaking the design even if it looked fine everywhere else. The answer is to add the following to the img tag.

style="display:block;"

2. Line-height in Hotmail

I used to pull my hair out when working with Hotmail. No matter what I did, the text would stretch everything down. Until I realised that no line-height was set. If you add some line-height, it will render as you’d expect. The bastard!

3. Centering images

If you are trying to center align an image, you’ll probably find it won’t actually center align. A little tip I found out was to wrap the image in a table and then center align the table like this.

<td>
    <!-- This is the start of the wrapping table /-->
        <table border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <a href="#" target="_blank">
                        <img src="image.gif" alt="" width="50" height="50" border="0"  style="display: block;" />
                    </a>
                </td>
            </tr>
        </table>
    <!-- This is the end of the wrapping table /-->
</td>

4. Left align all text

To save time now, if you want all your text left aligned, make sure you set it to be. I would just add style="align:left;" to your td.

5. Yahoo you utter…

Yahoo email does what the hell it feels. It was the case back in 2011/2012 where it would add styling to random keywords in your text. Was like a blue dotted underline. Anyway eventually we found it to be a border. Once we knew what words it was adding this to, we were able to add this to the style at the top

.yshortcuts {
    color: #whatever colour you choose for your links;
}
.yahoo-no-underline .yshortcuts {
    text-decoration: none;
    border-bottom:none !important;
}

6. Remove all unnecessary white space
for example…

<td>&nbsp;</td>

You probably don’t need them and there is a chance some email client will add padding or margin to it. Also, if you want a TD to be a certain height and it’s pretty low, having a rogue &nbsp; will never let you go that low. Get rid!

To finalise

I hope these help. Email builds are pretty easy once you know the pitfalls of all systems. Make sure you test a lot. Use heights and widths on everything, the tighter the build the better. Oh and just accept that on some things, it will look a sack of shit.

Looking at you Lotus Notes!