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.
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:
Let's get right down to business and take a look at the code.
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:
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.
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).
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.
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:
class="hide" to it, and poof!Some features that I'm looking forward to adding eventually:
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!