Sending HTML emails using Thunderbird

What happened to email formatting options? Do people either send plain-text business letters with a default signature and some simple formatting, or do they think they need to book an expensive third-party service to control the padding and alignment of their content? Aren't we developers?

I tried formatting an HTML mail in Thunderbird. I needed an extension to do that. HTML Source Editor did the job, at least for me as a web developer.

How to code mail markup

A handy rule of thumb that might still be relevant in 2024: think of travelling back in time! If you're old enough, remember Netscape and using table elements for layout.

We can mix old and new styles to achieve maximum compatibility. And remember: think of all HTML attributes and style elements as optional! They might not be supported or ignored on purpose. Much like using reader view in Firefox or printing a website to a PDF file.

Every style might be ignored

So we should keep everything simple and don't rely on light or dark mode. Here is a test that looks differently in different email clients. Thunderbird and GMX web mail respect my colorful borders, Google mail doesn't and displays the mail black on white like in reader mode or printed on paper. My mobile mail client, K9, applies dark mode and shows light text on a dark background, inverting the intended design.

After zooming out and blocking the page ads, my mail starts looking like I thought it would at least in my GMX mail client.

But all clients respect some of my font choices, padding, and render a readable version that looks better than without using any page formatting at all.

Page height and a centered "paper" table

If we want to use a background color, let's make sure that it covers the whole page even if there isn't much content. Otherwise, mail clients might cut our page and continue with unintended white space.

I tried to set min-height: 100% to the page and the layout table, but that doesn't work reliably. So we better make sure to include enough content in our email.

Interactive buttons

My centered action button even has a hover effect!

a.buttonlike {
    box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, .125);
    font-size: 12px;
    transition: box-shadow .125s ease-out, font-size .125s ease-out;
    /* ... */
}

a.buttonlike:hover {
    box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, .25);
    font-size: 14px;
}

A pragmatic template

A pragmatic template, inspired by popular layouts used in many newsletters sent via HubSpot or MailChimp, features a centered content column with limited maximum width framed by a solid color border/background.

Accessible color contrast

To ensure compatibility and readability, the foreground color should be readable on all background colors used. This still leaves many design options. We might use pink or a light green tone as a background, and a white or light-toned piece of paper on top.

Technically, the background color can be set on the document body using pre-HTML5 attributes, inline styles, and document head CSS. Our paper column will be the only table cell of a table set to a width of 90% but capped to a maximum pixel size like 900px. Our white(-ish) background, black foreground color, font size, and font family can be set redundantly for the table, the table cell (TD) and any descendant nodes like headings (H1, H2), paragraphs (P) and font tags (FONT). Remember that font size attribute values are not measured in pixels. <font size="3"> is a regular medium size, so <font size="6"> is roughly two times larger.

Before HTML5, allowed attributes for the HTML BODY element included

• background to define a background image,
• bgcolor to set the background color, and
• color, link, vlink, and alink to set the colors of text, links (A elements), visited links and active links.

We can't define hover states using body attributes, but as I showed you before, we can mix traditional HTML with modern CSS in our email templates. I was surprised to see that even modern web browsers seem to respect those old attributes.

My mail template uses only three colors:

• the foreground text color (black)
• the background color behind the text (white or light)
• the decorative border/background around/behind the table (not too dark so that the black text is readable on the decorative background as well).

I will define the same styles in the document head ...

html, body,div,p,table,tr,td {
    font-family: Roboto,Helvetica,Arial,sans-serif;
    font-size: 12px;
    color: black;
}
h1,h2 {
    font-family: Roboto,Helvetica,Arial,sans-serif;
    font-size: 20px;
    color: black;
}
body {
    background: #f7ebcf;
    min-height: 100%;
}

... and add some redundant markup in the body:

<body color="black" bgcolor="#f7ebcf">
    <table style="border-radius: 10px;min-height:100%" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td style="padding:10px;background:white;color:black;font-family: Roboto,Helvetica,Arial,sans-serif;font-size:12px;min-height:100%;">
                    <h1 style="font-size:20px">
                        <font size="6">

How to test and improve

Apart from the composition preview, open your email using all the clients you can access. Send it to inboxes of different email providers, as they might modify incoming mail, especially if it ends up in a junk mail/spam suspicion folder.

Inspecting raw headers

Also examine your subjects: how does it look when they get truncated? Do you think it's safe and professional to use emojis? How does it look in a legacy client or when recipients use custom system fonts?

Examine your headers! Ensure your sending client includes a plain-text version in a multipart/alternative container. Did relays or incoming servers add custom headers like a spam-score revealing how likely your message has evaded being treated as unsolicited?

Compare your mail to other mail you get: newsletters, professional, and personal conversations. How do they look? How do they differ? What specific markup do the others use to achieve the outcome?

Reading/converting encodings

Once an email has been sent, its source code often becomes hard to read thanks to the classic quoted-printable encoding, which is remotely similar to url-encoded strings. However, every encoded token begins with an equals sign (=), and a mandatory new line is added after each maximum character count.

This encoding ensures that modern content can be transmitted via legacy network relays that only support 7-bit ASCII encoding. It makes the content hard to read and unsuitable for copy-and-paste. But there are online decoding services like dencode.com/string/quoted-printable

Use and extend your template

Save your markup template as a plain text .eml file.

Open a new (HTML) mail in Thunderbird and click on "HTML source" (or a similar button title in the top right menu or the formatting toolbar). Mark and delete everything and replace it with the content of your saved template file.

Forward or open as a new mail

If you don't see an option to open a saved or sent email as a new one, try clicking on "forward" or "redirect". Thunderbird should open a composition window that allows you to edit everything. You can use the source/markup view again to remove unwanted insertions, like a forwarding header with a timestamp and quotes around the subsequent content.

Apply the template and proceed visually

Click "save" and close the markup view. Continue to compose your message in the visual editor. You can write text, use the built-in formatting options, and add images.

You can save copies of your email to your drafts folder. You can also open the HTML source view again, copy the new content, and save it to another .eml file.

Save, preview, and restart

Send a preview of any new message to yourself, using as many different clients as possible, before sending it to external recipients.

Don't forget that some settings modifications require restarting Thunderbird before taking effect (like changing the SMTP server authentication method to use STARTTLS), while others don't. If in doubt, restart! Remember: using email is so old-school that we must act like we're in the year 2000.

Conclusion

Don't tell your customers about this technique, and don't try to offer this as a service! Email is a tricky target with many pitfalls and incompatibilities, like back in the days of the "browser wars". Nobody wants to edit table markup in a nerdy Thunderbird extension in 2024, and third-party marketing services exist for a reason.

But if you want to send emails using a slightly more beautiful and professional design as a web developer without subscribing to an external service, a centered, single-cell layout table on a solid color background might save your day!