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 →

Available Templates

Take a gander at the various templates available to make your emails responsive.

Download All
  • Basic

    Basic

    Preview

    This template is perfect for sending a basic but nice looking email to your readers.

    Download
  • Hero th

    Hero

    Preview

    Want to include a snazzy hero image in your email? This template is for you!

    Download
  • Sidebar

    Sidebar

    Preview

    This template includes a sidebar area for a list of links, perfect for linking to additional content.

    Download
  • Sidebar hero

    Sidebar Hero

    Preview

    Want a sidebar and a hero image? Let's go crazy! This template combines the Sidebar and Hero templates.

    Download
  • Newsletter

    Newsletter

    Preview

    This 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

    via Job Board from ZURB

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

Product Design Training from the Experts at ZURB


Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×