Yesterday we did an email design based on best practices, but the html markup and the way the css is defined, is far from perfect. In fact, it probably won’t look right in the majority of email clients. There are a lot of things to keep in mind when building html emails. That's why, in today's episode, we're going to do a walk through the best practices for building a responsive email template.

One of the tricky things about email development is that you're constantly fighting with yourself. This is because some of the best practices for email are completely opposite to the best practices for browsers.

Some examples: using tables to build layouts, using !important when applying css, and using inline css, just to name a few. Of course, there's a reason why, and that's because there are over 90 email clients, each with their own CSS support. To ensure our message looks good, we have to take into consideration the most commonly supported features.

Tables are still the most reliable way to make a consistent layout; in addition to being supported by all email clients, tables also allow us to emulate the float property using the align attributes. The support for @media queries is not perfect, which means !importantis an incredibly useful property to override styles in responsive designs. Even though embedded styles are widely supported, some Gmail and other minor clients still dont support embedded styles, which means that inline style is still the most reliable way to achieve a consistent look for all users. Another important thing to keep in mind is our approach for the HTML markup; there are typically two approaches: Fluid and Responsive. Let's see the differences between them. ![image alt text]( The responsive approach basically involves using a container (normally a table) with awidthof 100%, without any extra space (like padding or margin). Inside this container, you can define blocks and control the size of them using media queries. It is important to keep in mind that media queries are not fully supported by email clients, so it's better to use a fluid technique, if you want your email to look good in most apps. But if you're only targeting specific users, then the responsive approach may be fine for you. In the previous paragraph, notice that I said app, not device or platform. That's because the CSS support works in an app-to-app basis. That means, we can have two identical iPhones, but if we use different apps to open the same email, and one of the apps doesn't have support for some property we used, it'll look different. ![image alt text]( The fluid approach basically involves using a container with awidthof 100%, without any extra space (padding, margin), and then using blocks inside of it, with somemax-widthdefined. The problem with this technique is that some versions of Outlook don't supportmax-width, A work-around for this is to use tables wrapped in MSO conditionals, normally referred as "ghost tables," to only appear in Outlook. By using this approach, we can have layouts that will look good in all or almost all email clients. If your target audience may be using a wide variety of email clients, this is the way to go. We're going to build our template using the responsive approach, but we’ll also see the fluid technique later on. Ok, so let's start building our design from scratch; ``` html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--[if !mso]><!--> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--<![endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Wild News</title> <style> @media screen and (min-width: 600px) { } </style> </head> <body> </body> </html> ``` Ok, we left our media queries defined. Let's do the basic body ```html <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <!-- Main Container --> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <!-- Preheader Text --> <td align="center"> </td> </tr> </table> </td> </tr> </table> ``` Let's break down this code; as I said before, tables are your friends. First we use table with border, cellspacing and cellpadding set to 0 to avoid any unwanted spaces. Also, we set the width to 100% to have a full width body container. In the first cell, we use the align attribute to center our main container, which is basically a nested table, exactly like the one we just did. Now that we have our basic markup, let's add our preheader text and our header. ``` html <table border="0" cellpadding="0" cellspacing="0" width="100%" class="main-container"> <tr> <td align="center"> <!-- Email Container --> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <!-- Preheader Text --> <td align="center" class="preheader"> Turtles born / Masive crab migration </td> <!-- Header --> <td align="center" class="background"> <h1> Logo</h1> <h2>Brand Name</h2> </td> </tr> </table> </td> </tr> </table> ``` Ok, let's go part by part: First we add amain-containerclass to our table container. After that, we add a class for our preheader text, just to hide it. The preheader text is important, since it allows the user to know what the content of the email should contain. Finally, we add a cell for our header with the classbackgroundand align its content to center. Now, let's add the css style: ```css .main-container { font-family: sans-serif; } .preheader { display: none; } .background { background-color: #4D3E39; color: white; padding: 25px 0; width: 100%; } ``` Using the.main-containerclass, we set thefont-familyto sans serif for the content. This is important; the support for properties such as@font-faceis limited, so it's a good practice to use a regular font like Verdana, Arial or Sans Serif. Also, don't overuse fonts: one is enough, or two if you want to highlight titles. Depending on the circumstances, you can add a 3rd font for some little things, but in most cases, having more than two fonts will make your email lose consistency and look less professional. So now we have our header ready, but there's a little problem: see this white space? Let's get rid of it. ```html <body border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0;"> ``` This looks better; now let’s add the news columns. We're going to use tables for each new column. ```html <tr> ... <!-- Header --> <td align="center" class="background"> <h1> Logo</h1> <h1>News Brand Name</h1> </td> </tr> <!-- Content Layout--> <tr> <!-- Responsive tables --> <td> <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" class="content-container"> <tr> <td align="center"> <h3 class="content-title">Turtles Born</h3> <p class="normal-text">Turtles born without problems in the island of</p> <a href="link-to-news" class="button">See news</a> </td> </tr> </table> </td> ``` We basically copy one of the tables and add the class 'content-container' to it and we create a centered cell. Then we add a title, the content text, and a link to see the news with the classbutton. Notice that we addedalign="left"to the table; with this property we're going to simulate "floating elements." Also, notice iI comment every section of the email. This is also a good practice; normally the email templates have a nested tables and things can get confusing, which is why having clear and direct comments in the template is a good idea. let's add the CSS for the content and the button: ```css .content-container { padding: 0 15px; } .content-container td { padding: 15px; border-bottom: 1px solid #8E6D4C; } .content-title { font-family: georgia, sans-serif; font-style: italic; } .normal-text { text-align: left; } .button { background-color: #dd9527; border-radius: 8px; color: #ffffff; display: block; font-size: 18px; font-weight: bold; line-height: 40px; text-decoration: none; text-transform: uppercase; width: 80%; } ``` We add abackground-colorto the email container, then we set padding in thecontent-containertable and define a border in the cell, which is using align center, so our content will be centered, withouttext-align. After that, we set the title to Georgia (another regular font), and change the font-style to italic; this way we'll differentiate titles from regular text. Lastly, we align the text to the left. For the button we set a background and font color, and convert the link to a block, with the display property. Notice that we're centering the text withline-height, which works better than padding for links. Also, notice that we define the button like this:table a[href].button. That’s because Gmail has the links tag under that specificity and we have to override it to apply font styles. Now let's add the social media section: ```html <!-- Social Media --> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" width="100%" style="font-style: italic;"> <p style=”display: inline-block;”>Join us</p> <a class=”social-icon” href="facebook"><img src="" alt="facebook" /></a> <a class=”social-icon” href="twitter"><img src="" alt="twitter" /></a> <a class=”social-icon” href="isntagram"><img src="" alt="isntagram" /></a> </td> </tr> </table> </td> </tr> ``` ```css .social-icon { display: inline-block; vertical-align: middle; } ``` This is basically the same table we have been using, with links and images for the icons. Notice that we use absolute paths here; when testing there's no problem using locals, but in production we must use absolute addresses. Finally, it's time to do our footer: ```html <!-- Footer --> <tr> <td align="center" class="background"> <a href="#">Privacy Policy</a> <a href="#">Unsubscribe</a> <p> You can unsubscribe from our mailing list by clicking "Unsubscribe" above. If you have any questions, feel free to contact us by email at or call at 0800-your-number. </p> <p>&#169;2018 Your Organization. All rights reserved.</p> </td> </tr> ``` ```css .background a { color: #DED6BF; text-transform: uppercase; } table .background a[href] { color: #DED6BF; text-transform: uppercase; } .background p { color: #DED6BF; font-size: 12px; width: 90%; } ``` Basically, we clone the classbackground, and give styles to the content inside of it. One important thing to notice is that we use©code instead of©`. It’s a good practice to encode special characters because if your ESP uses a different kind of encoding from the one you selected for your email, some special characters can look incorrect on the user end. Now we have our email ready for mobile devices; I personally prefer to use a mobile first approach, so I do the style for the mobile, and then apply the modifications for desktop. Let's do that to make our email template completely responsive: css @media screen and (min-width: 600px) { .main-container { width: 600px !important; } .content-container { width: 49% !important; } } With this we have created a two column layout for our news, but we have a problem: they're not aligned properly. To fix that, we add a fixed height to our class: css .content-container td { border-bottom: 1px solid #8E6D4C; height: 200px; padding: 15px; } And with that we have finished our email! Let's see how it looks in Gmail and Outlook. Normally you'd want to send the email to yourself or use testing tools, but in this case, just for quick purposes, we can do this. Let's open a message and get rid of this html, and then we copy our html and paste it right here and boom, that’s our email template, nice! This is how it looks on Gmail: image alt text And this is how it looks on Outlook: image alt text Summary We covered a lot in today’s episode, mainly focussing on an overview of the best practices when building emails and did a responsive email template. See you next time!

Alexander Pulido

System Engineer with 5 years of experience in software development, Alex is passionate about programming and Computer Science and thinks that the proccess where the code transform into a great app is something fascinating. When Alex is not coding, he's practicing mma, playing drums or cooking.

  1. Comments for Building a Responsive Email

You must login to comment

You May Also Like