HTML Email Builder

Explore

HTML Email Builder
HTML Email Builder

Ben Lee

⁠

Packs Page

⁠

Copy this doc

⁠

We all want our emails to look great and catch attention, but email clients don’t make it easy. There are more than 30 different email clients that all interpret HTML code in a different way. Not only that, they each choose different CSS style elements to support, so things like border-radius might be supported in one and not another.

Writing code for a styled email sends us back to the dark ages of the internet with what are now considered to be terrible coding habits with nested tables and inline styling. Work is tedious, redundant, and non-transferrable. This pack aims to remove the pain-points of the code so you can concentrate on what really matters, the content.

Where this idea started

Back in 2018, I was an outdoor school instructor at REI and Coda was still in beta. They launched a few new features that changed the way I have thought about docs ever since. These features were buttons and packs. Buttons make data actionable and packs let you connect to other systems, with Gmail being one of the first.

I realized I could send my timesheets to my managers with the click of a button instead of copying their always broken Excel spreadsheet, patching it up, and sending an attached file. Not only could I send an email, but with some digging into formulas, I realized I could wrap that time clock data in HTML and send a styled email.

Here is the template I created and what I actually used to submit my weekly timesheets at REI.

⁠

Clocking in a Timesheet + Gmail Log your hours worked and email a weekly timesheet with the Gmail 📩 coda.io⁠

⁠

I was now clocking in and out on my phone and sending professionally styled email reports to my managers with the click of a button. I mentioned to my brother-in-law that I was pretty sure I could create anything in Coda. Email newsletter campaigns were top of mind for him at the time so he laughed and said, “so you think you can create MailChimp in Coda”. Challenge accepted!

⁠

HTML Email Newsletter Planning-Sending-Logging Send HTML emails with Coda's Gmail Pack! coda.io⁠

⁠

This setup is 3 years old now and has a fair amount of complexity to overcome to get it working, but it’s still picked up, used, and I regularly receive messages about it. I hope this pack makes the above two things much easier and I can’t wait to see what you all create.

Design concept

Quite a few years ago (2013), TED was reworking their website and they posted a blog article about their design decisions. I haven’t been able to track that article down again, but I’ll be sure to link it here if I ever do find it. Their challenge was not only that their content types were different, but that they would be adding more types as the site grew...and they didn’t know what all of those types would be. Their answer? Pancakes!

If you build a site that looks like a mix of Tetris blocks, it’s very difficult to add or reconfigure content later on, it’s inflexible to say the least. If you have flat and full width content blocks, you can stack as many as you need, in any order, with each being any type of content you can think of. So, the analogy of stacking pancakes defined their strategy. The idea of infinite flexibility stuck with me and I adopted the same mentality for this pack.

Structure

There can be quite a bit of header and footer code, so I started with a formula called EmailCode() that will wrap your email content. There are 3 parameters being the email title, content, and footer. The title doesn’t show up visibly, but is picked up by accessibility systems like screen readers, so it’s helpful to have it. The footer is small “read the fine print” text at the bottom of the email and is a great spot for a tag line or copyright. That leaves the middle chunk, the good stuff, your content, otherwise known as the pancakes.

With our stackable structure, each layer needs to be wrapped in some of those nasty nested table tags and inline styling. Most of this is repeatable, and yes, that makes it programmable. So we switch through various content types substituting out the right details when necessary, while only requiring that you state what style type you want as a parameter in the formula ContentBlock(). The pack currently has the following content style types.

Type

Description

Takes Content

Takes Link

Default Alignment

Large header/title

Left

Medium header/title

Left

Title

Bold header/title

Left

Subtitle

All caps small title

Left

Paragraph

Paragraph text

Left

Image

Full width image

Center

Avatar

Centered image cropped to a circle

Center

Logo

Left aligned image on its own line

Left

Button

Left aligned button on its own line

Left

Spacer

A 30px vertical spacer

None

Divider

A 1px horizontal dividing line

None

Wrapper

Wraps custom HTML with necessary table tags

None

There are no rows in this table

⁠

You can add as many of these as you’d like, in any order, then combine them to be your content that makes up the middle parameter of the EmailCode() formula.

Some content not only requires different HTML code, but you might want to iterate through several items and have them all wrapped in those tags. For these types, we added them as their own formulas.

BulletedList()

FacePile()

Table()

We have a wide range of styles, but also a few limitations. We can’t pick up markdown code from Coda and turn it into HTML, so each paragraph will either need to be its own ContentBlock() or you’ll need to enter your own HTML line breaks, <br><br> inline with your content. If you add any HTML that contains quotes, Coda replaces these with “smart quotes” in text areas, so you’ll need to make sure you use regular quotes. The visual difference, slanted verses vertical, “ ". Subtle, I know, but they are actually considered different characters by computers, so we need to use regular quotes.

Accessibility

We mentioned at the start that HTML emails are full of redundant code and styling. This turns into a nightmare for screen readers and other accessibility tools. We’ve checked off several boxes that will help mitigate most of these issues.

Set the language: <html lang="en"></html>

Include header title tags: <title>My Email Title</title>

Defined character encoding:

Set content tables with role="presentation"

Included an optional parameter to add alt="" text for every image, even in a face pile

⁠