37signals Inspires With A Comprehensive, Helpful Transactional Email

[ 0 By


Transactional emails are a frequently missed opportunity for companies, non-profits, and the like. In a past post, I described how they have a higher revenue per email, transaction rates, opens and click rates than bulk mail averages, yet they are paid little to no attention. In fact, 53% of transactional emails aren’t even controlled by the marketing department! As a result, they are often in plain text and lack personality & branding — simply put, they’re boring.

As a result, when I see a not-so-typical transactional email, I feel almost obliged to feature it in our inspiration series! When Paul forwarded me this email from 37signals, I was impressed with its simple design & comprehensive, helpful content.


The design of this email is so simple, yet it looks so much more sophisticated than just plain text. The light beige background color adds a very subtle pop of color to the email and the whimsical font of the “Thank you for being a customer!” text adds a little personality to the email. These two aspects make this email stand out from typical transactional emails.

The torn-edge images lend a receipt-like feel to this transactional email

Another really simple, yet unique touch are the receipt-like images that border the transactional information. It makes the email look like a virtual receipt — that is the point of a transactional email, after all. This virtual receipt visually separates information that isn’t directly related to the payment — such as changing the account over — by not including it “in” the receipt. That’s effective visual hierarchy hard at work, and I love it!


Another great aspect of this email is the comprehensive, helpful content. All of the information included in the email is extremely relevant to the subscriber — 37signals doesn’t include extra promotions or clutter in the email.

The transactional content:

  • Billing date
  • Invoice number
  • Billing name & address
  • Description of purchase
  • Link to account
  • Amount charged

This transactional content is something you’d expect to find in an email like this. They also add some additional information that I rarely see in transactional emails, such as how the charge will appear on your credit card statement. Very helpful!

Besides the transactional content in the receipt section of the email, the other information in the email is relevant and helpful as well. For starters, the email starts with a simple header, “Paid Invoice,” which perfectly sums up the content of the email — it’s a receipt for a transaction. In addition, under that there is a fun line of text that thanks the recipient for being a customer — this is a nice personal touch in the email!

There are also two buttons towards the top of the email, which are very helpful. One is to update your credit card information and the other is to change the account owner. These are extremely useful in situations where credit cards are expiring or when job roles are changing — they are a great addition to the email. Lastly, the email ends with a simple link to “upgrade, downgrade, or cancel your account.” By including these links, 37signals ensures an effortless experience for their  customers — they don’t have to go searching around on the website or in their account for these important links.

37signals covers all the bases in this transactional email! Nice work.


Some webmail clients (Hotmail, Yahoo! and Outlook.com) will strip the <body> tag from emails. Since 37signals includes the beige background color in the <body> tag of this email, it doesn’t display in some webmail clients.

Email viewed in Outlook.com

To combat this issue, be sure to double-up on crucial background colors, specifying the desired color once in the <body> tag and again in container <div> or <table> cells.

We also noticed a few other rendering issues. After taking a peek at the HTML, I was able to figure out why — the email is written with standards-compliant web markup, which unfortunately doesn’t work consistently in email. Since 37signals is a web development software company, it’s not a surprise that their HTML was written this way.

Some examples: using 3-digit, or shorthand, HEX colors — when these are used in <table> or <td> tags, black or blue backgrounds may result, instead of the color specified. The best way to code a background color in an email is with the HTML bgcolor attribute with a 6-digit HEX code.

In addition, the email renders a little funky in Outlook 2007, 2010, and 2013 due to some HTML that isn’t supported in those email clients. For example, margin and float are used in their layout, neither of which are supported in newer Outlook clients. As a result, rather than having the “use a different card” and “change the account owner” buttons side-by-side, they are stacked on top of one another:

As much as it pains us to say this, the best way to combat these issues would be to use a table-based layout. By moving these buttons from using float for positioning to placing each in their own column in a table, the intended layout could be preserved in Outlook clients.


Do you have an email that you’d like us to feature in our inspiration series? Send it to us at inspiration@litmus.com!