How to Create a Responsive Email Template

• 4 minutes READ

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.

No-Code Email Template Builder

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 Templates

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" "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.

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

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.

Low-Code Website Builders

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 Products

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.

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

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.

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

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

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.

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

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 &quot;https://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css&quot;;

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;amp;quot;col1&amp;amp;amp;quot;] {
    width:29%;
}

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

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

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

table[class=&amp;amp;amp;quot;col-600&amp;amp;amp;quot;] {
    width:450px
}

table[class=&amp;amp;amp;quot;insider&amp;amp;amp;quot;] {
    width:90%
}

img[class=&amp;amp;amp;quot;images_style&amp;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;amp;quot;col1&amp;amp;amp;quot;] {
    width:100%;
}

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

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

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

table[class=&amp;amp;amp;quot;col-600&amp;amp;amp;quot;] {
    width:290px
}

table[class=&amp;amp;amp;quot;insider&amp;amp;amp;quot;] {
    width:82%!important
}

img[class=&amp;amp;amp;quot;images-style&amp;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.

Sam Norton

Sam is an expert Full Stack Developer who loves making digital solutions that are meaningful and new. Sam is an expert in web design and development. He uses his knowledge of HTML/CSS, JavaScript, jQuery, Ruby, Ruby on Rails, WordPress, Node.js, React, Express.js, Gatsby.js, GraphQL, and Strapi.js to make custom websites that reflect clients' unique brands and serve their business niches. Committed to staying ahead of the curve, Sam harnesses the power of the latest technologies, CMS, and platforms to build cutting-edge websites that outperform competitors.

Posts by Sam Norton
🍪

We use cookies to ensure that we give you the best experience on our website. Privacy Statement.

  • I disagree
  • I agree