I see a lot of emails every day. A lot. Most are good, some are great and few have some mistakes. Most of the issues are relatively minor and may not affect display or perception of the email at all.

But every once in a while I see something that makes me stop and say “Really?”

Here’s some of those “Really?” mistakes and some tips on how to avoid them.

Not designing for the preview pane.

Seriously, who actually opens an email anymore? Most people just look email in the preview pane without ever double-clicking to open it. So why would you design your email like they would? That 1000+ pixel wide email might look great in your maximized browser window, but what happens when the recipient looks at it in their 700pixel wide Outlook preview window? A deleted email, that’s what. There’s really two big factors in at play here, the size of the preview pane and the fact that the inbox is a terribly busy place. You don’t have much time to make an impression and not a lot of space either. So what to do?

• Don’t design too wide. Try to keep the total email width between 600 and 700 pixels. That range will most always display within the preview pane. Sure there might be a few recipients out there with even smaller preview panes but most recipients should have no problems with 600 – 700 pixels.
• Get your company logo in the upper-left corner of your email.
• Try to keep your call to action above the scroll in the top third of the email. Typically you’ve got about 400 pixels of vertical area to work with.
• Consider adding a table of contents to the top of your mail so that users can at a glance see what you’ve got in the mail.

Assuming images will work

Most email programs turn off images by default. Users have to click a button or right click on a image to load the images in a mail. It’s a privacy thing. So always assume that images will be turned off when the mail is delivered and don’t count on recipients turning them on. Send a test of your mail and look at it with the images off. Does it still make sense?
What to do about “images off”

• Add alt-text to your images. Alt-text is an attribute that is added to the image tag in the HTML, it includes a short description of the image. You might add something like “Our latest sprocket. Right-click here to view the image.” Much more compelling than the little red broken image box, eh?
• Don’t put important content into images. The good stuff goes in text, the images support it.

Too many images, not enough text

Yep, we’ve seen it too many times. the email that’s just one (or two, or three) gigantic images all displayed in a line. Sure, it looks magnificent but it’s empty on the inside. Send out an all image email or an email in which the only text is a link or two and you’re bound to be dismissed as spam. Like we said in item one, the inbox is a busy, busy place. People make gut decisions about what gets sent to the junk folder and marked as spam and emails made of one big image are the first to go.

No plain text version

Why would you pass up the text version of your email? It’s a simple way to make sure that your email is accessible across the widest possible audience. I know that the great majority of users have the capability to view HTML email but the are some who don’t and some who choose not to receive HTML email. Emails delivered through ReachMail are sent as a two-part message, one part HTML, one part text. These multi-part messages allow the correct content to display for each user. If they’ve set their preferences to not display HTML email then the text only version will show up. Of course if you didn’t fill out the plain text copy of the mail then they get nothing.

Too fancy

Like I’ve said before, the inbox is a very busy place, you don’t have much time to make an impression. Simplify, man, simplify. If you’re sending a promotional mail don’t jam all your fancy graphics and words into the mail. Consider a short, compelling message that gets people to click a link. Once they click the link they’re engaged and on their way to your landing page where you will blow their mind with lovely graphics and spellbinding copy. Bonus, you can look at the link tracking and see exactly who clicked a link and then follow up with them.

As always, if you have any questions, feel free to get in touch with me at dnielsen@reachmail.com

Designing emails is always a tricky process. If you’ve ever talked to me about a design you’ve probably heard me say “neutral” so many times you think I have a Swiss flag tattooed over my heart. What I’m actually referring to is creating a neutral display document, one that displays the same way in all major email programs.

Neutral display is important to an effective email campaign, if you’re mail looks great when viewed in Yahoo! webmail but not so great in other mail programs and Yahoo! addresses are only 10% of your list… Well, you do the math, that adds up to a whole lot of people who aren’t getting the full effect of your mail campaign.

Before we go on let’s have some background on emails. Most emails sent today use HTML (HyperText Markup Language) markup to make the email more useful. HTML is the language that web pages are coded in and enables emails and web pages to do things like display images and embed links. HTML is an interpreted language, meaning that it’s display is subject to the program that is accessing the file. That’s the effect that you see when a mail that looks nice in a Yahoo! inbox but looks terrible in an Outlook 2007 inbox; different programs are interpreting the same code in a slightly different manner. When we speak of making an email neutral we’re talking about normalizing the code so that all programs display the mail accurately.

But wait, there’s more. CSS (Cascading Style Sheets) enters the scene and adds another wrinkle. CSS is the presentational layer of the web. It changes fonts, colors, etc. You name it, CSS can change it. Over the past few years CSS has been gaining ground as a way to layout and organize web pages. Without spending too much time on the concept, the new standard in the web-design community is to use CSS positioning to arrange the elements of a web page rather than the older practice of using tables to layout the web page.

So how does this effect your emails? Well, most mail programs do not support all of the CSS rules which style and position elements. Also, CSS rules are typically referenced in the head of an HTML document, which is often stripped off in some mail clients (GMail and Outlook notably). If all the CSS was in the head, then nothing will display as planned when the head is cut off. The rule-of-thumb is to keep your CSS styles inline with the element that they are modifying.

So can I use CSS to position elements in my emails?

No. Though it’s not the current web standard tabled design is the only way to created horizontally positioned elements (i.e. Side by side columns).

Well, then what CSS rules can I use?

CSS rules for fonts (colors, sizes, face, etc.), padding, borders, and background colors work well in all mail programs. Outside of those, you’re risking display inconsistencies.

I want to use an HTML file to create my mail, what should I watch out for?

Make sure that all CSS in inline and not in the head in the document or external stylesheets. Check to make sure that all the images have absolute paths. Most importantly make sure that it is a static HTML page. URLs with dynamically generated content (e.g. php or asp pages) will not work.

I made an email in Microsoft Word saved it as an HTML file. Can I upload it to ReachMail?

Not likely. MSWord was never designed to produce HTML documents and does not do a good job of creating well formed, valid HTML documents. Your document might work on the web because browsers are more forgiving of imperfect code than mail programs, but odds are that it won’t work well at all if you try to mail it.

Can I use Dreamweaver or another desktop HTML authoring program to create my mail?

You can get satisfactory results with Dreamweaver provided you follow the guidelines mentioned above.

The best advice I can give is to test, test and test some more to make sure that your email looks it’s best in all different mail programs.

If you have any questions about design or have an HTML problem that you can’t solve, feel free to get in touch with me at dnielsen@reachmail.com

Welcome to the third installment of ReachMail Piece by Piece. I hope that our first two editions were helpful. If you haven’t read them yet, you can brush up on you’re reporting skills here and your list management skills here.

This week we’re discussing control.

Did you know that you can create multiple ReachMail users and set the areas of your ReachMail account that they have access to? You didn’t? Well you can, and you should. Seriously, if you have multiple users logging in with one ID I strongly recommend that after you read this post you go create individual logins for each of them.

User access controls feature a high degree of customization. Just about any configuration you can think of is possible in the user controls. Want a user who can only run reports? No problem. How about one who can only access the image library and upload lists? Can do. A user who can only access specific list? Absolutely. You can even remove mail approval access for a user. They can schedule a mail but it needs your approval to be delivered. And of course you can also designate a user as another account administrator.

You can find the user management tools in the Account Manager tab and you can watch a short video here.

And as always, if you have any questions or concerns that you’d like to discuss with me directly, you can find me at dnielsen@reachmail.com