Email Design

Yahoo Mail Paragraph Spacing Being Eaten

Some weeks back we posted an article on our wiki which highlighted how Yahoo Mail had started to eat paragraph spacing in HTML emails. We also posted a fix for this (details in this post). We hoped that this was a mistake by Yahoo and, according to the Yahoo Mail Blog, it looks like it is.

The post on the Yahoo Mail Blog says they’ve had a “handful” of reports on the issue — mostly from email marketers, I’d guess — and that they are investigating. We’ve sent them over our evidence of the paragraph eating too; so fingers crossed they can get to the bottom of it.

We will keep you posted on any developments.

In the mean time, our suggestion to email marketers is to temporarily replace your HTML paragraphs with a double <br />. In HTML terms, this means:

<p>Lorem ipsum pro elitr delenit nostrum ne.</p>
<p>Lorem ipsum pro elitr delenit nostrum ne.</p>

Would become:

Lorem ipsum pro elitr delenit nostrum ne.
<br /><br />
Lorem ipsum pro elitr delenit nostrum ne.

Which is a simple enough fix and we’ve tested it across the following:

 
If you’re using a WYSIWYG editor, backspace your lower paragraph onto the same line as the preceding one, and then do hit Shift + Enter twice. It’s a pain for sure, but it looks hopeful that the Yahoo Mail team will get this fixed.

As for why this has happened, at the time we speculated that this may have something to do with a particular aspect of YUI (the Yahoo User Interface library) being applied, wrongly, to Yahoo Mail’s email rendering panel.

YUI is an excellent framework of utilities and controls that allow web developers to add rich interactivity to their websites. A core component in the library is YUI Reset CSS, which effectively zeros all HTML document elements (including the margin-top and margin-bottom on your paragraphs). The idea is that you then semantically reset all of the attributes yourself to what you want them to be, thus forcing web browsers to render your web pages exactly as you imagined: what looks right in Internet Explorer, should also look right in Firefox, Opera, and Safari, because you’ve removed the browser’s default settings.

It’s a brilliant idea, but definitely not right for a user’s inbox. We will be keeping a close eye on this and will update our readers as soon as Yahoo roll out a fix.