Email Tip – Responsive Email Build

Liz CordeiroThis week, we welcome a guest post from our Online Marketing Manager, Liz Cordeiro. Liz is excited to take over this post + dive into mobile responsive template building with you!

 

So you’ve noticed that mobile sessions on your website are up, and that more users are opening your emails on a mobile device. The next natural progression is to start making your emails look better on a mobile device, but it can be daunting to get started. Did your eyes get wide when you Googled responsive email building and saw words like media queries, fluid, conditional statements PLUS the more advanced code than your typical HTML builds? Take a breath, I’m here to help.

I’ve designed and tested an email to look as good as possible at both desktop and mobile sizes, and I’m going to break down the code for you in a way that’s easy to digest. This is a long post, but I didn’t want to leave anything out – so stay with me!

Setting up header elements

The email will need several bits of code set up in the header. This includes everything between the initial <html> tag & the opening <body> tag. Start with the right Doctype – this will allow you to use all of the code to make it responsive. Here’s an example of how to implement a Doctype – it should be the first 2 lines of code:

!DOCTYPE html

Then the email needs the right viewport. Using this basic one will cause the email to scale to 100% on different screen sizes. Place the viewport before the <title>. Learn more about viewports here.

meta name="viewport" content="width=device-width, initial-scale=1"

Give the email a title.  Seems pretty easy so far, right? Now we reach the part where all of the CSS goes. CSS, or Cascading Style Sheets, is a quick + easy way to implement styles on all of the elements in the email. Elements are the components used to create the email – examples of elements include a <table>, <div>, or <img>.

Not all ESPs (email service providers) accept CSS, but we’ll insert some anyway to make the email look good across most platforms.

The code below targets all images in the email, using the <img> element. It’s telling every image:

  • no border
  • no outline
  • no underline of any kind
  • to keep their natural height/width proportions
  • not to stretch wider than their natural full width
  • to look smooth when resized (for mobile)
img {
  border: 0;
  outline: none;
  text-decoration: none;
  height: auto;
  line-height: 100%;
  max-width: 100%;
  -ms-interpolation-mode: bicubic;
  }

Then, add in the following code to prevent tables from creating extra space.

table {
  border-collapse: collapse !important;
  }

Now that we’ve added in some header elements and basic CSS styling, it’s time to set up a media query!

 

Media queries

Media queries are far and out the simplest way to make your email behave differently on mobile. Once you understand the syntax, media queries are easy to use + have a variety of uses. Here’s how to write a simple media query:

@media only screen and (max-width: 500px) { CSS mobile styling goes in here }

What’s the media query doing, exactly? When the screen size hits 500px wide or less (called the break point), the email will behave based on the CSS mobile styles you put within that media query. I like to go with 500px, because I think that’s the point at which an email needs to shrink to the mobile version. You can set your break point to be anything, and can even use media queries to target larger screens.

Then, it’s time to set up some basic styles. There are a few things I plug into every media query. First, I put my mobile class – this will make any element with a set width go to a 100% width. Using a percentage means the width of the element will be relative to the width of the screen. I also make sure all padding and margins are removed so it fills the space:

.mobile {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
  }

Keep in mind that class names are arbitrary. Use what makes sense to you, and make sure your system is easy to understand. Other class names for the mobile class could be wrapper, full-width, or container.

Writing out styles in classes means that you can apply that styling to any element using class=”classname”. If you want to target only specific elements, like a <table>, <div>, or <img>. you would write it like this:

td {
  text-align: center;
  }

That can be tricky though, as the above code would make all of the cells center, which you might not want. If you’re unsure, avoid styling elements altogether within media queries and use general classes that can target any element.

Now I’m going to set up a class to hide elements, and a class to center elements. The hiding will come in handy for hiding the desktop navigation, and the centering will be useful to center something at mobile. Notice how classes are simply separated by a line break.

.hideme {
  display: none;
  }
.center {
  text-align: center !important;
  }

My final class to set up will show some elements only at mobile, that are otherwise hidden at desktop. Don’t worry too much about what everything means, I’ll explain later.

.showme {
  overflow: visible !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: auto !important;
  font-size: 20px !important;
  }

Now that all of our main classes are set up, it’s time to turn to the HTML.

Building your email with tables

The members of the front end development team shudder every time they hear me say “table”. Tables are a pretty old-school method of HTML design, and it’s rare you’ll find a lot of modern websites using them. However, they are the only option for email development. Most ESPs are also old-school, and haven’t updated their rendering engines in years.

So, I’m going to use a lot of tables to make this email happen.

First, add this code to your <body> tag to make sure no margins or padding appear at any screen size.

<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">

“But wait!” you might be saying, “Why don’t we use a class for that?” Well, remember how I told you that ESPs don’t accept CSS in the header? It means we’re going to have to inline every style that we need in order to target every ESP.

Moving on. Between your body tags, plug in your first table and add this code to it:

<table style="border: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 600px; border-collapse: collapse;" class="mobile">

The most important thing to note here is that you put a set width on the table + gave it the mobile class. This means the email will be 600px wide at desktop, and then go to the relative 100% width once you hit a screen that’s 500px or less.

The email should consist of tables using this exact same code, all sitting on top of each other. Then, you place all of your content inside the different tables. The email is made up of multiple rows. Row 1 is the preview text, row 2 is the logo, row 3 is the navigation, and so on. Each row then becomes its own table that can be manipulated and styled individually, without affecting the other rows.

Remember too that some rows will be a table within a table. The navigation for instance, might consist of the main wrapper table (what has been outlined above) with one cell that contains another table, this one with 3-4 cells, each of which contain links that navigate to a different part of your website. I put navigation in my email template and you can see how I made it work.

Using classes to make your email responsive

There are 2 facets to responsive email design: starting with a mobile-friendly layout + knowing what you want to change at mobile. Mobile friendly layouts are usually one-column, with content being centered. Knowing what you want to change means deciding whether or not you want a mobile-only navigation, different social buttons on mobile, and/or different font sizes at mobile.

If you want something to behave differently on mobile, simply create a class under your media query, and append it to the element you want to manipulate. For example, my template includes desktop navigation that I want to hide at mobile. So I simply add this to my outermost navigation table:

class="hideme"

Then on mobile, the email recalls this piece of information (the hideme class I already created):

.hideme {
  display: none;
  }

Therefore hiding the table!

Another trick is to change font sizes. Usually, I make fonts larger at mobile. First, pinpoint what size an element is and what size you want it to be. If your first headline is 20px, and you want it to be 24px at mobile, make a class in the media query:

.twentyfour {
  font-size: 24px !important;
  }

Then add class=”twentyfour” to your <p> or <td> (whatever element contains the headline).

Alternatively, you can use <h3> to accomplish the same feat. In that case, wrap your headline text 0in the <h3> tag (even if it’s inside a cell). Then put this in your media query:

h3 {
  font-size: 24px !important;
  }

No need to add a class, as you’re already targeting that specific element.
One more trick is to show elements only at mobile. This is often useful for showing mobile-only navigation. As you’ll recall, we already created the ‘showme’ class. Here it is:

.showme {
  overflow: visible !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: auto !important;
  font-size: 20px !important;
  }

Then, you need to put together the table structure.  I have all the navigation links inside the cells. The code below will hide all of the mobile navigation at desktop, and show it at mobile. This is the order the elements needs to go in:

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; border-collapse: collapse;">
  <tbody>
  <tr>
  <td><!--[if !mso 9]> <!-->
  <div class="showme" style="mso-hide: all; display: none; overflow: hidden; max-height: 0px; font-size: 0px;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; border-collapse: collapse;">
  <tbody>
  <tr>
  <td>NAVIGATION 1</td>
  </tr>
  <tr>
  <td>NAVIGATION 2</td>
  </tr>
  <tr>
  <td>NAVIGATION 3</td>
  </tr>
  </tbody>
  </table>
  </div>
  <!-- <![endif]-->
  </td>
  </tr>
  </tbody>
  </table>

Now comes stacking.  Sometimes, a 2-column layout is the way to go. One popular way of stacking items is to put two cells side-by-side, then at mobile use this class to stack them:

.stack {
  display: block;
  }

This is a really simple method, and works perfectly almost everywhere – except Android 4.4 and the Gmail app.

I’m going to show you a way to stack that actually does work everywhere! Here is it, using a table structure + the center class to make the elements center at mobile:

<table cellspacing="0" cellpadding="0" border="0" align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 600px; border-collapse: collapse;" class="mobile">
  <tbody>
  <tr>
  <td><table cellspacing="0" cellpadding="4" border="0" align="left" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 300px; border-collapse: collapse;" class="mobile">
  <tbody>
  <tr>
  <td class="center">LEFT COLUMN</td>
  </tr>
  </tbody>
  </table>
  <!--[if mso]> </td> <td> <![endif]-->
  <td><table cellspacing="0" cellpadding="4" border="0" align="left" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 300px; border-collapse: collapse;" class="mobile">
  <tbody>
  <tr>
  <td class="center">RIGHT COLUMN</td>
  </tr>
  </tbody>
  </table></td>
  </tr>
  </tbody>
  </table>

Notice that I included the mobile class on all of the tables to make them 100% width at mobile, and I added the center class to the left and right columns.

See it all together

It can be hard to imagine how all of these bits and pieces I explained fit into a larger email, so here’s a quick wrap up of all the steps:

Responsive Template Code Screenshot

Making your emails mobile-responsive is important if you have a large mobile audience, and creates a better digital experience. It can be hard to know where to start, so I provided an email template for download that you can have for our own use (you’re welcome)!