How To Get Essential Text in Your Emails…& Still Make Your Graphics-Fixated Boss Happy.

This is a guest post from Dave Cleveland, a copywriter, graphic artist and marketer from Woodstock, VT. I’ve worked with Dave since I was knee-high to a grasshopper (read: a very, very long time) and he’s unequivocally one of my favorite people on the planet. Despite his alarmingly bad taste in politicians, he’s one of the sharpest, most creative people you’ll ever meet.

In a recent QLOG, Amy warned against sending emails that were all image and no text, because so many recipients these days have their images turned off, or they use a service like Gmail where many people have it set up that images are not loaded unless they say to load them. So if your HTML email is all image, none of your message gets through. Also, some email programs are suspicious of all-image emails, and label them junk.

But how DO you get text into your HTML emails effectively, using a program like Dreamweaver? This post will show you one way to do that. I’m not saying it’s the only way, but it has been effective, allowing me to have good-looking graphics for people who want them, making sure the most important parts of my sales message can be seen by people with their images off, and getting low SPAM scores.

First, create a master image of your email (I use Fireworks for this, but Photoshop or any other similar program will work.) In your design, create at least one place for text. You can actually put the type in as part of the image for now. The text doesn’t have to be a lot of text — just a paragraph or two is sufficient — but it should be enough that the major points of your email — including your offer, your phone number, and a link to start ordering — are covered there.

(The point here is to make it so that if this text is the only thing people see in their email, they can still get the main message of your email, and be able to start the ordering process by clicking through to your site.) Click here to see a sample email. You can and should still put the main parts of your message in your graphics, too.

I generally create the text as an image first, so I know it looks the way I want it to, and then I duplicate the text in a word processing or text file. Important — Save this word processing text and put it aside for a minute to use later, but don’t style it in the word processing program.

Then, slice up your image as usual, and be sure to put the entire text portion of your email in its own slice.

Next, go into your HTML creation program, such as Dreamweaver, and create a simple HTML table, with one column the same width as your master image, and with three rows.

Do NOT use Cascading Style Sheets (CSS) to style your email, or the text you will be putting into it. That’s because the most commonly used email programs can ignore the CSS info in your file header — so unlike web pages, CSS-styled emails may not look styled at all. Instead, you need to use old-fashioned “in-line” styling, which I’ll explain in a minute.

UOEmail So, you’ve now got a 3-rowed table. Leave the first row blank for now. In the second row, import your entire sliced graphic. Then, click on the slice that will contain the final text you’ve created and delete the text that may be in there now as a graphic, if that’s the way you created your master image. What you want there now is just an empty table cell. Here’s where we’ll use our in-line styling.

In DreamWeaver, set up your screen so it’s split between Code View and Design View, so you can see both. Click in the table cell that will contain your final text. In the Code view screen, you’ll see code that looks something like this:

Highlight the   part with your cursor, and substitute the following code:

Then click on the design portion of the screen. The words “copy here” should now appear in your table cell. (You may want to set the Horizontal table cell setting to “left” and the Vertical to “Top.”) You’ve just created your inline style, and are ready to put in the actual type you want, and change the styling if need be.

Go get the text from your word processing file, copy it, and paste it in place of the words “copy here”. (You can do this in Dreamweaver in the design screen or the code screen.) Your text will now appear, styled in Trebuchet, 11 px tall with a line height of 12px. Now, if you want a different type face, type color, etc. just make the changes in the code snippet, and your text will reformat when you click back on the design screen.

Email programs recognize in-line styling like this, and your email will look like you want it to in most email programs. (Use pixels instead of points for type sizes, as point size may vary some between Macs and PCs. I also suggest you use common PC faces like Arial, Trebuchet, and Verdana, so it will be likely your recipients will have that typeface.)

To get line breaks use the Insert line break command in Dreamweaver. To get bold type, use the Bold (B) button in Dreamweaver, so you will be using the >strong< styling. If you want to do some more research, you’ll discover you can control even more factors with such in-line styling.

We’re almost done.

We still have an empty top row, and an empty bottom row. In both, in code view you should put in your styling code again, so the words “copy here” appears in both rows.

In the top row, you can put your message about “click here if you can’t see this email”.

But I also strongly suggest you put in a simple text sentence that summarizes your offer or the most important message of your email — remember, this may be the first and only text your recipient reads, if his images are turned off.

In the last row, put your standard unsubscribe text.

And finally, go back to each slice or image in your email, and use ALT Text liberally. When the images are off, the ALT text is still visible in programs like Gmail. So use that text to explain your offer, repeat your phone number, emphasize your deadline, and more.

There. You have readable text in your subject line, your lead-in eyebrow, the body of your email, and in the Alt text. People can get a lot of your message, even with images off.

P.S. Make that message good enough — in all your emails — and your customers will start turning those images back on for you.

Chris Ziter, resident expert at Eight By Eight, adds:

1. Using a lot of and/or large images could trigger SPAM filters. Many desktop/server/gateway filters consider the balance between images and text when flagging as well as the image size.

2. Inline styles are stripped out of some email clients (Gmail, for example) so if you want to be sure the styling works, you need to stick to the antiquated <font> tags to declare font size, color, family, etc. I typically do a mixture of both so it “gracefully degrades” to the email client’s restrictions.

3. Dave has a design wrapping around a text area. If the user’s email/browser settings are set to display larger of if you don’t leave proper space below the HTML text for it to grow vertically, the content could break that area of the design (which may look sloppy). I try to avoid that when designing emails. And when I get a design that presents that issue, there is usually a way to work around it.