How to Create a Responsive Email Template

  •  14 Comments

Reading emails has never been easy on phones and tablets. Just like modern websites, email newsletter design needs to be optimized for different viewports.

Imagine having a non-responsive email newsletter design. It might look good on desktop devices; however, checking it on small screens will look awful with each element misaligned and broken columns. According to EmailMonday, 91 percent of consumers are checking email on mobile devices on a regular basis. This is one of the reasons why you should consider optimizing your email template.

How do you optimize your email newsletter design? While you might think of using the modern way of coding an HTML template using div and external CSS, some email clients such as Outlook and Yahoo Mail use a different approach.

While the support for HTML5 and CSS3 is limited on email design, the best way to create a responsive email template is by taking the old way of creating layouts — using tables, internal CSS, inline CSS and media queries.

Do All Email Clients Supports Media Queries?

Although most email clients support media queries, there are still some like the Gmail Android App that have limited support. Good thing we can still add percentages to tables and other HTML elements to create a smooth responsive layout on different viewports.

To show you how you can apply all of this information, I am going to show you how you can create a responsive email template using tables, inline and external CSS with the help of media queries. Let’s get started.

Note: I’ve already created a mock-up design in Photoshop for our email template design.

Email Template

What We Need..

  • Raleway and Lato Google Font
  • Sliced Images and Icons
  • Knowledge about HTML and CSS
  • Knowledge about media queries

Final Output

Our email newsletter design will have a modern flat design. Here’s what it looks like.

Getting Started

Before we begin, we must put some elements in our header section. First, we will add an XHTML doctype followed by the html tag with xmlns attribute to specify the xml namespace for our document. The rest are meta information and the title tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no"/>
  <title>KATAUSTRIA - Email Template</title>
</head>

Markup

For our markup, we will start fresh with tables and start adding some attributes on our table. This will contain the following elements:

  • Header/Banner
  • 3 Box Showcase
  • Awesome Title Section
  • What We Do Section
  • Ready for new project section
  • Pricing table
  • Footer
<body yahoo="fix">
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- START HEADER/BANNER -->
        <tr>
            <td align="center">
            </td>
        </tr>
<!-- END HEADER/BANNER -->
<!-- START 3 BOX SHOWCASE -->
        <tr>
            <td align="center">
            </td>
        </tr>
        <tr>
            <td align="center">
            </td>
        </tr>
<!-- END 3 BOX SHOWCASE -->
<!-- START AWESOME TITLE -->
        <tr>
            <td align="center">
            </td>
        </tr>
<!-- END AWESOME TITLE -->
<!-- START WHAT WE DO -->
        <tr>
            <td align="center">
            </td>
        </tr>
<!-- END WHAT WE DO -->
<!-- START READY FOR NEW PROJECT -->
        <tr>
            <td align="center">
            </td>
        </tr>
<!-- END READY FOR NEW PROJECT -->
<!-- START PRICING TABLE -->
        <tr>
            <td align="center">
            </td>
        </tr>
<!-- END PRICING TABLE -->
<!-- START FOOTER -->
        <tr>
            <td align="center">
            </td>
        </tr>
<!-- END FOOTER -->
    </table>
</body>
</html>

Banner and 3 Box Showcase Section

For these two sections, we will wrap each section with col-600 class to set up a width for this two later on our CSS. We will add a nice banner along with our logo and text. For our three-box showcase we will use col3 and give it a width of 183. Notice that I am using height on <td> tag to give some space.

<!-- START HEADER/BANNER -->
        <tr>
            <td align="center">
            <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td align="center" valign="top" background="images/header-background.jpg" bgcolor="#66809b" style="background-size:cover; background-position:top;height="400"">
            <table class="col-600" width="600" height="400" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td height="40"></td>
        </tr>
        <tr>
            <td align="center" style="line-height: 0px;"><img style="display:block; line-height:0px; font-size:0px; border:0px;" src="images/logo.png" width="109" height="103" alt="logo" />
            </td>
        </tr>
        <tr>
            <td align="center" style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:24px; font-weight: bold; letter-spacing: 7px;">EMAIL <span style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:39px; font-weight: 300; letter-spacing: 7px;">TEMPLATE</span>
            </td>
        </tr>
        <tr>
            <td align="center" style="font-family: 'Lato', sans-serif; font-size:15px; color:#ffffff; line-height:24px; font-weight: 300;">A creative email template for your email campaigns, promotions <br/>and products across different email platforms.
            </td>
        </tr>
        <tr>
            <td height="50"></td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
<!-- END HEADER/BANNER -->
<!-- START 3 BOX SHOWCASE -->
        <tr>
            <td align="center">
            <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-left:20px; margin-right:20px; border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;">
        <tr>
            <td height="35"></td>
        </tr>
        <tr>
            <td align="center" style="font-family: 'Raleway', sans-serif; font-size:22px; font-weight: bold; color:#2a3a4b;">A creative way to showcase your content</td>
        </tr>
        <tr>
            <td height="10"></td>
        </tr>
        <tr>
            <td align="center" style="font-family: 'Lato', sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;">Prepare some  flat icons of your choice. You can place your content below.<br/>Make sure it's awesome.
            </td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td align="center">
            <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9; ">
        <tr>
            <td height="10"></td>
        </tr>
        <tr>
            <td>
            <table class="col3"  width="183" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
            <td height="30"></td>
        </tr>
        <tr>
            <td align="center">
            <table class="insider" width="133" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr align="center" style="line-height:0px;">
            <td>
            <img style="display:block; line-height:0px; font-size:0px; border:0px;" src="images/icon-about.png" width="69" height="78" alt="icon" />
            </td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr align="center">
            <td style="font-family: 'Raleway', Arial, sans-serif; font-size:20px; color:#2b3c4d; line-height:24px; font-weight: bold;">About Us</td>
        </tr>
        <tr>
            <td height="10"></td>
        </tr>
        <tr align="center">
            <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;">Place some cool text here.</td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td height="30" ></td>
        </tr>
            </table>
            <table width="1" height="20" border="0" cellpadding="0" cellspacing="0" align="left" >
        <tr>
            <td height="20" style="font-size: 0;line-height: 0;border-collapse: collapse;">
            <p style="padding-left: 24px;">&nbsp;</p>
            </td>
        </tr>
            </table>
            <table class="col3"  width="183" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
            <td height="30"></td>
        </tr>
        <tr>
            <td align="center">
            <table class="insider" width="133" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr align="center" style="line-height:0px;">
            <td>
            <img style="display:block; line-height:0px; font-size:0px; border:0px;" src="images/icon-team.png" width="69" height="78" alt="icon" />
            </td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr align="center">
            <td style="font-family: 'Raleway', sans-serif; font-size:20px; color:#2b3c4d; line-height:24px; font-weight: bold;">Our Team</td>
        </tr>
        <tr>
            <td height="10"></td>
        </tr>
        <tr align="center">
            <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;">Place some cool text here.</td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td height="30"></td>
        </tr>
            </table>
            <table width="1" height="20" border="0" cellpadding="0" cellspacing="0" align="left">
        <tr>
            <td height="20" style="font-size: 0;line-height: 0;border-collapse: collapse;">
            <p style="padding-left: 24px;">&nbsp;</p>
            </td>
        </tr>
            </table>
            <table class="col3" width="183" border="0" align="right" cellpadding="0" cellspacing="0">
        <tr>
            <td height="30"></td>
        </tr>
        <tr>
            <td align="center">
            <table class="insider" width="133" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr align="center" style="line-height:0px;">
            <td>
            <img style="display:block; line-height:0px; font-size:0px; border:0px;" src="images/icon-portfolio.png" width="69" height="78" alt="icon" />
            </td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr align="center">
            <td style="font-family: 'Raleway',  sans-serif; font-size:20px; color:#2b3c4d; line-height:24px; font-weight: bold;">Our Portfolio</td>
        </tr>
        <tr>
            <td height="10"></td>
        </tr>
        <tr align="center">
            <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;">Place some cool text here.</td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td height="30"></td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td height="5"></td>
        </tr>
<!-- END 3 BOX SHOWCASE -->

Awesome Title and What We Do Section

These two sections will still use class col-600 each, however we will use two different classes on each inside element. For the first icon element on our awesome title section we will use col1 and col3_one on the text. We will manipulate the size of this two later on our media queries.

For the what we do section, we will use col2 for each column. Notice that I am using an inline CSS to put some styles on our elements.

<!-- START AWESOME TITLE -->
        <tr>
            <td align="center">
            <table align="center" class="col-600" width="600"  border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td align="center" bgcolor="#2a3b4c">
            <table class="col-600" width="600" align="center" width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td height="33"></td>
        </tr>
        <tr>
            <td>
            <table class="col1" width="183" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
            <td height="18"></td>
        </tr>
        <tr>
            <td align="center">
            <img style="display:block; line-height:0px; font-size:0px; border:0px;" class="images_style" src="images/icon-title.png" alt="img" width="156" height="136" />
            </td>
        </tr>
            </table>
            <table class="col3_one" width="380"  border="0" align="right" cellpadding="0" cellspacing="0">
        <tr align="left" valign="top">
            <td style="font-family: 'Raleway', sans-serif; font-size:20px; color:#f1c40f; line-height:30px; font-weight: bold;">This title is definitely awesome! </td>
        </tr>
        <tr>
            <td height="5"></td>
        </tr>
        <tr align="left" valign="top">
            <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#fff; line-height:24px; font-weight: 300;">The use of flat colors in web design is more than a recent trend, it is a style designers have used for years to create impactful visuals. When you hear "flat", it doesn't mean boring it just means minimalist.
            </td>
        </tr>
        <tr>
            <td height="10"></td>
        </tr>
        <tr align="left" valign="top">
            <td>
            <table class="button" style="border: 2px solid #fff;" bgcolor="#2b3c4d" width="30%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="10"></td>
            <td height="30" align="center" style="font-family: 'Open Sans', Arial, sans-serif; font-size:13px; color:#ffffff;"><a href="#" style="color:#ffffff;">Read more</a>
            </td>
            <td width="10"></td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td height="33"></td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
<!-- END AWESOME TITLE -->
<!-- START WHAT WE DO -->
        <tr>
            <td align="center">
            <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-left:20px; margin-right:20px;">
        <tr>
            <td align="center">
            <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;">
        <tr>
            <td height="50"></td>
        </tr>
        <tr>
            <td align="right">
            <table class="col2" width="287" border="0" align="right" cellpadding="0" cellspacing="0">
        <tr>
            <td align="center" style="line-height:0px;">
            <img style="display:block; line-height:0px; font-size:0px; border:0px;" class="images_style" src="images/icon-responsive.png" width="169" height="138" />
            </td>
        </tr>
            </table>
            <table width="287" border="0" align="left" cellpadding="0" cellspacing="0" class="col2" style="">
        <tr>
            <td align="center">
            <table class="insider" width="237" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr align="left">
            <td style="font-family: 'Raleway', sans-serif; font-size:23px; color:#2a3b4c; line-height:30px; font-weight: bold;">What we do?</td>
        </tr>
        <tr>
            <td height="5"></td>
        </tr>
        <tr>
            <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#7f8c8d; line-height:24px; font-weight: 300;">We create responsive websites with modern designs and features for small businesses and organizations that are professionally developed and SEO optimized.
            </td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
<!-- END WHAT WE DO -->

New Project and Pricing Table Section

For the New Project section, I will not use any other class except for the col-600 while for the pricing table, we’ll use col2 for each table.

<!-- START READY FOR NEW PROJECT -->
        <tr>
            <td align="center">
            <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;">
        <tr>
            <td height="50"></td>
        </tr>
        <tr>
            <td align="center" bgcolor="#34495e">
            <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td height="35"></td>
        </tr>
        <tr>
            <td align="center" style="font-family: 'Raleway', sans-serif; font-size:20px; color:#f1c40f; line-height:24px; font-weight: bold;">Ready for new project?</td>
        </tr>
        <tr>
            <td height="20"></td>
        </tr>
        <tr>
            <td align="center" style="font-family: 'Lato', sans-serif; font-size:14px; color:#fff; line-height: 1px; font-weight: 300;">Check out our price below.
            </td>
        </tr>
        <tr>
            <td height="40"></td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
<!-- END READY FOR NEW PROJECT -->
<!-- START PRICING TABLE -->
        <tr>
            <td align="center">
            <table width="600" class="col-600" align="center" border="0" cellspacing="0" cellpadding="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;">
        <tr>
            <td height="50"></td>
        </tr>
        <tr>
            <td>
            <table style="border:1px solid #e2e2e2;" class="col2" width="287" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
            <td height="40" align="center" bgcolor="#2b3c4d" style="font-family: 'Raleway', sans-serif; font-size:18px; color:#f1c40f; line-height:30px; font-weight: bold;">Small Business Website</td>
        </tr>
        <tr>
            <td align="center">
            <table class="insider" width="237" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td height="20"></td>
        </tr>

        <tr align="center" style="line-height:0px;">
            <td style="font-family: 'Lato', sans-serif; font-size:48px; color:#2b3c4d; font-weight: bold; line-height: 44px;">$150</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td align="center">
            <table width="100" border="0" align="center" cellpadding="0" cellspacing="0"   style="border: 2px solid #2b3c4d;">
        <tr>
            <td width="10"></td>
            <td height="30" align="center" style="font-family: 'Lato', sans-serif; font-size:14px; font-weight: 300; color:#2b3c4d;">
            <a href="#" style="color: #2b3c4d;">Learn More</a>
            </td>
            <td width="10"></td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td height="30"></td>
        </tr>
            </table>
            <table width="1" height="20" border="0" cellpadding="0" cellspacing="0" align="left">
        <tr>
            <td height="20" style="font-size: 0;line-height: 0;border-collapse: collapse;">
            <p style="padding-left: 24px;">&nbsp;</p>
            </td>
        </tr>
            </table>
            <table style="border:1px solid #e2e2e2;" class="col2" width="287" border="0" align="right" cellpadding="0" cellspacing="0">
        <tr>
            <td height="40" align="center" bgcolor="#2b3c4d" style="font-family: 'Raleway', sans-serif; font-size:18px; color:#f1c40f; line-height:30px; font-weight: bold;">E-commerce Website</td>
            </tr>
        <tr>
            <td align="center">
            <table class="insider" width="237" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td height="20"></td>
        </tr>
        <tr align="center" style="line-height:0px;"><td style="font-family: 'Lato', sans-serif; font-size:48px; color:#2b3c4d; font-weight: bold; line-height: 44px;">$289</td>
        </tr>
        <tr>
            <td height="30"></td>
        </tr>
        <tr align="center">
            <td>
            <table width="100" border="0" align="center" cellpadding="0" cellspacing="0"   style=" border: 2px solid #2b3c4d;">
        <tr>
            <td width="10"></td>
            <td height="30" align="center" style="font-family: 'Lato', sans-serif; font-size:14px; font-weight: 300; color:#2b3c4d;">
            <a href="#" style="color: #2b3c4d;">Learn More</a>
        </td>
            <td width="10"></td>
            </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td height="20" ></td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
<!-- END PRICING TABLE -->

Footer

For the footer section using the same col-600, we will create three table cells and give it a percentage width for our social media icons.

<!-- START FOOTER -->
        <tr>
      <td align="center">
        <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;">
        <tr>
            <td height="50"></td>
        </tr>
        <tr>
            <td align="center" bgcolor="#34495e" background="images/footer.jpg" height="185">
            <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td height="25"></td>
        </tr>
        <tr>
            <td align="center" style="font-family: 'Raleway',  sans-serif; font-size:26px; font-weight: 500; color:#f1c40f;">Follow us for some cool stuffs</td>
        </tr>
        <tr>
            <td height="25"></td>
        </tr>
            <table align="center" width="35%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td align="center"  width="30%"  style="vertical-align: top;">
            <a href="https://www.facebook.com/designmodo" target="_blank"> <img src="images/icon-fb.png"> </a>
            </td>
            <td align="center" class="margin" width="30%" style="vertical-align: top;">
            <a href="https://twitter.com/designmodo" target="_blank"> <img src="images/icon-twitter.png"> </a>
            </td>
            <td align="center" width="30%" style="vertical-align: top;">
            <a href="https://plus.google.com/+Designmodo/posts" target="_blank"> <img src="images/icon-googleplus.png"> </a>
            </td>
        </tr>
            </table>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
<!-- END FOOTER -->
            </td>
        </tr>
            </table>

CSS

Now that we have everything set up, let’s add some styles to the header section. First, we need to add general styles for markup. We will import Google Web Fonts and the rest will contain our styles for the body, html, tables and so on.

A few notes about web fonts: According to Campaign Monitor, support for web fonts in email clients is limited. This means not all available clients support them. Check out Campaign Monitor in regard to email clients who support web fonts integration here.

@import "http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css";

html,body {
    background-color:#fff;
    margin:0;
    padding:0
}

html {
    width:100%
}

body {
    margin:0;
    padding:0;
    -webkit-text-size-adjust:none;
    -ms-text-size-adjust:none
}

table {
    border-spacing:0;
    border-collapse:collapse
}

table td {
    border-collapse:collapse
}

table tr {
    border-collapse:collapse
}

img {
    display:block!important
}

br,strong br,b br,em br,i br {
    line-height:100%
}

a {
    text-decoration:none
}

.button a {
    font-size:14px;
    font-family:'Lato',sans-serif;
    color:#fff;
    font-weight:300;
    background:transparent
}

Next, let’s add some styles for specific email client class. This will make sure that for each class the styles that we want will be implemented.

/* OUTLOOK CLASS*/
.ExternalClass {
    background-color:#fff;
    width:100%
}

.ExternalClass,.ExternalClass font,.ExternalClass td,.ExternalClass p,.ExternalClass span,.ExternalClass div {
    line-height:100%
}

.ReadMsgBody {
    width:100%;
    background-color:#fff
}

/* YAHOO MAIL CLASS */
.yshortcuts,.yshortcuts a,.yshortcuts a:link,.yshortcuts a:visited,.yshortcuts a:hover,.yshortcuts a span {
    border-bottom:none!important
}

/* MAILCHIMP CLASS */
.default-edit-image {
    height:20px
}

Media Queries

For media queries we will start adding and manipulating the size of each element and section on 640px viewport using percentages.

@media only screen and (max-width: 640px) {
body {
    width:auto!important
}

table[class="col1"] {
    width:29%;
}

table[class="col2"] {
    width:47%;
    text-align:left
}

table[class="col3_one"] {
    width:64%;
    text-align:left;
}

table[class="col3"] {
    width:100%;
    text-align:center;
}

table[class="col-600"] {
    width:450px
}

table[class="insider"] {
    width:90%
}

img[class="images_style"] {
    width:60%;
    height:auto
}

.margin{
	margin-left: 25px;
	margin-right: 25px;
}
}

For the final CSS we will start adding some media queries for our 480px viewport. Most of our elements and section here will be set to 100 percent.

@media only screen and (max-width: 480px) {
body {
    width:auto!important
}

table[class="col1"] {
    width:100%;
}

table[class="col2"] {
    width:100%;
    text-align:left
}

table[class="col3"] {
    width:100%;
    text-align:center
}

table[class="col3_one"] {
    width:80%;
    text-align:center;
    margin: 0 20px 0 0;
}

table[class="col-600"] {
    width:290px
}

table[class="insider"] {
    width:82%!important
}

img[class="images-style"] {
    width:60%
}

.button { width: 40%; display: block; }
a.read-more { text-align: center; display: block;}

}

Wrapping Up

Congratulations! That’s how you can create a responsive email template. As you can see most of our styles used inline CSS.

While there might be a lot of improvement in the future, this is a good foundation for creating an email template. Please don’t forget to remove all comments on the HTML file before using it as some email clients might have issues with it.

Hope you learned something on this tutorial and let me know your thoughts in the comments.

Newsletter

14 Comments
  1. Cezar Jan 8, 12:13 pm

    Awesome tutorial, thanks! I’ve created several webpages before. This is my first email template from scratch. My developer friends weren’t joking about all the tables! Cool and Neat design though simple to follow tutorial. Very much appreciated!

    Reply
    0
  2. michael lacson Jan 8, 12:23 pm

    Great tutorial! Really nice responsive email template! I was looking exactly for such layout. Well done. Thanks!

    Reply
    0
  3. Noveland Jan 8, 12:57 pm

    Another helpful tutorial. Thanks for making it simple and easy to follow along! Nicely done!

    Reply
    0
  4. Jan Jan 8, 1:20 pm

    This solution is good for minor group of desktop or web clients only. Check up this list of supported features.

    https://www.campaignmonitor.com/css/

    A big problem is cutting off embeddet styles in tag. In this case you have to create propper attribute styte=”” in every tag in html structure and this kind of email will be never responsive.

    Reply
    0
    • Jeremiah Jan 9, 5:34 am

      I checked the result of this one in litmus and the responsive is working fine. I don’t know what you mean but I am pretty sure this one works…

      Reply
      0
  5. Mick Kennys Jan 8, 8:05 pm

    When i read how you describe it, it looks easier than stealing a candy from a kid. But when you try to do it on your own than… it is not so easy :D

    Reply
    0
  6. Kimberly Jan 9, 5:19 am

    This tutorial is really helpful. While there might be a lot of tutorial about how you can make one, this one gives a great foundation on how you can create your own custom email template. And yes, for beginners this might be easy but its all worth it. You need to dig down a big to learn the whole details of tutorial. My gratitude for bringing this tutorial published.

    Reply
    0
  7. Zalinn Jan 9, 11:30 am

    On Nexus 5, it doesn’t work. I mean, yes it works, but the responsive is broken.
    Nexus 5 : GMAIL Application

    On iphone, native mailbox, it works fine.

    Reply
    0
    • PrestaShark Jan 13, 6:52 pm

      Its because there is no 100% bulletproof responsive support in email clients or webmails. Webmails like gmail dont like responsivness in email templates. So if the most popular webmail service like gmail dont like it i dont bother email RWD design!

      Reply
      0
  8. David McEvoy Jan 14, 4:56 pm

    Hey, great tutorial, thanks.

    One question though, will Google Fonts work with most of the email clients?

    Reply
    0
  9. Sanjeev Dhiman Jan 15, 8:11 am

    to check what property is supported for your Email template please follow this link:

    https://www.campaignmonitor.com/css/

    Reply
    0
  10. e11world Jan 23, 1:27 am

    I didn’t know that background images were supported in email clients. Did this work for anyone? I haven’t tested it yet but looking forward to know this.

    Reply
    0
  11. Rick Jan 30, 2:21 pm

    Did anyone actually try to implement it, because i did. And the HTML has some flaws in it.
    Not a problem to fix it though.

    Reply
    0
  12. Stephen Provenzano Mar 20, 7:20 pm

    I code responsive e-mail campaigns for big-time auto manufacturers.

    There is a way of coding emails that supports even those clients without media query support. I see tutorials like this all the time, and not that it’s all wrong, but the amount of email client compatibility with this code is limited. Mostly because stacking is only managed by media queries or Left and Right align on tables (which will end up looking awkward on medium size devices).

    My approach is this:

    Code so that items stack without media queries, try to sick to even number/width columns, code in a way that supports older desktop clients (Outlook, Lotus Notes, etc). Once that is working, and Gmail mobile stacks content for mobile friendliness, and all desktop clients share the same results, I introduce Progressive Enhancement, a term I use with my team which basically means, for those e-mail apps/clients that support it, use media queries to enhance the mobile experience even further.

    Gmail is a huge percentage of the e-mail landscape, and if 90%+ are reading their e-mails from their gmail accounts, they could be doing that through the Gmail app.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters

Download Web Design Freebies & Resources

psd

Please Confirm Your Email!