Blog

The other day, I came across a timely post on Smashing Magazine, titled 'Publish What You Learn'. Timely, because I was amidst writing our recent post on removing spacing from tables in Outlook, knowing that this newly-discovered tip would be sure to help other email designers. While Smashing's post was focused on the benefits of sharing your web development know-how, I felt that the 'publish what you learn' mantra was even more relevant to email design, where the quirks are many, but often, information on email rendering issues is very thin on the ground.

Previously, I've encouraged customers to contribute to blogs, or better, start their own. In one case, the response was, 'Oh, but no-one would read a blog by little old me', which in my impression was shrugging off a good opportunity. In reality:

• There are only a handful of email design blogs out there, such as Email Design Review, StyleCampaign, Email Fail and of course, this one. It's by no means an over-saturated field.
• There aren't that many email marketing 'celebrities', either. This is a field where you can produce great work and stand out.
• Blog posts on email design tend to get a lot of attention. In the last year, a single post on background images in email received over 62k hits from Google alone! That doesn't count all the reposting and tweeting that often occurs.

The bottom line is, if you're designing for email and you come across a good piece of advice or a fix to some Outlook quirk, just publish it. Sharing what you know will not only help countless other people, but it could really lift your profile, too.

Finally getting atop an annoying email rendering bug gives geeks like us near-endless, t-shirt removing satisfaction. Especially when it's plaguing our newsletters. In this instance, our adversary was 3px spacing to the left and right of tables with align="" applied to them. The stage was Outlook 2007 and 2010. While this has been a long-running issue, things really came to a head when I was coding our latest email newsletter, only to find that two text boxes nested in a table would not sit alongside each other, thanks to said gaps:

Using align="" to float tables alongside each other is starting to be used as an easy way to convert a regular 2 column email design to a 'wrapped' 1 column on mobile devices. We'll cover how to do this in the blog shortly.

Anyway, after an agonizing hour or so of trying to close the gaps with padding and margin, I scheduled the campaign and walked away in defeat, knowing all too well that our Outlook-using subscribers would see the awkward gaps. Yes, I'd coaxed the boxes to sit beside each other, but it just wasn't perfect. And anyone who knows how I code email designs knows that not perfect is simply not good enough.

Time passed and things settled down. That's until a customer contacted us on the forums about the same issue.

Going gap-free

Instantly, my primordial feelings, my white-knuckled combat response returned. "There's no workaround for this." I typed. It felt like one of those scenes where the righteous cop hands over his badge and gun, locked in an expression of both impotence and rage.

There was no workaround, until another customer chimed in.

Known only as dedra and slinging a line of Microsoft Office proprietary CSS, he had a near-solution - that is, using mso properties to control spacing between elements. The brain juices started flowing. I started googling around and found the answer tucked away on Emailology, a genuine Aladdin's cave of email design treasure. To remove the spacing, simply add the following to your CSS styles...

... or inline it like so...

... and the gaps will be no more. The end result is a great-looking email newsletter:

Many thanks to Emailology, the mysterious dedra and all our customers on the forums for this fix. We're now free to create responsive email designs with floating tables, that look just as lovely in Outlook 2007 and 2010, as in any other email client.