Click for tutorial on responsive html email design

Responsive HTML email: 9-step in-depth walkthrough from scratch

How to build a responsive, modular email template that looks great in today’s most popular email clients.

Visiting from the Responsive Design Weekly newsletter?

Download the full responsive HTML email starter template

About your Inbox

Each morning your inbox gets hit with a variety of emails from your favorite brands and retailers featuring new offers, promotions, deals and bargains. These emails typically use colorful images of products with low price call-outs to further entice shoppers to click through the email to that respective company’s website and ultimately buy something.

These emails are written in HTML, the same mark-up language used throughout the world wide web to display websites. However, most designers make an effort to avoid ever building HTML emails for the pure difficulty of achieving near-perfect consistency across the nearly hundreds of different email client/operating system combinations available in today’s digital market.

I am brand new to the HTML email world. Over the past three or four months, I read or skimmed the incredibly helpful guides, walkthroughs, and reference material made available by industry leaders like Campaign Monitor, Mailchimp, Litmus, and countless others who, just like I do now, want to help those interested build more user-friendly, accessible HTML emails.

Start here to learn more about HTML Email

I just built my first responsive HTML email. I’d like to share with you the tools and process that helped me build it. Hopefully it will help push you to build your own HTML email one day, one that your customers will thank you for with their time and money.

Important Reading Materials

I have each of the following websites bookmarked in a folder called ‘HTML Email’, and you probably should too.

What’s the big deal with HTML Email?

The big deal (for designers, at least) is that given the huge allotment of email clients available on a myriad of desktop and mobile devices, the only way to build an email template that looks fairly consistent in all clients, designers must use tables, hacks, and other black magic left over from the late 1990s.

In shorter words: it’s not fun.

Responsive? What’s that and why should I care?

The upside to all of this ‘tables’ and ‘1990s’ speak is that designers can still actually implement brand spankin’ new responsive web design practices in HTML emails, and with surprisingly consistent support.

These techniques include fluid grids, fluid images, and media queries; all of which help guarantee the email adapts to various screen sizes like phones, tablets and desktop monitors.

Why should you care? Because 0% of your users enjoy pinching and zooming into and out of a set-width email that is too big for their phones. Using responsive web design techniques in your HTML email can help ensure that there’s no need to zoom in or think. Instead, your  users will just have to read and click through.

Remember legos? Good, that will help a lot

In my opinion, the best boilerplate templates are highly adaptable, flexible, and even modular. By this I mean that larger sections can be moved at the designer’s free will without breaking any core functionality. Basically, the template is a giant set of legos that you as the designer can freely connect and detach to build different formations.

It is with this mentality that I built my first HTML email. It allows for easy expansion and modification at any point later on.

The True Test: How will it break?

You should always test your designs as you go along, never at the end. Is this what I did? Sadly, no. I built the whole thing out, optimized, and then waited until afterwards for the grand finale (and mini heart attack) of ‘OMG where is it going to break?’

Well, in surprisingly wonderful news, nothing major broke. By sticking to a 1-column design, using nested tables, bulletproof buttons, and expanded CSS styles, the email looked consistent across the major email clients:

  • Outlook on PC
  • Yahoo! Mail
  • Aol.com
  • Outlook.com
  • Apple Mail
  • Gmail web client, iOS and Android mobile apps
  • Native Android Email

What happens when the images go away?

Perhaps you are familiar with this phenomenon. In certain email clients, images are turned off by default for security purposes. The user must click on a button to ‘Display Images’ in order to see them, or click on a link within the email to ‘View in browser’.

Screenshot of email with images turned off
Example of an email newsletter with images turned off or disabled by default

For the potentially millions of people who don’t know this button exists, or simply prefer not to show images (perhaps due to limited available data or slow bandwidth), your email should still be rich in text content to ensure your readers get the message, albeit less visually appealing.

Unfortunately, many emails today are still built almost entirely in images since it is easier for most designers to build something in Photoshop, slice it, and output tables. But hopefully you are here because that’s not good enough for you or your customers. Amen to that!

The 9-step guide

In the nine steps that follow, I will walk you through the template that I stitched together, piece by piece, from the recourses mentioned above. I assume you have enough knowledge of HTML and CSS, specifically with building and styling tables.

Setting up our document

Each HTML document should have at least three parts:

  • Doctype: To specify exactly what type of document it is, be it HTML 4.0, XHTML Strict, or HTML5, etc.
  • Head: This is where you place important meta data about your document; stuff your users won’t see, but email clients will
  • Body: This is where the content goes

Below is the code establishing the foundation for our HTML document.

To quickly recap what you see above: The Doctype used is XHTML 1.0 Strict. In our head there are three meta tags:

  • The first one says that this is an HTML document that uses the utf-8 character set.
  • The second one makes mobile devices correctly scale our content for smaller screens.
  • The third one prevents most mobile devices from turning links to phone numbers blue. This can help for instance if we have a phone number placed over a blue, or dark, background.

Adding the outer tables

With our document’s structure in place, we are ready to start building the main table. That is, the table that will be used as a body-double (literally). Many email clients will remove the body tag from your email, so we must place everything inside a table that is set to 100% of the width of the viewport. Annoying: yes. Necessary: sadly, yes.

This table, like nearly all other tables going forward, has several attributes:

  • Border: Set this to 0 unless you want each row and cell of your email to have a 1 pixel black border. Sometimes setting this to 1 during development can help you find areas where margins or padding are not consistent. Just make sure to set it back to 0 for production.
  • Cellpadding: This adds space inside each cell in your table. It is widely recognized by email clients, so feel free to use it often. It is more common to want space above and below an element than to the left and right. Sadly, this attribute adds padding equally to all sides.
  • Cellspacing: This adds space around or outside each cell in your table. Again, could be handy depending on the context.
  • Width: For this outer table, the width is 100%. In working responsively, most of our nested tables (I’ll get to those in a moment) will also have width’s of 100%. It will be elsewhere that I specify only once the maximum width for the tables. That way, if I ever need to come back and change that value, I just have to do it in one place, and not to each table (imagine the headache!).
  • ID: This table has an ID of ‘bodyTable’. I don’t think I ever used that as a CSS selector, but it is there in case you want to set a background color or just go nuts with.

Building the main, repeating table

Document structure in place: check. Table acting as our body-double with 100% width: check. Now it is time to start implementing our new modular nested table structure. Sounds complex, I know. But hopefully it will all make sense in a moment. As usual, first comes the code, then the breakdown.

Here is what’s going on up there:

  • Inside of our existing table, we are placing one new row.
  • This is what I’m calling a Content Block Wrapper Row (hence the comment above the row’s opening tag and below the closing tag)
  • Inside this row is new table cell, with a few attributes: it is horizontally aligned to the center, and vertically aligned to the top. It also has a class of ‘bodyCell’ so that we can style it later

So far, we are down one level of the outer-most table. We are inside of a cell within a row. But next, we have the first nested table. Going by Inception logic, we are now going into the dream within the dream.

  • The breadcrumb thus far is:
    Body > Table 1 > Row 1 > Cell 1 > Table 2
  • This table has the normal attributes
  • It also has a class of ‘containerTable’ since it will serve as one of the many tables that contain the main content of our email.
  • Inside this table we are repeating what we did above: adding a new row, then a new cell.
  • This inner-most cell thus far has a class of ‘containerCell’
  • To recap once more, the breadcrumbs are:
    Body > Table 1 > Row 1 > Cell 1 > Table 2 > Row 2 > Cell 2

Where all the fun stuff happens

We are now two levels deep into our Inception of tables. I hope you are not lost yet because we are about to go one level deeper. Get ready to go for a spin:

Starting with our ‘containerCell’, let’s walk our way down the rabbit hole:

 <!--[if (gte mso 9)|(IE)]> ... <![endif]-->

Eeek! Already a minor road block. What in the world does all that mean? Well, it reads like this:

Dear email client, if you are reading this and you are Microsoft Outlook, and your version number is greater than or equal to nine, or if you are any version of Internet Explorer, then do exactly as I say. That is, until you come to the end of this statement.

The code inside this ‘if’ statement therefore will only be read by Outlook or Internet explorer. Those email clients aren’t very cooperative to our responsive habits, so we need to give them a firm width to display at. That width: 540 pixels.

So, all that the code inside the ‘if’ statement does is further nest our content within a 540 pixel wide table. But since that is only for Microsoft, we won’t consider it our 3rd level…yet!

Down to the 3rd level of tables

Now let’s go down another level. I know, the suspense was eating away at you, wasn’t it? This table, as the class name implies, is at long last our main content table. Inside of it we have a new row, and finally, a new table cell that is our main content cell. We have arrived at the place where our content goes. It only took us (count aloud with me) three tables (four if you count Microsoft’s invisible table), two meta tags, and a partridge in a pair tree (sorry, couldn’t help it).

Bulletproof buttons

When it comes to your call to actions, you have two general approaches:

  • Text-based button
  • Image-based button

Images give you more creative freedom and control, however, many email clients still prevent images from loading by default, so you risk showing the customer a giant question mark instead of a beautifully designed reason to ‘CLICK HERE’.

Text will show no matter what, but dealing with how different email clients render your styled text can be a pain. Luckily, there’s a tool that helps you easily make buttons that work in just about every email client: Bulletproof email buttons from Stig at Campaign Monitor

Screenshot of email button design website
Options available for customizing your own bulletproof buttons

Here are the options you can control:

  • Button text
  • A background image and color
  • Text color
  • Button width and height
  • Border color and radius
  • URL that the button goes to when clicked

When you are finished and the preview looks right, just click inside the yellow box with code, copy it, and paste it into your new HTML email template. If you want to further customize the code, feel free to. Just make sure you are comfortable doing so, as one wrong move could have a severe impact on your entire document (i.e. not closing parenthesis or quotation marks properly).

Social buttons

Nearly every email you get today offers some way for you to share it with friends and family through the popular social media channels like Facebook, Twitter, Youtube and Pinterest. Most designs just use images to show the logos of these social media platforms, which as I mentioned earlier may not show up in several email clients.

By combining bulletproof buttons with images, we can create a progressively enhanced experience. Users without images still see a large block of color from the respective social media’s brand with text that describes an action (i.e. Like for facebook, Follow for twitter, etc.). Users with images get a image of the social media platform’s logo. Both options are shown below:

Four different colored buttons with text
Social media buttons when images are turned off
Four different colored buttons with images inside
Social media buttons with images turned on

Each button is one of four cells inside of a table row. The cells each have a width of 25% (for a combined 100% width). I used the Bulletproof button generator referenced earlier to generate the initial code. The only thing added is an image nested inside of the a tag with an ‘alt’ attribute to define the fallback text.

All of the styles

With the email’s structure in place, it is now time to shift focus to the other half of the puzzle: presentation. This is where email clients become a hot mess of problems. Support for different selectors, properties and values is all over the place. On top of that, some email clients even add their own CSS into the mix, changing things about your email you didn’t even realize could be changed.

The styles come in three parts:

  • Reset styles: these help level the playing field across the email client landscape. Specific items include zeroing out margins and padding, establishing 100% width and height, and making certain elements block-level instead of inline.
  • Client-specific styles: more declarations that help fix type-size, width and padding issues in select Microsoft, iOS and Yahoo! email clients
  • Media query: this fix is specifically for iOS devices to help ensure that our content is only 540 pixels wide

Here’s what all of this looks like:

Inlining styles with Premailer

Another sad truth about email clients is some of them will strip out the head of your document, thereby removing any styles you declared inside. This gives us two options:

  • Move all styles inline by hand, as you code your email template, or
  • Keep all of your styles in the head and use specialized tools to transfer them to the corresponding elements once you are ready to send out your email

The first sounds tedious and, given the tools mentioned in that second bullet point, kind of pointless.

Enter: Premailer, Pre-flight for HTML email.

Screenshot of online CSS email tool
Premailer makes it easy to automatically transfer all CSS styles inline

As mentioned on Premailer’s website, similar tools are available in the Campaign Monitor service, and also within Mailchimp’s service. So if you use either of those, then please take advantage of their CSS inlining tools so you can write more maintainable documents.

Testing, and testing some more

It all comes down to this. All our hard work put to the ultimate test: the Email Test Send. How will it look? Will it look the same in all email clients? At least in the most popular ones? Where will it break? Will it be easy to fix whatever issues arise? All of these questions and more may come up as you perfect your own email template.

There are several ways you can test how your email looks:

Do it yourself

Open up new accounts with Yahoo!, AOL, Outlook and Gmail. Then open an account with an email marketing service like Mailchimp or Campaign Monitor. Each service allows you to create email campaigns using pre-made templates, or with your own code pasted in. So, paste in your code, and send a Test Email to each of your new accounts. View these emails on your desktop, laptop, tablets and smartphones. View them through a browser and through native and 3rd party applications.

Use a specialized tool, like Litmus

Litmus is a web application that provides screenshots of your email in over 30 clients across several operating systems and and different browsers. It’s easy to use, and offers incredibly helpful data that can help you further bulletproof your emails.

Preview of email testing tool
Litmus is the go-to online web application that helps you test your email design in over 30 clients

Final words

If this post has proved anything, I hope it’s that HTML email, while intimidating, can still be a delight to design for. That is, as long as you start with the right code- and knowledge-base, test often, and remember to accommodate for the myriad of ways your email can be seen by your customers.

The full HTML document that you can start working from today is available at the link below. I encourage you to use it in your projects and tweak it to your heart’s content. All I ask is you come back here and share your thoughts, any bugs, or just your story.

Download the full responsive HTML email starter template

If you enjoyed this tutorial, check out this other tutorial on responsive HTML email design from Web Designer Depot.

Published by

Robert

Interactive multimedia designer, content strategist and front-end web developer dedicated to building fully-responsive, highly accessible, cross-platform web applications and engaging marketing materials for specialized clients.

9 thoughts on “Responsive HTML email: 9-step in-depth walkthrough from scratch”

  1. Hey, Robert.
    Really great article, I understood better what’s up with the email. as I can see there are many inconsistencies between email clients. I wonder if I am going to see the day when there will be peace.

    Anyway, a lot to learn from your article. Great job!

    1. Thanks for reading, Vlad. There may never be full standards-compliancy or support across all email clients and rendering engines, but what I did learn through the myriad resources referred to here is that a responsive solution is possible.

  2. There is no code in the code blocks for: “Adding the outer tables” and “Building the main, repeating table”

  3. This is really helpful and exactly what I was looking for. I have been looking for a nicely done post about responsive email design /coding for sometime now and really happy that you took the time to list it all up in this post. Thanks Robert! Great work.

  4. So I downloaded your template.
    copy/paste into outlook email and sent it to my self.
    all I get is the raw html in the email.
    what am i missing to make the html render to a proper email?

    1. Hi Michael,

      Thank you for downloading my template. HTML code like this must first be parsed by some sort of message transfer agent, and then the resulting code is sent to the recipient’s inbox, all pretty and such.

      Email service providers like Mailchimp, Constant Contact and Campaign Monitor are some examples of tools that small businesses use to send responsive HTML emails to their customers. If you just want to send a professionally designed email to a friend or colleague, follow the four steps listed in this article: http://www.programmerinterview.com/index.php/general-miscellaneous/how-to-send-an-html-email-from-gmail/

      Hope that helps!

Leave a Reply

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