How To

Designers: 25 Resources For Turning Designs Into Responsive HTML Emails

1 Sep , 2017  

Hey everyone, great to see you again!

For the first time in a looong time I’ve had to create some responsive HTML emails.

I had to turn a PSD file into HTML that would display correctly in all kinds of email clients, big and small.

In some ways, this was super weird, because almost nothing has changed. Basic HTML, basic styles.

You know what the modern web development world is like, right?

Spend too long on your lunch break, and that framework you were using before lunch is obsolete already.

But email! The technology used to build HTML emails has barely changed since the late 90’s.

So I was delighted to discover I could go build an email template exactly the same way we built web pages last century.

The one thing that has changed is the number of email clients out there – there’s a bunch of them, and they all interpret email HTML and styling a liiiiitle differently.

Anyway, while I was searching around to see what’s new in the email world, I found a bunch of useful resources, and I thought I’d better share them right here.

Many of them helped me get back up to speed turning a design into a responsive template.

I’ve split them up to make it easier to find what you’re looking for. You can use the links below to jump to a section:

  1. Beginner guides to making responsive HTML emails

  2. Pre-made responsive HTML templates you can modify

  3. Frameworks for building emails with minimal HTML

  4. Tools to help you make build HTML email templates

Let’s get started!

Resources for Responsive HTML Emails

Beginner guides to making responsive HTML emails

This is the method I trust most for creating HTML emails, especially if you need to produce a pixel-perfect execution of design.

It’ll take longer at first, but building the email template by hand gives you the knowledge, control and flexibility to produce flawless implementations that don’t rely on the ongoing support of third party tools or frameworks (which we’ll get to later).

How to: Code a Responsive Email from Scratch

This is a tutorial from Litmus, who are in the the business of providing an email testing service that shows how your email looks in just about every email client known to human-kind.

So they have a vested interest in more people making more email templates :).

As you’d expect from professionals in the business, this is a very comprehensive tutorial, but it does assume you have a decent understanding of HTML tables and styling.

How to Code HTML Email Newsletters

Good old SitePoint have been providing tech tutorials since forever, and this another solid effort from them on building HTML emails.

This article doesn’t provide an extended example of building an email (as most of the other articles in this section do), but it does provide an excellent and indispensable overview of how HTML emails work, why they work that way, and what the best practices are.

Creating a Simple Responsive HTML Email

This a solid but gentle introduction from Tuts+ on building HTML email templates. They start off with a blank outline and build it up into a responsive design.

Even though the article is quite old (2013), it has some great tricks for dealing with specific mail clients.

Build an HTML Email Template From Scratch

Bizarrely, another one from Tuts+ by the same author! But this time she takes a different approach to building up an HTML email and demonstrates creating a multi-column email.

It’s worth checking out both articles.

An Introduction To Building And Sending HTML Email For Web Developers

The great grandaddy of all web tutorial sites, Smashing Magazine have done a great overview of email best practices and how to build them.

This is an article ‘For Web Developers’ but anyone will be able to use it to get an idea of what’s important and how to handle particular cases like buttons, testing for different clients, and managing font-stacks.

MailChimp Email Developer’s Guide

This is MailChimps comprehensive developers guide on building responsive HTML emails.

Since it’s a MailChimp guide, you’ll see information presented from the MailChimp point of view.

Nonetheless, once you’ve got the basics down, this is an excellent resource to refer back to over time.

Pre-made responsive HTML templates you can modify

Having a library of responsive templates at hand is great when you want to get started fast by modifying something you already works. This is what you’ll probably end up doing with your own templates after you’ve built a few anyway.

30 Free Responsive Email and Newsletter Templates

So now this article entered the realm of meta-list, since this article from SpeckyBoy is itself a list of HTML email templates.

At any rate, the article links to a number of places you can find templates that are free to use.

Five pre-tested templates that work with any mailing service

Litmus – famed email testers – have provided 5 thoroughly tested HTML email templates for you to use.

Knowing that they’ve been tested by the gold standard of email testers is very comforting, and the templates look good as well.

You will have to provide your email address to get your hands on them though.

Top 25 Free Mobile Friendly & Responsive HTML Email Templates 2017

This is another list, this time from Colorlib who have found a number of email templates, frameworks and build tools to help you craft your own responsive emails.

Cerberus: Simple, but solid patterns for responsive HTML emails. Even in Outlook and Gmail.

While most of the resources I’m linking to here provide completed email designs that can be adapted to your needs, the templates from Cerberus have been made with the intention of being extended to your needs.

Gmail and Outlook have the worst reputation for ‘consisteny’ among email clients, so it’s great to know that these templates work well with them.

Really Simple Responsive HTML Email Template

This incredibly simple email template from Lee Munroe is a great place to get started with HTML emails.

The template is very clearly written with great comments throughout. He provides versions with inlined CSS and without.

900+ Free Responsive Email Templates to Help You Start with Email Design

Yes. 900+ HTML email templates. I’m taking their word for it – I didn’t count them!

https://github.com/charlesmudy/Responsive-HTML-Email-Template

Another simple and responsive email template, this time from Charles Mudy. Although quite simple, it features a two-column layout.

Free Responsive Email Template From Email on Acid

Email on Acid are the other big mover in the email testing world, and they’ve provided one, very elaborate responsive email template that that you can download an modify (in exchange for joining their email list).

Once again, the great news here is that it’s coming from Email on Acid, you know that the template has been comprehensively tested.

Free Psd/html Responsive Email Template

This is a stylish, multi-column email template provided with the original Photoshop files, HTML and CSS.

The author, Marcos Lopes, has tested the template on Litmus so we can feel comfortable about using it for our own designs.

45 free responsive email templates from professional designers

99Designs have bundled up 45 responsive email templates that you can get your hands on by providing your email.

Responsive HTML Email Templates

This is the only paid template bundle I’m featuring. It’s from Lee Munroe, whose free and simple template I mentioned earlier in this section.

The templates (as you’d hope if you’re paying for them) are a step up from the free offerings, and of course have been thoroughly tested. Lee also provides support for bugs via issues on his Github page.

Frameworks for building responsive emails with minimal HTML

In this section I look at frameworks that take a lot of the work out of writing HTML and CSS by hand, but still give you the control of hand-written code.

Foundation for Emails 2

This is the email framework from Zurb, and was previously known as Ink (which you’ll see reference to in some of the older articles featured here).

Zurb provides HTML outlines for the email templates, and a CSS framework (think Bootstrap) for styling columns, headers, footers etc.

They also provide a web tool for inlining the CSS so that it’s applied to individual elements in the email (this avoid the problem of Gmail stripping style sections from emails.

How to create great-looking responsive HTML emails

And if you’re feeling lost by Zurb’s offering, here’s an article from CreativeBloq on how to use it (it’s from August 2016, and they’re still referring to it as Ink).

Nonetheless, this is a great way to get a handle on building emails with Zurb’s framework.

Build responsive email templates confidently with Email Framework

Yes, this HTML email framework is called Email Framework.

Whatever you think of the name, its a useful collection of HTML chucks you can use to build up portions of an HTML email. Quite minimal but still very useful.

MJML: The only framework that makes responsive email easy

MKML is a framework that defines it’s own language for building responsive HTML emails. This can seem a little disconcerting at first, but the code is certainly clean and sparse.

As you’d expect for an entirely new way of defining email structure, they provide comprehensive tutorials to get you started.

Tools to help you make build HTML email templates

The following links refer to tools that will help you build your emails, including drag and drop interfaces and online CSS inlining utilities.

MailChimp

MailChimp, being an email service provider, are in the business of making you happy about the emails you send with them.

So they’ve created a great tool for building emails that requires no coding at all, and lots and lots of templates to get you started.

Even if you don’t use MailChimp, you can sign up for a free account, use the email builder and then export the code it generates.

This way you’re free to use your email template however you like.

The MailChimp CSS Inliner

The CSS inliner, also provided by MailChimp, takes your well-formed CSS defined in a <style> block, and applies the style rules to the style attribute of all elements in your email.

This is done so that we don’t have to worry about some email clients, like Gmail, removing all style blocks from your template, no matter where they appear.

CampaignMonitor free email template builder

CampaignMonitor, another email service provider, also provides a drag n drop email template builder.

This time you won’t even need to sign up to use it – just design your email, preview it, and then export it (the export screen makes it look like you have to sign up, but you don’t. Just click the tiny ‘or, Download as HTML & CSS’ at the bottom of the signup form).

Free drag & drop email template builder: Mosaico

Mosaico is a free and open source tool for building email templates.

It’s been extensively tested and is under active development, so it’s a great option for building your HTML emails.

Ready to press send?

While I’m impressed by the drag & drop email builders, and the frameworks as well, I still rely on building emails with HTML and CSS.

That’s because third-party dependencies require support over time.

Sometimes a project’s author will find something else to do, or the tool may be overtaken by new technology (even email!).

That’s why next time I have to make a design into an email template, I’ll be turning to HTML and CSS.

To get up and running quickly, adapting existing templates is a great compromise – you’re not relying on an external tool to produce your email, but you can still start with something that’s been proven to work in lots of clients.

Have these resources been useful for you? Do you have any to add? Let me know in the comments below.

By


Leave a Reply

Your email address will not be published. Required fields are marked *