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
-
backgroundto define a background image, -
bgcolorto set the background color, and -
color,link,vlink, andalinkto 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!
Top comments (11)
Title says "sending emails", and post explains composing emails. where is the "sending without using any third party service" part? Am I missing something here?
That's Thunderbird, a local open-source-software, as opposed to paid marketing services that businesses tend to use to send "professional newsletters".
(Note to current readers: the original post title claimed that I send "HTML email without using a third-party service")
You're still using a third party service. You should probably update the title to be "without using a paid service". The current title is inaccurate and misleading.
If you count Thunderbird as a third-party, then I will never be self-reliant. I did not code Ubuntu Linux, I did not manufacture my laptop, and I don't provide my own electricity. Or which other party do you mean?
Well, if we are talking about free third party services for mail marketing, there are a few options here, for example: selfh.st/apps/
A third party service is an service provided by a party that isn't you. In this case, you're using Thunderbird for the sending of HTML emails.
I clicked in here originally to see what someone had done to keep sending HTML emails in-house, but was disappointed. Cool project, just a bad title. "Composing your own HTML emails in Thunderbird" would be a lot better.
I think you're right. I have changed the title.
Appreciate it! This will help interested folks find your article a lot easier too. 😁
Hmmm... Now I'm curious with the whole "can I send bulk email in HTML using only my services?"
I know that with python this is a "10~20 line of code script" but I would need a SMTP server that is trusted anyway 🤔
(kudos to Ingo for listening - but I'm still curious 🤷♂️)
Haha that's what I was expecting to find with the original title. A home-hosted mail server project or something.
I used to have my own email/newsletter sending script, written in Perl back then, with random delays, rotation of subject line variations, and tests against some well-known spamassassin heuristics. If I remember correctly, the document body was a contenteditable textarea that only worked in Internet Explorer. But the outgoing mail server was just the one that the shared hosting provider provided. I guess some of my customers got their mail servers on block lists eventually. So many reasons to leave sending bulk mail to a dedicated service.