Design
Creating emails
Email is, still, primarily a written medium. This means that good copywriting is crucial. Today I opened up an email and the pre-header says:
Laura, should have get your Naturals Sample Bag.*Web Version
Wait. What?
Maybe they mean “should have got”? But that’s implying they’re sending out free sample bags to everyone. That can’t be right. But I can’t tell because with images off that’s the only text in the mail, except the footer and legal information.
When you load images you get a little more clarity. Apparently, making a big enough purchase trigger a bunch of samples to be included in your delivery. So the line possibly should be “Laura, get your natural samples bag.”
Maybe it was intentional. After all it did get me to load images to see what the email was about.
Foundation: A toolkit for designing responsive emails
Zurb announced today version 2 of “Foundation for Email”, a full stack for designing content for responsive email.
It looks rather nice, with features a modern web developer might look for when working on email content. It has many of the things you’d expect a web design stack to have. It support SASS for styling, includes browser sync for previewing content as it’s edited, both on a local browser and on a device, and uses gulp to tie the workflow together.
But it also has some features useful for email that you’d be unlikely to find in a web design stack. It has an inliner, to convert separate SASS/CSS and HTML content into a single HTML document suitable for sending by mail. And it supports a slightly extended HTML format called “Inky”, which lets you use simple tags like <row> and <column> to develop grid-based content, then compile those into old-school HTML tables which mail clients will happily render.
And it comes with ten starter templates for different types of email.
You can find documentation, downloads and examples here.
Email design resources
One of the more frequent questions I get that I can’t answer is how to design a good email. Design is just not my strong point and outside actually getting the HTML right, what an email looks like doesn’t have a whole lot to do with delivery. It was pointed out to me today that the nice people over at Mailchimp have a resource page for designing emails. It’s a good mix of theory and explanation and some code examples.
Very useful if you’re trying to create pretty HTML emails from scratch.
Is it ever OK to violate best practices?
Last week @justinpremick tweeted the question “Is it ever OK to break best practices.” My reaction, and reply, was of course it is OK to break best practices, if you know what you’re doing and why.
Best practices are all about things that are safe. If you do these things, in all likelihood you will not encounter any major problems. The things we tell people are best practices are not written in stone and inviolable. Rather, they’re a way to succeed without understanding all the ins and outs of email.
The key to violating best practices is to know why the recommendation is a best practice. Take, for example, practices relating to email design. Best practices say that emails should not be image only and they should be designed in such a way that users don’t have to scroll sideways. However, StyleCampaign recently reported on a campaign from the Canadian Tourist Board that violated both of these best practices.
The email was laid out as a maze, requiring the user to scroll around the message to find the call to action. The designers have reported they are quite pleased with how successful the campaign was received.
So, yes, Justin, you can violate best practices and it is OK. Best practices are not laws, they are guides. If you know what pitfalls the best practices are helping you avoid, then you can violate those guides without problems.