Emails without tables

It is possible! You just need to forget a couple of email clients.

At Attentive we started developing a new Reporting email. The requirements were that this report would have insightful information about a Team’s Sales Pipeline. We would send on the first work day of the month a Slack message and email.

The email and the Slack messages would also have a PDF version attached.

When we started to spec out the implementation we started investigating how to build the email we came accross an article by Litmus where they mentioned emails without tables.

Building an email without tables is a dream come true. No more endless nesting of HTML tables would produce much cleaner and easy to maintain code.

After doing some proof of concept we got to the solution. Using django templating we built the full email (with css classes and all). We uploaded this final product to a Digital Ocean space to make it available in the browser. Afterwards we sent the email through a premailer processor to make all CSS inline (so forwarding the email works properly). And finally we sent the HTML to a PDF renderer and attach the PDF to the email and the Slack message. Here are some screenshots of the final product. The data shown is from an Attentive demo account and all the data is dummy.

Design

The email we sent

Final Email

The mobile version

Mobile Version

The PDF

We are very happy with the outcome. Let me know what you think or if you have any questions about any specifics.