Stephanie - this is the second request I've come across this week for visual examples, and I'm definitely listening.

I don't have a ready-made arsenal to send you, but I will do a future article that's visually based, something like the hall of fame with great examples and the hall of shame with bad examples, so you can compare the two side by side.

report abuse

vote down

vote up

Votes: +6

Can you send a link to some good examples? Or email some to the email address I provided? That would be great.

report abuse

vote down

vote up

Votes: -1

We received this question via email:

Question: If you were briefing a designer, what application/s would you specify he or she use when building content rich emails?

Answer: Designers don’t need to use any special tools – they can use the same HTML editors they normally use to build Web pages or other HTML content, such as Macromedia Dreamweaver or Microsoft FrontPage.

What they need to be aware of, however, is that HTML editors are built for Web browsers, and will do things with the CSS that just won't work for email. The email creative may look great in a Web browser, but look totally different in Outlook or Gmail.

The most important thing is that designers use the features available in these tools to do “inline CSS,” instead of creating external style sheets or coding styles in the header and body sections of the code in a way that Microsoft Outlook and Gmail don’t honor. Knowing exactly where to put the inline CSS (on “td,” “p,” “table,” “span” or “a” tags, for example) and what types of CSS commands work in email clients is something they generally have to learn through trial and error.

report abuse

vote down

vote up

Votes: +0

In your Dreamweaver preferences, uncheck "Use CSS instead of HTML Tags" in the General Tab. It'll allow you to do old school HTML.

report abuse

vote down

vote up

Votes: +1

Don't forget - some clients like Hotmail and Gmail even disable the alt tags! Sometimes you have to come up with a few tricks so your design can "gracefully degrade" - for example - use graphics, but find some way to echo them textually - and only use them if they are necessary and relevant.

report abuse

vote down

vote up

Votes: +0

I disagree with the graphics comment. I believe graphics are totally fine with alt text. At least your message gets across either way. You should obviously try to use the least amount of graphics, but using a few isn't a bad thing.

report abuse

vote down

vote up

Votes: -3

Alex, I'm specifically referring to what can be seen in the "preview pane" or "reading pane" of various email clients. It varies from email client to email client, and even within Outlook (depending on whether the user sets the reading pane to "right" or "bottom"), but it's basically the tiny portion of your email that can be seen automatically, before a user opens your email, displays in full view or scrolls.

I loosely define the "preheader space" as whatever's in the first line or two of your email - whether it's image or text. Some email clients display this information in the inbox, beneath the subject line, and it's important to use it properly to entice readers to open your message. Read our article, Power up Your Snippet Text: http://lyrishq.com/content/view/92/96/.

(Your comment just spurred me to double-check our newsletter redesign and see what we've got in the preheader space. I realized to my chagrin that we've currently got a spacer gif, which doesn't exactly spur the reader to take action. It's now at the top of my list to fix before the next issue.)

To your point and Steve Kessler's below, I'm not advocating abolishing graphics. We're visual creatures. We respond to them. Used properly, of course they work better than text alone.

What I'm really advocating is that email marketers take responsibility for how they use graphics, with a full understanding that oftentimes they will be blocked. I'm a big proponent of using HTML backgrounds, colors and fonts to build your visual elements wherever possible - they do the trick, without leaving Xs and greyed out areas all over your email.

It sounds like your company is doing things right, by using a text-based preheader call to action, supplemented with graphics.

report abuse

vote down

vote up

Votes: -1

Are you referring to the pre-header space of the email? I have found a mixture of a good pre-header and an eye catching image can be an excellent combination when tested against all text in the top 300 or so pixels.

report abuse

vote down

vote up

Votes: +0

Everybody, thanks for the comments and the clarifications. Keep them coming! I apologize if I overstated things by saying "Outlook 2007 doesn't support CSS."

I'm not a designer, I'm an email marketer who works with designers, so my understanding of design lingo may have been a tad bit off. We coded our newsletter primarily by putting style elements inside of pieces of "td" code (or at the level of table cells, for all you HTML newbies).

That's what I mean by "inline coding," and my designer, Dean Silvestri, clarified that that's basically the same as "inline CSS."

If my language was a bit too strong, it's because I was pulling my hair out over a mystery Outlook rendering issue that I'll be blogging about in detail at the end of this week. We experienced some very strange rendering results, and it took much wailing and gnashing of teeth to diagnose.

Adam's link to the "MS Info on Changes" was my Bible last week, as was this guide by the Email Standards Project, that lists quirks for Gmail and the other email clients, too: http://www.email-standards.org...ook-2007/.

report abuse

vote down

vote up

Votes: +1

Outlook 2007 does not ignore CSS completely, it just supports a "subset" of CSS (as shown in the link by Adam Parikh). In fact a lot of the standard CSS works for Outlook, no matter if in header or body (except the background images)
BUT: there's Gmail, and they just radically purge everything no matter where it is, so CSS does totally not work there. To be safe, you have to use and all the old HTML stuff :,(

report abuse

vote down

vote up

Votes: -2

Anita,
Thank you for sharing this information with the online community. I did not know about some of the oddities of Outlook 2007.
I am going to have to disagree with you about pictures. Though, you don't want to email users to not be able to read them if they don't download pictures you must find the balance where they rely want to so we can track their opens. More and more users are learning how to accept images in their email clients.
Equally important is that having a log at the top of the email is critical for branding. Make sure you have catchy text as well but the image is important for branding. Your subject line is why people open your email (statistics argue) and your email itself needs to match your brand.
Graphics and colors are indicators of our brand even if no one reads our email and helps us remind and inspire our contacts.

report abuse

vote down

vote up

Votes: +0

In addition to CSS Outlook 2007 does not allow for forms. We had a search box in our emails that we had to remove for MSO 07 users.

MS info on the changes
http://msdn.microsoft.com/en-u...38201.aspx

The comments in this article are big help.

http://windowsitpro.com/article/articleid/93346/outlook-2007-html-forms-are-out-css-is-in.html

report abuse

vote down

vote up

Votes: +1

Practically all mail clients outlaw CSS. Google, Yahoo, Outlook... The best thing to do is use antiquated HTML 1.0 crap like and ... That really screws with a designer... trust me I know.

report abuse

vote down

vote up

Votes: -2

my email: This e-mail address is being protected from spam bots, you need JavaScript enabled to view it

report abuse

vote down

vote up

Votes: -1

Hello Anita,
You make the statement that Outlook 2007 completely ignores CSS information, and then indicate using inline formatting information. This would normally be done using CSS inline coding (style="font:..", etc. with tags in the body), but still CSS none the less? Or are you advocating outdated font tags, etc.? Please advise.

Thank you,
Brian Hurst

report abuse

vote down

vote up

Votes: +2