How To Create A Quick, Easy, & Responsive Email

by Derek Fletes

Hey! What's up? As you probably could have guessed, we are embarking on another tutorial. This time, we will be going through how to make a quick, easy, & responsive email.

The ZingChart team has undergone a few email redesigns recently. I am pretty happy with the look of our new emails so I will be teaching you how to achieve the same result.

If you are a marketer or developer, being able to create your own emails can be a vital skill to have. Let's jump right in.

This post has 3 vital sections. General email tips and tricks, HTML, & CSS. These will cover most email fundamentals you will need to get going.

Here is a preview of what we will be making:

Email Tips & Tricks

Email has a lot of interesting nuances that can get complicated. I have made a list below of the things I think you should know.

  1. Emails are coded in a table format. I don't know why, but in order to make an email, you should study up a little bit on HTML tables here.

  2. The standard email is coded in one column. This is to make it easy to read across many different devices.

  3. Some email clients strip out header tags. This is usually where you can place your CSS code. Therefore, it is best practice to code your email with inline CSS. However, I would suggest you code out your email first then use MailChimp's CSS inliner tool. This ensures you can easily code your email out first without navigating through a lot of bloated inline code, which could slow down your process.

  4. Create your email using CodePen. You can see changes happen in real-time. My example will be hosted on CodePen so you can easily fork and customize.

HTML Coding

My email template is very simple. I got the inspiration from Medium's onboarding email examples on Really Good Emails. It looks like this:

Before I post my HTML, I will review the vital tags you need to know.

  1. <table> : This one is pretty self-explanatory. This tag begins your defined table.

  2. <tr> : This tag defines a horizontal table row. <table> act as its parent tag.

  3. <td> : This is a table cell. Table cells will be housing your main content. <tr> acts as its parent tag.

These are the three tags we will be working with today. Keep in mind they work with each other. Very quick and simple. Our email will be formatted almost identically to the Medium email I have included above.

Below is the bare minimum table we can work with. This will hold one horizontal row.

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

Our main table is nested within a table, horizontal row, and cell. This is to ensure that our email is created in exactly one column.

CSS

Now that we have the HTML skeleton of our email ready, let's go through some of the CSS selectors that will be shaping our design.

To expand upon our HTML skeleton, we will need to include class names that will act as our CSS selectors. These classes will be modified by our CSS later on in this article.

Here is the updated code with classes included below:

<table class="entire-page>
  <tr>
    <td>
      <table class="email-body">
        <tr class="header">
          <td>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Tip: Semantically name all of your classes so you can easily identify what they refer to in your code. We now have an email with one single content column to work with.

We also need to add 7 additional table rows <tr> to house our content. Each row will include a combination of links (<a>), headers (<h1> or <h2>), horizontal lines (<hr>), paragraphs (<p>), and images (<img>). I excluded this so we didn't clutter our example code. You can check it out in the CodePen example.

I will organize them in a way that builds off of each other to reach a final product. I made a pretty basic email template with less than 70 lines of CSS.

It is very simple to follow. I will run you by all of these attributes below. However, I have left out very simple ones like background color, margins, padding, font-family, etc...

These are all attributes you can look up very easily or edit in CodePen on your own without much trouble.

Min & Max-With

This is going to give our email its shape. The min-width property is going to make sure your email is going to be sized appropriately. Here is our code below. We are going to apply this to our table that holds the class of "email-body".

.email-body {
  max-width:  600px;
  min-width: 320px;
}

As you can see, our max-width is 600px. This is to create a nice sized email on a desktop. This size ensures all email clients can view the entirety of the email.

Our min-width is set at 300px. This gives us a screen width for phones. The trick to using both in unison is that it gives us a responsive width that sets to smaller and bigger screens.

Border-Collapse

We use this attribute and value to clear out the borders on our tables. Check out the code below

.email-body {
  border-collapse: collapse;
}

Table-Position

This ensures that the horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells. It also allows for the browser to layout our table faster.

table {
  table-position: fixed;
}

Margin

There are two ways that I like to use margins to center items. One is setting margins as auto. This works on divs.

.email-body {
  margin: 0 auto;
}

You can also center items such as images with a margin "hack". This only works on block level items.

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Text-Align

Text-align gives you the ability to place any text wherever you want on the page. I usually use it to center text. I wanted all of my text centered so I just added it to the table with the email-body class. The rest of its children will inherit this property.

.email-body {
  text-align: center;
}

Now that we have gone by how to use some of these attributes. Let's review the special classes we have defined.

.entire-page

Our table with the entire-page class will have on purpose. Give our email a gray background with padding. These are all very straightforward styling choices.

.entire-page {
  width: 100%;
  padding: 20px 0;
  background: #eee;
  font-family: Roboto, sans-serif;
  color: #003849;
}

.email-body

When you look below, you will see some very familiar attributes: max-width, min-width, margin, border-collapse, text-align. Every single thing we discussed above essentially shapes the basis of our email.

.email-body {
  max-width:  600px;
  min-width: 320px;
  margin: 0 auto;
  background: #fff;
  border-collapse: collapse;
  text-align: center;
}

This section was my favorite part of the entire email. The background image is just a Zing(chart) we have exported as an image.

Tip: You can also export our charts as images and use them in your emails for quick data consumption or design.

It's important to note that if you are using images, they should be created with the set height and width you will be working with in your email, otherwise they can end up being distorted.

I used standard practices to declare and size the background image. A background position of "cover" was used to extend the image to the entire div.

.header {
  height: 200px;
  background: url(http://demos.zingchart.com/view/75992AUD/dfsdklafj%20v.png) no-repeat;
  background-position: cover;
  border-bottom: 1px solid #eee;
}

Everything else is just regular styling CSS that doesn't need too much more explanation past what I have provided. The final CodePen demo is below. There you can see all of the source code.

Final Demo

ZingChart Getting Started Email

(null)