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

In Part I of this tutorial, I went through the steps of slicing the email within Photoshop before beginning the development. In this tutorial, I will go through the steps of modifying the exported HTML for text expandability and proper rendering in the majority of email clients.

Tutorial Files from Part I and Part II can be downloaded here.

Let's Get Started!

First, Open up your HTML file within your code editor of choice. I will be using Dreamweaver CS5, but other good options are Komodo Edit and Espresso (30 day free trial).

Here are the initial steps you should take care of:

Add the doctype to the top of your html file

• Depending on your Photoshop settings when you save your slices and HTML for the web, your html file may or may not have the doctype declared. If it is not present, make sure you declare it. I am removing "<html>" and inserting: <!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">

Remove entire meta tag row within the header

• There are two reasons for this. First, all email clients ignore the content-type that is defined within the meta tag of your HTML. This is because the email server automatically sets the content-type for you within the header of the email. You can change this value, but you will need direct access to the email server.

• Secondly, since the meta tag is being ignored, it becomes unecessary code that the server and email client has to read. Removing the meta tag (and any other unnecessary HTML) will reduce the size of the email, increase the speed in which it is delivered, rendered within the email client, and received by your client.

Set the background color on your body tag and remove leftmargin, topmargin, marginwidth, and marginheight if present
Place the subject line between the title tags
Remove the id (if present) and height from the table tag

• We are removing the id as it is unneccessary code. The height needs to be removed because we are making our email expandable, allowing it to grow if an email client automatically resizes our text or if we decide later to send out the same template with different content.

Now we can start coding our email to be expandable and replacing image text with live text. When I refer to live text, I am referring to using web-safe fonts and text in replacement of an image that contains text that can be converted this way. Slices that contain graphics, photos, or illustrative fonts cannot be replaced with live text.

Images that do not contain graphical text should be converted to live text to aid in both deliverability and speed in which your email loads. Some spam filters will mark your email as spam if it does not have a "optimum" image to text ratio.

The screenshot below details which slices will be converted to live text:

Converting to Live Text in Action:

Combine the <td> tag and the <img> tag by removing the src and alt from the img tag, but keeping the width and height.

For example,
<td colspan="4"><img src="images/08.gif" width="570" height="35" alt="" /></td>

will become

<td colspan="4" width="570" height="35"></td>

Add the background color of the slice to your new td tag:

Insert your text in between the td tags.
Style the live text as accurately to the creative as possible.

• You must declare the font family and size with plain HTML font tags. This is for cross-email-client compatibility - your text will not display properly in the majority of email clients if you do not use the font tags. Then you can add inline CSS that declares the font-size and color. Line-height is another CSS attribute you can use. Please see this chart for HTML font size to CSS font-size comparisons:

HTML Font Size	CSS Pixel Font-Size
1	10, 11
2	13
3	15
4	17, 18
5	22
6	26

Your td tag should now look like the following:

<td bgcolor="#3d4852" colspan="4" width="570" height="35" align="center">You are receiving this email because ______________ Having trouble reading this email? View it in your browser. Click here to unsubscribe.</td>

Do the same with the remaining live text slices, changing the font sizes where appropriate.

Expandability in Action:

In order to account for different email clients rendering text, line-heights, fonts, sizes, etc. differently, you have to make the areas around your live text expandable. To do this, you convert your image to a background color. Obviously this won't work for images that contain graphics, but more on that below.

Go through each td tag on the left and right side of your email that has the dark grey background color. Ignore the slices that contain the blue ribbon for now. Convert each image to the background color, as we did for the live text areas, keeping the height and width of each.
Now, go to the images with the blue ribbon that are next to your live text. The way we will make these slices expandable to the live text is we will ADD a background color to the td tag, but not remove the image. We are also going to align the image to the bottom so that if the text grows, the blue ribbon will be pushed down to follow the email. If this happens, the background color we have added to the td cell will also grow, preventing breaking.

This is how your table row should look like, containing the live text:
<tr>
<td bgcolor="#3d4852" valign="bottom">
<img src="images/11.gif" width="115" height="58" alt="" /></td>
<td bgcolor="#eaf4f7" valign="bottom">
<img src="images/12.gif" width="18" height="58" alt="" /></td>
<td colspan="3" bgcolor="#eaf4f7" width="552" height="58">A collection of textile samples</td>
<td bgcolor="#3d4852" width="115" height="58"></td>
</tr>

This is how your email will look if additional text is added and your email needs to expand. You can also see how if a different email client renders a font size slightly different, you won't be stuck with a white line break through your email, the ribbon would be pushed slightly down instead with the correct background colors.

Email Development

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

Let's Get Started!

Converting to Live Text in Action:

Expandability in Action:

Congratulations! You have coded your first email for expandability and cross-browser, cross-client compatibility!

© Copyright 2011 Allison Stone. All Rights Reserved