Hello, and welcome to this video series about email design and development.

Designing and building an email template isn’t simple; in fact, it’s a fairly complex task. There are a lot of variables to consider: just for starters, there’s content, target audience, and delivery method. Additionally, there are over 90 different email clients, and each one supports CSS a little differently from the rest, so styling can be very tricky. That’s why, before going deep into coding, we need to consider a few important things regarding email design.

The first thing we need to prepare is the content; without solid content, there’s really no point in worrying about design. What are we offering? What is the objective of the email we want to send? I recommend writing the plain text of your email first, so your content issues are all worked out before you start worrying about styling.

Let’s consider a specific example: imagine a brand that wants to deliver news about a certain topic. Let’s say...animals. In this case, the basic objective is to make people read the news; therefore, the information we need to provide is:

  • A title
  • A preheader
  • Our brand name
  • The news

Knowing that, we can make a simple plain text example like this:

Title: Wild News

Preheader: Turtles Born / Massive Crab Migration

__________NewsBrandName___________

new-one: Turtles born without problems in the island of...

(link-to-new)

------------------------------

new-two: Massive crab migration

And the massive crab migration continues to develop in...

(link-to-new)

------------------------------

Remember, this is plain text; doing it first will only fill a basic requirement. It will also force you to consider the best structure for the information you’re delivering. This will be very helpful when you begin making design decisions.

It's important to keep in mind that the title and preheader should be in harmony with the objective of the email. In this case, the focus is news about animals. So, the title should be fairly direct; "Wild News" should be enough. However, in other circumstances, a more engaging title might be required, such as "Animals out of control!"

The preheader is very important. A huge percentage of recipients don’t even open most of their emails, just because the title doesn’t compel them to. This is why your preheader must give the user a clear idea of what to expect in the message. The user must grasp the basic purpose of the email, as well as a sense that the content is both interesting and safe.

Now, let's check something really quick.

image alt text

Most outlook users use the three column layout design, which limits the width of the message. Based on a test from December 2016, the maximum email width that can fit into the screen in Outlook and Yahoo is roughly 650 px. Having a design based on 600 px, is still the safest way to ensure a consistent display in all email clients.

As far as the design itself, keep it simple. Multiple email clients, each with their own width limitations, means things can get complicated quickly. Shiny design tricks that don’t have a real purpose are simply a waste of time. In most cases, a simple, minimal design with a one- or two-column layout will be sufficient.

Also, simple designs will make life much easier when styling for mobile. According to statistics, and depending on your target users, your email could be opened from mobile as much as 77% of the time, which means making the email responsive is a must.

That being said, let's take the example we used above and apply a simple design to it. Keep in mind that this markup is not intended as an actual email template; it’s just to show you a commonly used design. We’ll talk more about how to build email templates later on.

<!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" />
  <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!--<![endif]-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Wild News</title>
  <style>
    .pre-header {
      display: none;
    }
  </style>
</head>
<body>
  <span class="pre-header">Turtles born / Massive crab migration</span>
  <center>
    <div class="header background">
      <a href="#"><img src="#" alt="Logo" /></a>
      <h1 class="brand-name">BrandName</h1>
    </div>
    <div class="container">
      <center class="new-item">
        <h3 class="new-title">Turtles born</h3>
        <p class="new-text">new-one: Turtles born without problems in the island of...</p>
        <a href="link-to-new" class="button">See new</a>
      </center>
      <center class="new-item">
        <h3 class="new-title">Massive crab migration</h3>
        <p class="new-text">And the massive crab migration continues to develop in...</p>
        <a href="link-to-new" class="button">See new</a>
      </center>
      <center class="new-item">
        <h3 class="new-title">Turtles born</h3>
        <p class="new-text">new-one: Turtles born without problems in the island of...</p>
        <a href="link-to-new" class="button">See new</a>
      </center>
      <center class="new-item">
        <h3 class="new-title">Massive crab migration</h3>
        <p class="new-text">And the massive crab migration continues to develop in...</p>
        <a href="link-to-new" class="button">See new</a>
      </center>
      <center class="new-item">
        <h3 class="new-title">Turtles born</h3>
        <p class="new-text">new-one: Turtles born without problems in the island of...</p>
        <a href="link-to-new" class="button">See new</a>
      </center>
      <center class="new-item">
        <h3 class="new-title">Massive crab migration</h3>
        <p class="new-text">And the massive crab migration continues to develop in...</p>
        <a href="link-to-new" class="button">See new</a>
      </center>
    </div>
  </center>
</body>
</html>

We change our markup and then we start styling every part. First, we create our header.

body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.pre-header {
  display: none;
}

.background {
  background-color: #4d3e39;
  max-width: 600px;
  padding: 25px 0;
  width: 100%;
}

We give basic style to the body, using a center tag to center the content. We set a background color in the header and the max-width to 600px, and we center the brand name with padding.

Now let’s style the news section:

.container {
  background-color: #ded6bf;
  font-family: sans-serif;
  max-width: 600px;
}

.brand-name {
  color: white;
  font-family: sans-serif;
  font-size: 40px;
}

.new-item {
  border-bottom: 1px solid #8e6d4c;
  display: inline-block;
  max-width: 290px;
  padding-bottom: 15px;
  padding-top: 15px;
  width: 100%;
}

.new-title {
  font-family: Georgia, sans-serif;
  font-style: italic;
}

.new-text {
  max-width: 250px;
  text-align: left;
}

Another good practice when designing emails is to use safe fonts, such as Arial, Sans-Serif, Georgia, Verdana, etc. There's nothing too crazy here; we set a background color and the width of the container to 600px, then we set a width for .new-item and .new-text. We use inline-block to position the news side by side.

Now let's make the button:

.button {
  background-color: #dd9527;
  border-radius: 8px;
  color: #ffffff;
  display: inline-block;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 40px;
  text-decoration: none;
  text-transform: uppercase;
  width: 200px;
}

Nice! Now our design is almost finished, but there are a couple more things to consider.

First, it's important to have a Plan B for blocked images, and we shouldn't overuse them. Also, avoid Flash and Javascript. If you want some movement/motion in your email, a gif is the way to go.

Lastly, it's good to add your social media links, an unsubscribe link, and a footer.

Let's do that:

    <div class="container social">
      <span class="social-text">join us!</span>
      <a href="instagram"><img src="images/twitter.png" class="social-icon"></a>
      <a href="twitter"><img src="images/facebook.png" class="social-icon"></a>
      <a href="facebook"><img src="images/instagram.png" class="social-icon"></a>
    </div>
    <div class="footer background">
      <a href="#" class="footer-text">PRIVACY POLICY</a>
      <a href="#" class="footer-text">UNSUBSCRIBE</a>
      <p class="small-footer-text">
        You can unsubscribe from our mailing list by clicking "Unsubscribe" above. If you have any questions, feel free to contact us by email at example@email.com or call at 0800-your-number.
      </p>
      <span class="small-footer-text">©2018 Your Organization. All rights reserved.</span>
    </div>

Ok, we have our social section and our footer. Notice that the social icons are actually images. Now, let's style it:

.social {
  padding-top: 15px;
  padding-bottom: 15px;
}

.social-text {
  color: #000000;
  font-family: Georgia, sans-serif;
  font-size: 15px;
  font-style: italic;
  line-height: 18px;
}

.social-icon {
  width: 22px;
  border-width: 0;
  display: inline-block;
  vertical-align: middle;
}

.footer-text {
  color: #ded6bf;
  font-family: sans-serif;
  text-transform: uppercase;
}

.small-footer-text {
  color: #ded6bf;
  font-size: 12px;
  max-width: 85%;
}

Nothing new here. We just assign padding top and bottom to the social section, and then we style the fonts used in the footer. That's it. Our example email design is ready. Nice!

Summary

Today we did a walk through of the best email design practices and did our own email design. See you in the next video!