After finishing an HTML email for The Knot today, I ran it, as usual, through Campaign Monitor’s design and spam test. To my surprise, the only clients it didn’t look good in (other than Lotus Notes < 8, boo! Lotus Notes) were the iPad and iPhone! I can’t recall the last time I did an email that didn’t render well in either of them.

In this case, the issue turned out to be an old one, but one I didn’t remember. By default, Apple sets the minimum font size in an HTML email to 15px. Luckily, there’s an easy way to disable this behavior.

For those really tight layouts where every pixel matters, add the following CSS rule to any text less than 15px:

-webkit-text-size-adjust: none;

Since I’m posting about HTML emails, I figured I might as well mention an(other old) issue that recently affected some developers at The Knot, but which can be a real headache if you’re not familiar with it: the mysterious gap below images. Certain browsers and clients add a few pixels of padding below images (which is caused by the default vertical alignment of inline elements) and this can break the carefully crafted, “semantically-rich” tabled-based layouts of HTML emails.

Since Outlook 2007 doesn’t support background images, I use the img tag for all images and always set them to display as block-level elements. Issue resolved!

For developers of HTML emails, the best advice I can give is periodically review the great documentation at Campaign Monitor!