HTML Email Design – The Yahoo! Paragraph Tag Conundrum

Unica’s Marketing Innovation Summit was a rousing success! Three days of panels, presentations, demos, awards and networking translated into more educated customers, partners and naturally Unicans. I wanted to share one of my post-mortem learnings on the blog that resulted from a question posed during our Best Practices For Email Design & Deliverability session: how do you efficiently code emails for the Yahoo! webmail client that doesn’t automatically put a space between paragraphs denoted by the <p>Lorem Ipsum</p> tag?

Normally when you code an HTML email using the <p> tag, a space is added between the blocks of text that are contained between the opening and closing tags. However, Yahoo!’s email client does not render paragraphs with a space between them. Instead paragraphs start on the next line after the closing tag and have the same behavior as using a single <br> or line break tag. This can be rather frustrating and lead to lots of <br> tags in order to allow a document to “breathe” by leveraging white-space and line breaks.

In the eDesign Optimizer example below you can clearly see how the next paragraph starts on the immediate line after the previous one:

Since I’m not an HTML designer by trade, more like a jack of all trades by necessity, I reached out to our good friends at Smith-Harmon for an elegant solution to this perplexing problem. Aaron Smith offered up this gem: wrap each chunk of paragraph text in a DIV tag and use the margin-bottom in-line style declaration to create the desired spacing.

Here’s the code that created the spaces you see in the above example:

<div style=”margin-bottom: 12px;”>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

So what’s the advantage of this vs. <br> tags or other spacing mechanisms?

• This happens to work on all major platforms so it won’t cause problems at Gmail which doesn’t support style sheets but does support in-line styles.
• This doesn’t require a ton of code to implement and allows for easier maintenance than putting in at least 2 or 3 <br> tags between each paragraph or using a table and or spacer.gifs to layout the text.
• Since you can specify fonts, colors etc. in the style tag it actually reduces the number of individual tags you need in order to achieve a specific look and feel for your email.

Basically this is a win-win solution. The only real problem arises with very old email clients that may not support font declarations in a style tag such as Lotus which has virtually no support for CSS. Give this a twirl and see if it makes your coding life easier and more efficient. If you have another solution and care to share it here I’d be game to not only see it, but test it using our rendering tools.

Cheers!
-Len Shneyder
Director of Deliverability & Messaging
Unica | Pivotal Veracity