How to Create a Responsive Email Template
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.
Note: Check out best email newsletter template builder – Postcards. Try it for free!
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.
With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.
Free Email BuilderFree Email TemplatesTo 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.
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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://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>
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.
With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.
Try Startup App Try Slides AppOther ProductsFor 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 -->
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 "https://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=&amp;amp;quot;col1&amp;amp;quot;] { width:29%; } table[class=&amp;amp;quot;col2&amp;amp;quot;] { width:47%; text-align:left } table[class=&amp;amp;quot;col3_one&amp;amp;quot;] { width:64%; text-align:left; } table[class=&amp;amp;quot;col3&amp;amp;quot;] { width:100%; text-align:center; } table[class=&amp;amp;quot;col-600&amp;amp;quot;] { width:450px } table[class=&amp;amp;quot;insider&amp;amp;quot;] { width:90% } img[class=&amp;amp;quot;images_style&amp;amp;quot;] { 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=&amp;amp;quot;col1&amp;amp;quot;] { width:100%; } table[class=&amp;amp;quot;col2&amp;amp;quot;] { width:100%; text-align:left } table[class=&amp;amp;quot;col3&amp;amp;quot;] { width:100%; text-align:center } table[class=&amp;amp;quot;col3_one&amp;amp;quot;] { width:80%; text-align:center; margin: 0 20px 0 0; } table[class=&amp;amp;quot;col-600&amp;amp;quot;] { width:290px } table[class=&amp;amp;quot;insider&amp;amp;quot;] { width:82%!important } img[class=&amp;amp;quot;images-style&amp;amp;quot;] { 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.