Creating a Responsive Email Template

Posted in Coding, Coding, HTML & CSS, Tutorials, Tutorials5 months ago • Written by 10 Comments

As smart phones and tablets have become popular, more and more people are have been reading their emails regularly on their small screen devices. According to Campaign Monitor, mobile surpassed web and desktop client usage last July 2012. As the mobile email usage grows, web developers and designer must consider optimizing the look of their email newsletters on phones and tablet.

Email clients such as Outlook (Windows), Mail (OSX), etc. use different HTML engines. Many have some rules and regulations. That being said, some CSS might work while some might not.

So, in making an email template, it is highly recommended to use a different approach. Many email clients completely remove the head and strip out styles while some support a limited set of inline and internal styles for formatting. To many, an old-school table layout is the best way to go.

For your reference, read Campaignmonitor and Emailology.

To give you an idea how to create a responsive email template, let’s go ahead and create one.

Resources You Will Need to Complete This Tutorial:

Our Final Product

final-product-email

File Structure

folder-structure

Our file structure will consist of an img folder and an HTML file since we will do an internal CSS this time:

  • index.html – this will serve as our main file
  • img folder – for our images

The Markup

Our HTML document starts with a DOCTYPE and then followed by HEAD, TITLE and BODY section. Then, we’ll add the link to our Google fonts – “Pacifico”. We will also add the CSS later on our HEAD section. So let’s go ahead and add this to our index.html file.


<!doctype html>
  <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Email Newsletter Template</title>
   <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
  </head>

For our body tag, we will be set margins off and then we’ll put the attribute selector yahoo=”fix”.

To explain this attribute, let me give you quick information about Yahoo. According to campaignmonitor, Yahoo mail ignores media queries. To solve this, we need to use a tricky solution by using attribute selectors.

By adding a value of “fix” to the Yahoo attribute, it can give me access to the general selectors of the media queries. To learn more about this, you can check this article.

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix>

For the layout structure, we will wrap the whole thing with a wrapper table and set the width to 100%.

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">

Next, the header and the following table elements will be wrapped by a container  with 600px table layout. We’ll put a class of border-complete and put styles on the header on our CSS code later. The basic structures of the columns and inline CSS of elements such as the background color and width will also be added. 

For our table and image elements, we will also add class device Width for the responsive look. Inside our header section, we will include two divider images and a logo.

<table width="600" border="0" cellpadding="0" cellspacing="0"  align="center" class="border-complete deviceWidth" bgcolor="#e9e9e9">

Now that we have our header set, let’s go ahead and add the banner image and the text markup.

For this part, we will be using the file img-banner.jpg on the resource that we provided above. The markup is just the same as the structure of the head except for the border. Instead of adding border-complete class, we will add border-lr class (this will add border on the left and right only) along with the deviceWidth class along with deviceWidth class.


<table width="600"  class="border-lr deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#eeeeed" >
   <tr>
	<td>
	    <a href="#"><img  class="deviceWidth" src="img/img-banner.png" alt="" border="0" /></a>
	</td>
   </tr>
</table>

For the banner text, we will give it a height of 108px and align all texts to the center. The text will have a class of banner-txt.

<table width="600" height="108" border="0" cellpadding="0" cellspacing="0" align="center" class="border-lr deviceWidth" bgcolor="#3baaff" >
     <tr>
          <td align="center">
                  <p id="banner-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                 <a href="#" class="white-btn" align="center"> LEARN MORE</a>
         </td>
      </tr>
            </table>

For the products section, we need to align two columns. Go ahead and create two tables next to each other and give each column a 48% width. We will also add H2 and H3 tags along with their respective classes and then will later on, add the styling on our CCS codes.

<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="border-lr deviceWidth" bgcolor="#fff">
	<tr> <td align="center"><h2 id="our-products">Our Products </h2> </td> </tr>
		<tr>
		    <td class="center">
                        <table width="48%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth" >
                   <tr>
                   <td align="center">
                         <h3 class="our-products">Product No. 1 </h3>
			<a href="#"><img width="262" src="img/image1.jpg" alt="" border="0" class="deviceWidth" /></a></p>
                    <p class="our-products"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</td>
               </tr>

   </table>

              <table width="48%" border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth" >
                             <tr>
               <td align="center">
                  <h3 class="our-products">Product No. 2 </h3>
		<a href="#"><img width="262" src="img/image2.jpg" alt="" border="0" class="deviceWidth" /></a></p>
                                    <p class="our-products"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			</td>
                         </tr>

                        </table>

					</td>
				</tr>
			</table>

The coupons section will just have the same layout structure like the special offer section but will have their own styling classes.

<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="border-lr deviceWidth" bgcolor="#fff" >

				<tr>
					<td style="text-align: center;">
						<h2 id="coupons"> Check our site for coupons </h2>
						<p id="coupons">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   </p>
						<a href="#" class="blue-btn" align="center"> LEARN MORE</a>
                    </td>
                </tr>
            </table>

The Footer will also have the same styling like the header part so go ahead and copy the styling of the header. Inside our footer we will create another table for our social icons and give it an id of social-icons followed by another row for our copyright text. At the end of our footer we will put a closing tag to our wrapper table.


<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="border-complete deviceWidth" bgcolor="#eeeeed" >
				<tr><td width="100%" ><img src="img/divider.png" class="deviceWidth"/> </td> </tr>

				  <tr>
					<td align="center" valign="top" id="socials">
					<table id="social-icons" border="0" cellspacing="0" cellpadding="0" >
					<tr>
						<td><a href="#"><img src="img/fb.png" width="32" height="32"  style="display:block;"/></a></td>
						<td><a href="#"><img src="img/twitter.png" width="32" height="32" style="display:block;"/></a></td>
						<td><a href="#"><img src="img/pinterest.png" width="32" height="32" style="display:block;"/></a></td>
						<td><a href="#"><img src="img/google.png" width="32" height="32" style="display:block;"/></a></td>

                      </tr>
                    </table></td>
                  </tr>

				<tr>
					<td style="text-align: center;">
						<p id="footer-txt"> <b>© Copyright 2013 - Email Template - All Rights Reserved</b> <br/>
							Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
						</p>
                    </td>
                </tr>

			<tr><td width="100%" ><img src="img/divider.png" class="deviceWidth"/> </td> </tr>
            </table>

			</table>

By this time, you must have something like this.

without-css

The CSS

Now that we have our markup structured, we can now start adding different styles on the head section to make it look good and responsive for the desktop and mobile devices view.

Let’s first add stylings for our general elements, such as the body, image, buttons and tables. For our body elements, we will set this to 100% width for the responsive look.

For our table, we will set it to border collapse to set the tables whether the table borders are collapsed into a single border or detached as in standard HTML. Then followed by the logo and buttons, which are fairly self- explanatory.

body {
    width: 100%;
    background-color: #fff;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    font-family: Georgia, Times, serif;
}

table {
    border-collapse: collapse;
}

td#logo {
    margin: 0 auto;
    padding: 14px 0;
}

img {
    border: none;
    display: block;
}

a.blue-btn {
    display: inline-block;
    margin-bottom: 34px;
    border: 3px solid #3baaff;
    padding: 11px 38px;
    font-size: 12px;
    font-family: arial;
    font-weight: 700;
    color: #3baaff;
    text-decoration: none;
    text-align: center;
}

a.blue-btn:hover {
    background-color: #3baaff;
    color: #fff;
}

a.white-btn {
    display: inline-block;
    margin-bottom: 30px;
    border: 3px solid #fff;
    background: transparent;
    padding: 11px 38px;
    font-size: 12px;
    font-family: arial;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    text-align: center;
}

a.white-btn:hover {
    background-color: #fff;
    color: #3baaff;
}

For our border, we have two classes. The first one is the border-complete class that will set all the borders (top, bottom, left, right) while the second class border-lr will only set the border for left and right.

.border-complete {
    border-top: 1px solid #dadada;
    border-left: 1px solid #dadada;
    border-right: 1px solid #dadada;
}

.border-lr {
    border-left: 1px solid #dadada;
    border-right: 1px solid #dadada;
}

For our elements for H2, H3, and paragraph tags, we’ll just add styling for colors, text-align and a series of padding to make them look good on the screen.

#banner-txt {
    color: #fff;
    padding: 15px 32px 0;
    font-family: arial;
    font-size: 13px;
    text-align: center;
}

h2#our-products {
    font-family: Pacifico;
    margin: 23px auto 5px;
    font-size: 27px;
    color: #3baaff;
}

h3.our-products {
    font-family: arial;
    font-size: 15px;
    color: #7c7b7b;
}

p.our-products {
    text-align: center;
    font-family: arial;
    color: #7c7b7b;
    font-size: 12px;
    padding: 10px 10px 24px;
}

h2.special {
    margin: 0;
    color: #fff;
    color: #fff;
    font-family: Pacifico;
    padding: 15px 32px 0;
}

p.special {
    color: #fff;
    font-size: 12px;
    color: #fff;
    text-align: center;
    font-family: arial;
    padding: 0 32px 10px;
}

h2#coupons {
    color: #3baaff;
    text-align: center;
    font-family: Pacifico;
    margin-top: 30px;
}

p#coupons {
    color: #7c7b7b;
    text-align: center;
    font-size: 12px;
    text-align: center;
    font-family: arial;
    padding: 0 32px;
}

For our footer, we will style our social icons and give it a width of 28%. The text will have a padding and an Arial font face.


#socials {
    padding-top: 12px;
}

p#footer-txt {
    text-align: center;
    color: #303032;
    font-family: arial;
    font-size: 12px;
    padding: 0 32px;
}

#social-icons {
    width: 28%;
}

/css]

By this time, you already have the same perfect look just like the PSD design.

<h2>Using Media Queries for the Responsive Look</h2>
To make our email template responsive, we will start adding some media queries for smaller devices. This is a technique to make HTML and CSS respond to the device width of the browser. So to do this, add the following code.

1
@media only screen and max-width 640px {
    body[yahoo] .deviceWidth {
        width: 440px !important;
        padding: 0;
    }

    body[yahoo] .center {
        text-align: center !important;
    }

    #social-icons {
        width: 40%;
    }

}

@media only screen and max-width 479px {
    body[yahoo] .deviceWidth {
        width: 280px !important;
        padding: 0;
    }

    body[yahoo] .center {
        text-align: center !important;
    }

    #social-icons {
        width: 60%;
    }

}

On this code, we use the Yahoo attribute that we put on the body tag to let us use media queries on Yahoo mail. On a 640px viewport, we will set the class deviceWidth to 440px and set the social media icons with by 40%. While on the 479px viewport, we’ll set the class deviceWidth to 479px and set the social icons to 60% width.

Final Thoughts

Congratulations! You now have the idea how to optimize emails for mobile devices. Hope you enjoyed this tutorial and please free to post you comments and suggestions below. Cheers!

46 Written ArticlesGoogle+

is a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics. He spend most of his time practically every day, experimenting with HTML, CSS and Wordpress.

10 Comments Best Comments First
  • Paul marek

    Sunday, April 13th, 2014 05:08

    7

    What about clients like gmail that strip everything from the head, which effectively makes this non responsive? Has this even been tested in gmail? Doesn’t work for me.

    +4
    • Amit

      Sunday, April 13th, 2014 07:23

      8

      It should work cause i think the newsletters from various design sites appear good.

      0
  • Shawn Rubel

    Wednesday, April 9th, 2014 09:19

    1

    Hey Sam,

    up until now I’ve been building my responsive emails trough a company, which has cost me quite a bit of money, if I put it all together.

    I love that you’ve chosen the flat style for this tutorial, totally like it myself, and seems that I’ll be using this tutorial to build my next newsletter.

    Awesome job, thanks! :)

    - Shawn

    +1
    • Sam Norton

      Thursday, April 10th, 2014 01:06

      3

      It’s a pleasure Shawn. Hope you like it! :)

      0
  • Design Logo

    Thursday, April 10th, 2014 02:38

    4

    Sam this CSS template guideline is too responsive for me,
    you shared each steps which obviously users are finding.
    Thanks for your great post.

    0
  • Paul

    Wednesday, April 9th, 2014 15:39

    2

    Thank you, very usefull. Would love to know the kind of email client support for this method. (Will try in the morning). Great it works on mobile – what kind of results will be expected on desk top – outlooks various versions? Thanks again.

    0
  • Ken

    Thursday, April 10th, 2014 20:24

    5

    Sam, I just want to say I like your tutorials. Your tutorials are comprehensive, but easy to understand and follow. Thumbs up!

    0
  • asim khan

    Saturday, April 12th, 2014 01:49

    6

    Hey dudes,

    tell me how to send this email template in email.?

    0
  • Logo Design

    Saturday, June 7th, 2014 04:27

    10

    Hello Sam,
    Thank for this, its very helpful for me because I want take some extra knowledge about HTML, CSS and WordPress.

    0
  • Responsive Email Design Template

    Thursday, April 17th, 2014 03:11

    9

    Great article on how to create responsive e-newsletter template. Good guidelines for coding responsive email template.

    0
  • Logo Design

    Saturday, June 7th, 2014 04:27

    10

    Hello Sam,
    Thank for this, its very helpful for me because I want take some extra knowledge about HTML, CSS and WordPress.

    0
  • Responsive Email Design Template

    Thursday, April 17th, 2014 03:11

    9

    Great article on how to create responsive e-newsletter template. Good guidelines for coding responsive email template.

    0
  • Paul marek

    Sunday, April 13th, 2014 05:08

    7

    What about clients like gmail that strip everything from the head, which effectively makes this non responsive? Has this even been tested in gmail? Doesn’t work for me.

    +4
    • Amit

      Sunday, April 13th, 2014 07:23

      8

      It should work cause i think the newsletters from various design sites appear good.

      0
  • asim khan

    Saturday, April 12th, 2014 01:49

    6

    Hey dudes,

    tell me how to send this email template in email.?

    0
  • Ken

    Thursday, April 10th, 2014 20:24

    5

    Sam, I just want to say I like your tutorials. Your tutorials are comprehensive, but easy to understand and follow. Thumbs up!

    0
  • Design Logo

    Thursday, April 10th, 2014 02:38

    4

    Sam this CSS template guideline is too responsive for me,
    you shared each steps which obviously users are finding.
    Thanks for your great post.

    0
  • Paul

    Wednesday, April 9th, 2014 15:39

    2

    Thank you, very usefull. Would love to know the kind of email client support for this method. (Will try in the morning). Great it works on mobile – what kind of results will be expected on desk top – outlooks various versions? Thanks again.

    0
  • Shawn Rubel

    Wednesday, April 9th, 2014 09:19

    1

    Hey Sam,

    up until now I’ve been building my responsive emails trough a company, which has cost me quite a bit of money, if I put it all together.

    I love that you’ve chosen the flat style for this tutorial, totally like it myself, and seems that I’ll be using this tutorial to build my next newsletter.

    Awesome job, thanks! :)

    - Shawn

    +1
    • Sam Norton

      Thursday, April 10th, 2014 01:06

      3

      It’s a pleasure Shawn. Hope you like it! :)

      0

Comments are closed.

54.82.66.236 - unknown - unknown - US