Responsive Email Templates
We've put together this set of super awesome email templates so that you can make your email campaigns responsive!
Responsive, you say?
Yep. With more and more people pulling out their phones to check their email, we knew there had to be an easier way to ensure campaigns looked good on any device. That's why we recently made all our email campaigns responsive. Which had a lot of folks asking if we could do the same for them. And so we did.
Check out Ink, our responsive email framework!
Since releasing these responsive templates, we have been working hard on a responsive email framework. Quickly create responsive HTML emails that work on any device & client. Even Outlook. How HTML email was meant to be read.
Visit Ink →Creating these templates weren't without their challenges. We delve deep on our blog on how we overcame them.
Available Templates
Take a gander at the various templates available to make your emails responsive.
Download All-
Basic
PreviewThis template is perfect for sending a basic but nice looking email to your readers.
Download -
Hero
PreviewWant to include a snazzy hero image in your email? This template is for you!
Download -
Sidebar
PreviewThis template includes a sidebar area for a list of links, perfect for linking to additional content.
Download -
Sidebar Hero
PreviewWant a sidebar and a hero image? Let's go crazy! This template combines the Sidebar and Hero templates.
Download -
Newsletter
PreviewThis template is perfect for a point-by-point newsletter. For good measure, we've thrown in a hero image, too.
Download -
Score an awesome product engineering or design job
Getting Started
We'll take you through the basic steps to using these email templates
Things to Know
- The templates come with separate CSS stylesheet and HTML file.
- Our preferred email campaign client is Campaign Monitor, but these will work with whatever client you choose. Typically, both the CSS and HTML files are uploaded separately into the client.
- The client typically puts the CSS inline with the HTML itself after both are uploaded separately.
- If you are adding images, a separate folder must be created and compressed with the CSS stylesheet when uploaded.
Bring CSS Inline
All CSS needs to be inline for HTML emails. For ease of editing, we've kept the CSS separate. When you're ready to send your email, you'll want to use a CSS inliner tool, such as MailChimp's or Premailer, among others. Many email campaign tools such as Campaign Monitor will do this for you automatically.
Use an Email Campaign Tool
You can't just paste the HTML code into an email. You'll need to use an email campaign tool such as Campaign Monitor or MailChimp. These tools will format the email with the HTML code you provide, and they'll also move the CSS inline automatically, ensuring that it will render in the majority of email clients.
Supported Email Clients
Here's a breakdown of the email clients that we've optimized the templates for.
Client | Supported | Issues |
---|---|---|
Gmail (Desktop) | Yes | |
Gmail (Mobile) | Yes | If the same email is sent repeatedly Gmail will clip it, causing the layout to appear slightly wonky. |
Gmail (iOS) | Yes | |
Gmail (Android) | Yes | |
Yahoo Mail (Desktop) | Yes | |
Yahoo Mail (Mobile) | Yes | |
Mail (iOS) | Yes | |
Mail (OSX) | Yes | |
Email (Android) | Yes | |
Outlook Express | Yes | |
Outlook 2003 | Yes | |
Outlook 2007, 2010, 2013 | No | |
Outlook 2011 for Mac | Yes | |
Hotmail (Desktop) | Yes | Headers are green sometimes. |
Hotmail (Mobile) | Yes | Body is 15px too wide to the right - might be a padding issue. |
Thunderbird | Yes | |
Sparrow (iOS) | Yes | |
Sparrow (Desktop) | Yes | |
Entourage 2004 | Yes | |
Entourage 2008 | Yes | |
Windows Mail | Yes | |
Live Mail | Yes |