When safe design...isn't

Latest posts | Feed | By Mark Brownlow on June 04, 2007

newsletter screenshotProfit from my hubris and idiocy. It's considered best practice by many to have a line of text at the top of your emails, directing people to an online version of your email.

It's there so people can still see your message, even if their particular webmail service or email client has turned your email design into a plate of spaghetti.

I always ignored this advice.

My newsletter avoids CSS and just uses tables, font and p tags. Since those tags are about as simple as you can get with html, I assumed my newsletter would always display as intended.

There surely can't be any webmail service or software that doesn't display the p tag properly, right?

Wrong.

Windows Live Hotmail clearly doesn't. See this screenshot of the latest issue (due later today), when displayed at that webmail service.

Still readable, but only just. There's no white space between paragraphs. Now I wonder what other idiosyncrasies are out there in the email world?

Tail tightly tucked between my legs, I've now put up an online version and linked to it from the top of the forthcoming newsletter.

Lessons learnt:

1. Don't assume...test
2. Start taking my own advice
3. See if Amazon sells a sackcloth and ashes starter pack

Any designers out there suggest a solution for Hotmail? Other than using line breaks instead of paragraphs to space out the text?

More on design and Hotmail | Tags: , ,

[This post brought to you by Campaigner Email Marketing]
Permalink | Add to del.icio.us | 12 comment(s) - add yours!
Get posts like this: as an RSS feed | as a biweekly newsletter
Sign-up for the Email Marketing Reports NEWSLETTER
Twice a month, free, packed with email marketing advice and all the posts from this blog.
Email:      First Name:     
    More info and sample

12 Comments:

The only solution that I am aware of is to use line break tags instead. My designers informed me that this is not "best practice" for web design, but unfortunately I think it is necessary for email design. I don't care so much about things like CSS in email or the like, but you'd think they could all read the most basic of tags like < p > correctly.
By Anonymous Cathy Conk, on 04 June, 2007  
 

Thanks Cathy. Have to admit the Hotmail thing came as a shock. But at least it knocked me out of the comfort zone.
By Blogger Mark Brownlow - Email Marketing Reports, on 04 June, 2007  
 

Mark, Your newsletter is also not displaying correctly in Outlook with images disabled. In today's email the Sherpa ad is causing your email to render incorectly as you didn't specify the image size.
By Anonymous Loren McDonald, on 05 June, 2007  
 

Thanks Loren - appreciate the info. Rats and double rats. Lucky I don't sell myself as some kind of expert.
By Blogger Mark Brownlow - Email Marketing Reports, on 05 June, 2007  
 

The fact that you recognize the problem and aim to fix it puts you pretty close to expert status! (In my opinion)

The missing paragraph breaks also occurs sometimes in AOL.com (I think it has something to do with nested tables?) unfortunately it's just a matter of trial and error until you get it right! Though the single break solution Cathy mentioned works fine!

As Cathy suggested, we usually use plain old single breaks - displays properly in all email
By Blogger Kelly Rusk, on 05 June, 2007  
 

Thanks Kelly. I obviously have a bit of tweaking to do before the next issue goes out.
By Blogger Mark Brownlow - Email Marketing Reports, on 05 June, 2007  
 

I have a similar email newsletter, though I don't use tables. I haven't had a problem with the p tag not displaying properly in Hotmail. Maybe you have to use the end tag /p?
By Blogger Dawn, on 18 June, 2007  
 

Thanks Dawn for the suggestion. I did use closing p tags, so perhaps it's a Tables thing. Anyway, I've switched over to line breaks and that seems to have cured it. No new design complaints so far...
By Blogger Mark Brownlow - Email Marketing Reports, on 19 June, 2007  
 

Yes, it's true. The < p > tag does not function in Windoze Live Hotmail. (I would actually call that a bug.) And as far as "best practices" go, the "experts" have so far proven to be almost completely wrong. With < div > and < style > being stripped out of Gmail (yes, even if the style block is defined AFTER the < body > tag!) that means we're pretty much back to tables and font/inline style definitions. So, then, back to 1999 we go to design the most effective-looking HTML-based e-mails...forward into the past, anyone?
By Blogger LaughingOtter, on 11 July, 2007  
 

Of course, the good news is that my design skills are in fact about 1999 standard, so it works for me ;-)
By Blogger Mark Brownlow - Email Marketing Reports, on 11 July, 2007  
 

It may be true that < p > tags should be used in regular web design, but email needs to be viewed as a different medium. We have been specializing in email design and coding for the past five years and have developed a number of internal "best practices".

We have found it's best to always use the line break character < br > instead of the < p > tag, due to the varying line-spacing different web-based email readers apply to < p > tags (in the case of Windows Live Mail, as you've discovered they have no line-spacing at all).
By Anonymous Aaron Smith, on 07 August, 2007  
 

you can try using blockquote. This should display as formatted in plain text.
By Anonymous Anonymous, on 24 September, 2007  
 

Post a Comment