EmailDesignSeries

Working inside an email WYSIWYG editor is supposed to make your life easier, but often does the opposite. Have you ever had a font color change or a background color appear that you didn’t want? These issues can be frustrating, but there are ways around them. Creating “default” content blocks that you can easily swap in and out will ensure that font sizes, colors and styles, background colors and spacing will stay the same no matter who creates, edits or sends an email using your template. While this is important when editing an email across an organization, it’s also a good way for you as a designer to keep everything in your multiple-nested-tables no-floats limited-CSS world straight. All the content blocks described here can be swapped in and out of any content area, allowing for endless configuration of content without much design work.

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

Before You Begin

Before creating and placing your content blocks, you need to optimize your template for the email service provider you will be using. The instructions below pertain to ExactTarget but can be adapted to most other email service providers.

As a reminder, here’s what our template looked like at the end of the last step:

To optimize this for ExactTarget, you’ll want to insert <custom type=”content”> tags wherever you’d like customizable content areas to appear (You can also use the Insert menu to insert a content area into your template once you’ve pasted it into ExactTarget if you prefer). These tags don’t have a closing tag, so all you need is <custom type=”content” name=”Name of Content Area”>. ExactTarget requires that each of your content areas in a template have a unique name, so keep that in mind when naming each area.

After adding ExactTarget specific tags, your template will look something like this:

Creating your Content Blocks

Now that you have fully optimized your template for your email service provider, you can build each of the blocks of your email. To do this, you’ll always start with a table without cellpadding, cellspacing or borders:

Image Block

Although this block is pretty simple, because I want to give the image a bottom margin, and the CSS property “margin” doesn’t work in some clients, the image will need to be wrapped in a table. Wrapping the image in a table gives us the opportunity to add padding to the parent <td> as long as that <td> doesn’t have a width specified.

So, to give my hero image 20px bottom padding, I start with my placeholder image wrapped in a simple table:

Then, add style=”padding-bottom: 20px;” to the <td>

Remember to add the height and width declarations to the image, both in HTML (height= and width=) and CSS (style=”height: ; width: ;”). I do this via the Image Properties menu in ExactTarget once I paste the content block there to save time, but it’s important to do it one way or another so that your email content doesn’t jump around too much after enabling images.

You’ll also want to remember to add “display: block” to your image style to ensure there are no extra spaces under your image. Normally, you would also add some alt text, but since this is meant to be a placeholder for your “real” image, sometimes it’s best to leave it off, so you don’t end up with an email with “PUT YOUR ALT TEXT HERE” or “PLACEHOLDER ALT TEXT” as the alt text on all of your images.

To make this flexible for all users, I have added ‘align=”center”‘ to the <table> tag, which will center any images that are smaller than 600px. I also add the class “dashedBorder” to my containing table, because that will give the table a faint gray dashed border when using the WYSIWYG editor in ExactTarget.

Here’s what the above block looks like in ExactTarget’s WYSIWYG editor. I have created several placeholder images with the maximum width allowed for an image in each space, so that the end users can easily understand how to size their images for different spaces.

Heading Block

To create a stylized heading block, you’ll again start with your table sans cellspacing, cellpadding and borders:

Then, we’ll add 20px of padding to the top and bottom (we want 40px of space between each element, so 20px at the bottom of our hero image + 20px at the top of our heading = 40px of space combined) of the <td>. You can write this as “padding-top: 20px; padding-bottom: 20px;” or more simply as “padding: 20px 0;”.

Now, style your text the way you want your header to appear. In this case, we want a centered, 24px bold font in a slightly darker color than our body text.

And here’s what this block looks like in ExactTarget’s WYSIWYG editor. Although Calibri is set as the template’s font style, ExactTarget does not apply this font style in the editor, which is why it doesn’t look quite right.

After inserting the block into the template, however, the font changes to the correct one, and displays as below:

Regular Text Block

This is perhaps the most simple block of all, all you need to add to the standard blank table is padding on the <td> tag:

It’s important to note that again, the font styles and link colors will not appear as they do in the WYSIWYG editor in ExactTarget. On the left is the WYSIWYG editor, on the right is the block that has been placed already:

WYSIWYG Editor view

Template view

Combined Text and Heading

In the half-width blocks that alternate with images, simply add another row to the regular text block, and style that row in your heading style.

Here’s what our combined heading and text will look like after saving in the template:

Combined Image and Text

Since I knew that my left and right aligned images would always be the same size, I put in the columns on the template level, rather than in the content blocks. If you aren’t sure what size images your end users will be using, it’s a good idea to create a more flexible image and text block. Creating a block that incorporates both text and image elements is a bit more difficult, however, and requires some specific things to ensure that your image displays correctly in all clients.

You will again begin with the blank table that we always start with, but this time, we want to be sure we add ‘align=”left”‘ to our table. This ensures that Outlook won’t cut off the text to the right of our image.

Then, add the necessary padding to the <td> and add some placeholder text

Now, add a left or right aligned table without a width containing our placeholder image just before the placeholder text.

Next, give the <td> containing the image some padding on the side touching the text, and the bottom (in case the text is so long it wraps around the image)

This should display correctly no matter how long your text grows, or how large your image is (as long as it still fits within the bounds of your email). It gets a bit complicated on mobile, you may need to add a special class (the only time you’ll hear of me breaking my “don’t use classes!” rule) to handle whether the image’s parent table expands to the full width or if the text wraps on mobile as well.

Desktop View of Content Block

Mobile View of Content Block

If you would prefer for your image to be centered on mobile, with the text to follow, add a class to your image’s parent table (I like to use “fleximage”)

Then add the following to the <style> section of your template, in the @media screen section, so that it applies only to mobile:

Now, your image and text block will stack on mobile

If you have been following along with our series, you should have your email template skeleton, fully optimized for your email service provider, and all of the content blocks needed to fill in your skeleton for a full email build.

If you would like to skip out on all these steps, ask your Ascent360 account manager for a copy of our fully optimized skeleton template and standard content blocks today, complete with full instructions on how to adapt the basic template to fit your needs.

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

Check back next week for the last step: placing your content blocks and troubleshooting email clients!