Bulletproof lists in HTML email

Sometimes <ul>, <ol> and <li> elements can behave weirdly in certain email clients. Your list alignment can be all over the place in every email client, and all in different ways.

The way to fix this is not to use a list at all.

The absolute best way to achieve bulletproof lists in HTML email is to create a table with an &bull; character (or your chosen marker) in one column, with the content in a column next to it.

Some sample code is below:


Dailymile’s Pro Announcement Email

From: dailymile
Subject: Introducing the all new PRO from dailymile

Dailymile’s Pro announcement email is quite nice — I like the subtle ‘vintage’ style and distressing. It’s quite out of line with the actual landing page, though, which is the epitome of dribbble polish.

A few weird things — their ‘view online’ link just takes you straight to the landing page, not an online version of the email, which is kind of annoying. Secondly, their secondary CTA in the copy is a tiny text link which should have also been a button, it’s easy to miss especially on mobile. At least it does have plenty of space around it to allow for easy finger tapping on the ol’ iPhone or Android. Finally, it’s a bit weird that their logo doesn’t appear anywhere on the email. Perhaps this was an oversight, or it could have been on purpose — there appears to be a bit of rebranding going on.

Outlook 2007/10 + Borders = Pain

I thought I had everything sorted when it comes to Outlook 2007 and 2010, but I forgot the fact that it can be so weird about borders.

The two things I learned today are:

1. Always remember to use border-collapse: collapse on your tables in Outlook, and

2. When Outlook is displaying a 2px border when you asked for a 0px border, remember that (weirdly) shorthand works better for borders in ALL email clients.

This page really helped me out — turns out that, unlike any other attributes, borders benefit from being written in shorthand, i.e:

border-top: 1px solid #000000;

So there you go. That eliminated all of my woes in Outlook, where I was trying to specify a border-bottom-width of 0px.