Blog: Tips & Resources

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.

Amongst the moving and shaking that's come with Gmail's 'new look' have been a couple of changes to how this email client handles background colors and images. To some of you this may be old news, but for many it may change the way you design for this notoriously finicky client. So here goes.

Gmail now supports background-image

Although it's but a small victory, it looks like Gmail has expanded its CSS support to encompass the background and background-image properties. This means that you can now define background images for elements like table cells and divs, leaving Hotmail, Outlook 2007+ and Lotus Notes as the only major clients that don't support what's a fairly fundamental CSS property. Thankfully, there's a hack for background images in Outlook 2007/2010, so it's up to you to make the call - do you design with background images in mind (and a fallback color)? Or play it safe?

Note that background-position and background-repeat are still not supported - only images, for now.

Background colors or images are now a must

With Gmail's new themes (which I have to admit, are very pretty), have been changes to how email newsletters appear in the preview pane. With themes activated, the preview pane is actually semi-transparent, allowing the theme to show through. The only way to fix this is to nest your design in a full-width table, for example <table width="100%" bgcolor="#FFFFFF" ... >, thus providing an opaque background for your content. Pictured is an example of content inside and outside of a table with a background color, as seen in Gmail's themed inbox.

Many thanks to Responsys for their post, 'Workaround for Gmail Background Translucency' and our keen customers who wrote in about background image support. If you've seen any news and notable changes in Gmail, or have your own tip for working with backgrounds, be sure to let us know in the comments below.

Just last week, our blog post on 'Improving the usability of email subscribe forms on mobile devices' gained quite a bit of interest. But what was particularly gratifying to us was seeing some of its lessons being put into action - by an upcoming Campaign Monitor rebrand, no less!

Cool customer Elliot Ross (of Email Design Review fame) recently took a responsive approach to designing the pre-launch page for Action Rocket, a new email design studio. What makes the page unique is how gracefully it adapts for use on mobile devices (pictured), courtesy of our little form template.

Email form validation with CSS3

Scaling for the small screen aside, this email subscribe form has two features that considerably improve its usability, both of which were achieved by using input type="email" on the Email: field. First of all, using the attribute, type="email" results in the special, email address-specific keyboard being displayed on iOS devices. But secondly, it means that the :invalid CSS3 pseudo-class can be used to highlight the field if it doesn't validate properly. Here's a sample of the CSS code used:

In times past, developers have long had to roll-their-own client-side validation using JavaScript, but with CSS3, all it takes is a snippet of code. Find out more about form validation on A List Apart's 'Forward Thinking Form Validation'.

Taking pre-launch pages to the next level

We've previously covered how to build basic pre-launch pages and add social sharing to them. With smart phones becoming increasingly ubiquitous, it makes a lot of sense to go the next step and make the email subscribe forms therein as mobile-friendly as they can be - we've even provided the code to help you get started.

Besides, what's a better way to show clients that you understand responsive design, than to create a responsive site?

Many thanks to Elliot and Action Rocket for sharing this great example with us. If you have a great tip or hack for improving the usability of your forms, be sure to let us know.

Since we introduced the template builder, our customers have used it to quickly whip up reusable designs with unbelievable gusto. Over 53,000 email templates have been created in the 5 months since we added it to all Campaign Monitor accounts, resulting in enough campaigns to span from here to the Voyager probe. Actually, I just made that one up, but you get the idea.

Sheer quantity of templates aside, the quality of email campaigns that have been built from template builder creations has really blown us away. So much so, that we'd like to share a few of our favorites with you. If these don't inspire you to get cracking on a full-blown design in half the time, then I don't know what will.

Jake Hamilton Music

Designer: MinistryPixel.com

This is a newsletter that won't be ignored. From the vibrant header image featuring the new Jake Hamilton website, to the passionate copy, there's a lot to like about this elegant, stripped-back newsletter. Ups to MinistryPixel.com for this uplifting design.

Antony Hare, P.I.

Designer: Antony Hare, P.I.

Private illustrator, designer and wordsmith Antony Hare has shown that saving time with the template builder doesn't mean cutting corners. Complimenting his work for major publications like the New York Times is this graphic (and oh-so-polite) email update... With just a touch of noir. For more of his charismatic illustrations, swing by his site!

Arkana

Designer: Pixeo

We see a disproportionate amount of great design come from Belgium and the Netherlands; this template from Pixeo and Emeka is a great example of this trend. Featuring a pleasing color scheme and a header image that adds a great dynamism to the one-column design, this is an attractive campaign in any language.

Image & Design Studio / 27Digital

Designer: Image & Design Studio

This newsletter gets our stamp of approval for a couple of reasons. The crisp, 3D-rendered header image, the use of color, the description of what's to come and the funny permission reminder roll together to make a thoroughly personal, fun and engaging campaign. It's official - the teams at Image & Design Studio / 27Digital really know how to leave their mark when it comes to email design!

The Hoopla Family

Designer: The Hoopla Family

Like a modern-day brag book, this 'Pool Room' email by The Hoopla Family contains the best of what this Australian design agency has to offer, or as they say, all killer and no filler. Showcasing the antics of a rather multidisciplinary bunch, it contains images that have been specially created for this newsletter, personable copy and a thick slather of Australiana - from the title (a nod to the classic Australian movie, 'The Castle') to a guest appearance by one of our more flamboyant footballers, Warwick Capper. Overall, this is a template builder original, through and through.

Thank you for checking out our template builder round up - we should do this again, sometime! Hopefully this has given you the inspiration to try your hand at creating a unique template for yourself or your clients. After all, they're automatically optimized for both big and small screens alike and are ready to use in fraction of the time it would take to build a similar template from scratch. So why not kick the tyres by rolling your own template?