EmailDesignSeries

Have you ever had an email template break or render incorrectly? Well, you aren’t alone. Trying to design an email template for a wide variety of users can be quite challenging. From misunderstanding CSS to having difficulty sizing images, a lot can go wrong in email design. One way to solve some of these problems is to design your template with user flexibility in mind by using the “content blocks” approach.

What this means is that you’ll first create a heavily commented “skeleton” of your email, with very little to no content at all, that contains all fixes for various email clients and any notes about the design. From there, you’ll create the rest of the content as standalone HTML “blocks” that can be dropped into various spots within your skeleton. This is especially handy when using an email provider like Exact Target, which has a way to save content for a drag & drop design experience.

Before you begin

In order to get the most out of this guide, you’ll need a bit of knowledge about designing HTML emails. MailChimp has a great reference guide for getting started. Although the sections on template language and site specifics may not apply to your template, the tips and tricks found here can help you in creating your template. You may also find the Campaign Monitor Guide to CSS Support in Email helpful, as not all CSS elements work the same way in all email clients.

To get a copy of our fully optimized skeleton template today, ask your AscentCRM account manager for details. If you are not an AscentCRM client, sign up for our newsletter to receive a copy of our fully optimized skeleton template instantly.

Step 1

To begin, you should have a good idea of what your template will look like, whether it’s via a visual mockup created in an image editing program, or an on-paper sketch of where content will go.

EmailMockup_Drawn

My sketch of the AscentCRM Newsletter

EmailMockup_Drawn

The finished product

Step 2

From here, you’ll start with a main table that will contain your <head> section (including the <style> section). This is where you can set the background color of your email. You’ll want declare your background color in two places: once on the body, and once on the main table.

Step 3

Next, you’ll want to build your main body table. This is where all of your content will go. You’ll set the width of this table to the width of your email content. In this case, it’s 650px wide.

Step 4

From here, using your mockup, create a basic layout of what your email should look like. This step is mostly about setting up the places where your content will go, and any content that will be in every email (like the view in browser link, header and footer), but avoid putting in any content that the end user may want to change or fiddle with later. Try to leave out any padding or spacing in areas where you will be placing content. That spacing can always go in the content blocks themselves, and adding spacing and padding in your skeleton will lead to having extra space if you decide not to fill all content areas.

You’ll notice if you look through my code below, I’ve commented every row with what that row should contain. This helps differentiate between the zillions of nested tables you will eventually have in your email code.

I’ve used tables with a width of 49% for the two column areas, and tables with a width of 30% for the three column footer, rather than just utilizing a two or three column table for these areas. Tables are used because they are easy to manipulate for mobile – they’re already block-level elements, so all that’s needed is to adjust the width for mobile screens. But why 49% instead of 50? The answer is, predictably, Outlook. Outlook adds extra width to each table, making your tables larger than you might anticipate. Setting them to 49% will allow for this extra padding to be added without breaking your tables. I use 49% if I want two columns, 30% if I want three columns, and a two-column table inside of a table with the width of 49% for four columns. Generally, any more columns than that tends to look overwhelming, even in the full-size version of your email.

Below is what your email will look like when you’ve finished with this step. Although it doesn’t look like much, all of the structure is there, plus any graphics, text and links needed for the header and footer. The advantage of building your template this way is that any unused areas simply collapse – which is exactly what is showing here. Because there is no content in any of the “main” content areas, the browser ignores that part of the table.

Template_finished

Step 5

Now you’ll need to add a couple of things to the “@media screen and (max-width: 480px)” area of your <style> section to ensure everything works correctly on mobile. Each CSS rule is explained below

CSS Rules

html, body {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
This ensures that there is no padding or margin added to the body or html tags, and that they shrink to 100% on smaller screens.
table {
font-size: 110% !important;
line-height: 1.25;
}
This rule makes font sizes larger and line heights taller on mobile, making text easier to read and links easier to click.
table[width=”650″] {

width: 100% !important;

min-width: 100% !important;

height: auto !important;

}

This rule finds any tables with the width of 650 (your outer header/footer table) and shrinks them to 100% on smaller screens
table[width=”600″] {

width: 95% !important;

min-width: 95% !important;

height: auto !important;

margin: 0 auto !important;

}

This rule finds any tables with the width of 600 (your inner content table) and shrinks them to 95% on smaller screens
table[width=”49%”] {

width: 100% !important;

min-width: 100% !important;

height: auto !important;

}

This rule finds any tables with the width of 49% (the side by side content, for example) and shrinks them to 100% on smaller screens, which stacks the content inside into one column, rather than two.
table[width=”30%”] {

width: 100% !important;

min-width: 100% !important;

height: auto !important;

margin-left: 0 !important;

margin-right: 0 !important;

}

This rule finds any tables with the width of 30% (the footer columns, for example) and shrinks them to 100% on smaller screens, which stacks the content inside into one column, rather than three. This also removes the margins, so that there’s not wasted space on either side.
table[width=”49%”] table {

margin: 0 auto !important;

}

This rule centers any smaller tables in a two column table on mobile, so that if your content is smaller than the screen width, the content will center.
td[class=”mobile_hide”], table[class=”mobile_hide”], .mobile_hide{
display: none !important;
}
Using this class, you can hide anything from the mobile view that is usually seen on the full view of the email. For example, in this email, the compass image to the right of the logo gets hidden on mobile, and the logo stretches to 100% width.
img {

width: auto !important;

max-width: 100% !important;

height: auto !important;

/* This centers the image. Remove the below if you don’t want your images centered on mobile*/

margin: 0 auto;

}

This ensures that your images won’t expand beyond your screen size (you won’t get horizontal scrolling). All images will show centered, at their normal size, unless that size is beyond the width of the screen, then the image will be shrunk to 100% of the screen width (and the aspect ratio is kept the same)
/* This makes the bottom dividers turn into horizontal instead of vertical on mobile*/
table[class~=”divider”]{
width: 100% !important;
margin: 0 auto !important;
}
table[class~=”divider”] td{
border-top: 1px solid #5381aa;
border-left: 0 none !important;
height: 1px !important;
padding: 25px 10% 0;
}
This switches the “divider” tables in the footer (they’re what make the light blue lines between the sections) to be horizontal on mobile, rather than vertical, so the content is still broken up, but there aren’t any strange vertical lines hiding out on the mobile version.

If you have followed the above directions, you should now have a perfectly styled email “skeleton” that you can use for a multitude of email styles.

Ask your AscentCRM account manager for a copy of our fully optimized skeleton template today, complete with full instructions on how to adapt the basic template to fit your needs.

If you are not an AscentCRM client, sign up for our newsletter to receive a copy of our fully optimized skeleton template instantly.

Check back next week for the next step: creating your content blocks!