Menu
Outlook sucks in so many ways, it’s unbelievable it’s still out there. With that said, the specific quirk that I want to discuss today, is called the “Outlook can’t add” bug.
All right, I just made that up. But it’s exactly what’s happening: Outlook isn’t able to add the pixel widths of tables and / or table cells in responsive templates correctly. For some reason it always adds a couple of pixels, which causes some odd behaviour. Let’s take a two column layout with a total width of 550px. The left column is 400px and the right one 149px. Then we have a 1px vertical line separating the two columns, which makes a total of…drum roll…550px.
Outlook goes: uhhhhh…?? Then it works its voodoo, and poof: 553px! Or 555. Or 666, which I think would be even more appropriate. Anyway, Outlook just doesn’t get it. There are some ways to minimize this effect, but I’ve noticed the only thing that actually works is making sure the total width of all elements is at least 3px less than the *actual* total width of your email. In this case:
Total width of email: 550px.
Left column: 400px.
Max width of right column: 550px – 400px (left column) – 1px (vertical line) – 3px (Outlook’s cut) = 146px.
The 3px thing isn’t carved in stone. Sometimes it’s 4px or 5px. I usually keep a margin of 5-10px. You’re usually going to have some whitespace between the two columns anyway, so you may as well reduce the padding and introduce this quasi-margin (“quasi” because it’s not really a margin in the traditional sense: it’s just a little bit of unclaimed territory in your HTML file).
As a final note: this *usually* only happens in responsive emails. With a non-responsive email (please go sit in the back of the room in silent shame if you still work with non-responsive emails of your own free will), you shouldn’t normally have any problems. Bear in mind though: this is Outlook we’re dealing with here. Microsoft Outlook.
