Since releasing Ink, our responsive email framework, we've received quite a few questions about the exact workflow for creating emails that work across devices. People also ask what we learned while building the framework that lead to that workflow ' and ultimately send effective email campaigns.
We've covered why we chose to make Ink an actual framework, not just another set of templates. Here's the recap: Frameworks extensible, proven bases to build upon. They provide practical coding standards that give you more freedom to design. And they allow you to create templates ''but they do more. Frameworks give you a process by which you can create and send out responsive emails.
The Responsive Email Workflow
One of the things we learned whilst building Ink was the importance of a process to sending out effective email campaigns. Working without a process can have disastrous results. Emails will look horrendous on mobile and elsewhere. And we hate to admit that it happened to one of our recent newsletters, which didn't look so hot on mobile but fine on desktop. The problem occurred because we didn't properly test — a crucial step in the process. We didn't follow through on the process precisely. It was a hard lesson. Let's take a closer look at how we build emails using Ink and how you can avoid any snafus like ours.
1. Test Early for Desktop
Warning: this might contradict what you've normally heard and what we advocate when building online products. So here it goes: We build for the desktop layout first, using practices that we know will work with Outlook, such as avoiding margins and using absolute sizing for images. Why? Because Outlook, the second-most used email client, still matters. We're building for the most technically constrained clients first.
And we do this early in the process, using a browser like Chrome to test as we code. This is a crucial step in our workflow.
2. Mix in Some Responsive Styles
We progressively enhance the mobile experience by adding responsive styles by modifying our layout for small screens using "max-width" media queries. We place these in the <head> of the document within the <style> tag. A lot of these are already built into Ink, however.
@media only screen and (max-width: 600px) {
body, table[class="body"] {
min-width: 0px !important;
}
table[class="body"] .right-text-pad {
padding-left: 20px !important;
}
table[class="body"] .left-text-pad {
padding-right: 20px !important;
}
}3. Inliners are Important
Once we're coded up and everything looks swank, we have to bring our styles inline. Why? Because some email clients, like Gmail, strip out your CSS unless it's inline. That's why using an inliner is crucial. There are variety of services you can use, but you can also use our CSS inliner, especially if you're using Ink.
4. Test, Test and Test Some More
Testing is crucial ''as we showed in our little parable. We use Litmus to test all our emails before they go out. But you can't just rely on a service. You have to pick up a device. Around the office each of us has an iPhone and iPad at our desk. We have several Windows and Android devices lying around. While relying solely on an email testing service is easy, it's amazing how much just looking at an email on a device can save your butt.
5. Ship it out!
And the last and important process — sending email out. We like mail service tools like Mailchimp and Campaign Monitor, professionals with the expertise and mail server setup to do the job right.
One final thought: a process and framework allow you to start from scratch rather than hacking on the same email templates over and over again. You have more flexibility to tailor your campaigns to suit your needs.
Learn How to Build Your Own Responsive Emails
We send out 10 email newsletter campaigns a month and create email templates for our clients. And we learned a lot building Ink. If you find this process interesting, you or your team might want to sign up for our Introduction to Responsive Email Design course.
Topics will include:
- The basics of HTML emails
- Coding HTML emails
- Responsive email design
- Getting your email out the door
We'll hold the first course on Thursday, Dec. 19, 2013 at 9 AM PST! Attend from anywhere, streamed directly from ZURB HQ in Campbell, CA.