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

No related posts.