Developing Emails for Cross-Browser, Cross-Client Compatibility: Part I

I will be demonstrating how to slice and code a free email creative I have found off of campaignmonitor.com. Although Campaign Monitor allows you to download templates, this tutorial will show you how to develop an image-based email from a creative file, such as a PSD, JPEG, PDF or GIF.

All of the source files for this tutorial can be found at the end.

Let's get started!

Before we begin slicing our email creative, we need to set our guides in place. Since the majority of email clients still only render ancient HTML (and only support some CSS), our emails have to be coded in tables and nested tables. This means that when we place our guides, we require a holding row.

Your holding row will be a horizontal row of slices that are never combined. This row will hold your table together when you combine slices in other rows. It doesn't matter how small or large your holding row is, as long as it is present. An important key to remmeber here is your holding row cannot contain live text (images only).

When slicing the remainder of the email, we need to account for expandability in the event that text changes and becomes longer or shorter. In order to do this, we will be using background colors on our table cells (where applicable, more later) instead of image slices. To slice your creative, take the following steps:

1. Place one guide on each side of the template where the grey background meets the white background.
2. Drag a vertical guide on each side of the text, one where it begins and one where it ends (if there are instances where text is indented or on different vertical planes, you may need to place additional guides, as in this example with the bulleted list).
3. Place horizontal guides above and below the text areas that have different indentations or where there are images that cannot be transformed into background colors, such as around the headlines where there are blue ribbons.
4. Make sure to also include horizontal guides around photographic images as well as graphic images that cannot be turned into background colors, such as the dotted gray line.
5. Lastly, ensure your header and footer area have guides that separate them horizontally and vertically as well.

Next, click the slice tool and hit "Slices From Guides". Combine image slices horizontally (NOT vertically!) where appopriate, but remember to keep the far left and far right slices separate as we are going to convert them into background colors for expandability. Also, remmeber not to touch our top holding row. See my combined slices below:

Everything in green has been combined horizontally. Some of the dark grey sides have been combined with the center areas as the entire row will not need to expand for text so there is no need to have background colors at all for the entire row.

Do NOT combine anything vertically! If you need to create an email that requires slices to be combined vertically, you will also need to have a vertical holding row in addition to a horizontal one.

Lastly, create a folder in your project directory or desktop and save your slices for the web. Make sure you export both the images and the HTML.

Note: Stick to saving images as .GIF and .JPEG! Stay away from .PNG as most email clients are behind on the development times and do not support .PNG files.

On to Part II...