How We're Hacking Email at HubSpot

This was first posted on Jonathan Kim's blog. If you find the topic of email tantalizingly enjoyable, you might like to read the first half of this two-part series: Quirks in Email Design.

Isn't Email Old News?

Email has been around for a while, so all the good tricks would have been found by now.

False.

There is still much hacking to be done in email, not just by providers, but also by consumers and third-party vendors. Here's a quick list of things we're doing to make email better at HubSpot:

• Programmatically changing email content
• Converting images to HTML (where appropriate)
• Cleaner, more elegant preview text
• Better environment detection (e.g. mobile vs. webmail)
• A better email boilerplate

Let's get right down to business and take a look at the code.

Programmatically Changing Content

I'm not going to dive in deeply on this one since I already wrote about this technique in November. However, I've made a small update to it that make it more reliable. Here's the latest:

Converting Images to HTML

Sometimes, you just really really want to get around those pesky image blockers to entice people to see more. To do that—but mostly to see if it was possible—my coworker Keith Barrette wrote a little script that takes an image and converts it to email-safe HTML.

That's right, we're talking tables. In fact, you can see an example of the outputted HTML, live in your browser, here: http://dl.dropbox.com/u/2977827/logo-html.html. This isn't for every case, and I definitely don't recommend it for use on large images. However, this experiment would be really useful on small images, like logos, which render with higher fidelity than larger, curvy images. This lets us keep a subtle reminder of the HubSpot brand in the email, even when images are blocked (which happens 52% of the time according to this Campaign Monitor blog post).

It's Keith's code, so I'll let him share it with the internet when he's ready.

Elegant Preview Text

One thing that's often overlooked is the preview text. Even Campaign Monitor (sorry folks) seems to overlook this in their own marketing emails. It's not a huge deal, especially if you have a long email subject, but it can sometimes make a noticeable difference. Besides, sweating little things like that are what make your emails memorable and polished.

There are two main ways people will see your preview text:

1. As a desktop popup/notification (mostly desktop clients):

2. After the subject line (almost all clients):

Don't get caught with "Hi Jane," or a "View This Email in Your Browser" link as your preview text. Instead, you can simply insert a 1x1px image immediately after the body tag and assign it some alt text. The alt text will get picked up by email clients as the preview text, but it'll still be properly hidden. In order to play nicely with all clients, your pixel should look like this:

If you're looking for bonus points, you can use that same image as your tracking pixel! Just fill the source attribute with a link to your data collection endpoint (we're doing this at HubSpot).

Environment Detection

Sometimes it's useful to do different things based on the environment you're working in. For instance, you'll probably want to have a mobile version of your email when it's being viewed on an iPhone, and this should be different from the printed version of your email, which should have it's own set of styles.

It's also important to note that these environmental detectors can be used to trigger tracking pixels, so you can record actions, environments, device types, etc. Huge hat tip to the innovators at Litmus for inspiring me to go down this path. Those folks are doing so much email voodoo that it'll probably be years before anyone else catches up.

Forwarded message: your content will be wrapped in a <blockquote> tag.
Printed message: do a @media query for a print style sheet.
Mobile: use @media queries. You can even use these to figure out the device's exact make and model.
Non-Gmail: you'll probably never need this, but you can use the <style> block since Gmail doesn't support it.
Microsoft:surprisingly, you can use conditional comments, much like you would in an HTML web page.

A Better Email Boilerplate

Much of the above has been rolled, in some fashion, into an improved email boilerplate here at HubSpot. It's still pretty new, but I'm hoping we can use this as a baseline for future emails we send to customers. It'll also be something we offer to customers who send email through HubSpot and use our in-house email templates. I don't yet feel comfortable about disclosing the code, but here's a summary of my favorite boilerplate features:

• Rock-solid wrapper. I've done 90% of the work necessary to make sure your email looks the same (and beautiful) across all email clients.
• Fixes for the iPhone. This makes sure fonts, phone numbers, addresses, etc, are rendered nicely.
• A "remove from mobile" CSS class. If there's something you think will clutter the mobile version of your email, just assign class="hide" to it, and poof!
• Drop-shadows and rounded corners. This will intelligently fall back to loading images when CSS 3 isn't available.
• Litmus-style tracking pixel (for internal use). We use this to track opens, forwards and prints. We also do our own click-tracking in-house.
• Preview text (rolled into our tracking pixel).

Some features that I'm looking forward to adding eventually:

• More specific fixes for the different email clients.
• Better hover- and click-state support.
• More CSS 3 effects and smarter fallbacks.

I've been diving pretty deeply into making amazing emails at HubSpot, and I plan to upload some screenshots next week of what those emails look like. I think they're some of the best summary emails being sent by any SaaS company today (I've been keeping count). If you have any awesome ones, please share!