I Switched To Plain Text Emails Only. You Should Too.
7 min read | November 24 2019
I recently changed my email client (macOS Mail) to operate exclusively in plain text for all new mail compositions and replies. It’s super easy to do in Mail on macOS- check it out:
I also got rid of all of my fancy HTML email signatures and swapped them for this beautiful specimen: (phone number redacted)
--
Jon Sullivan
Software Engineer
jonsully.net - (123) 123-1234
----------------------------------------------------Two dashes, a space (important), a carriage return, a few lines of text, then a boat load of dashes to signify the end of the message. It’s clear, concise, simple, and -most importantly- not up for interpretation. It’s just 👏🏻 plain 👏🏻 text. A sequence of UTF-8 characters with no additional information. All of my outbound messages send with the following header:
Content-Type: text/plain;which leaves no room for anybody’s email client to render my message wrong. My messages contain no fancy styling, no needless annotations, no suspect css attributes, no Outlook-specific formatting (damn you, Outlook), nothing but UTF-8 😎.
K. Why?
1. Plain text emails yield plain text email signatures which are painless, clean, reliable, and render the same everywhere.
Over the last few years I’ve created a few different html email signatures for various friends, family, and employers. HTML email signatures are the absolute worst. They’re on about the same level of tech pain as printers and email. Consider this- with most modern web code, you typically have to re-code the same code a few different times to make sure your site works the same and looks good on Chrome, Safari, Firefox, and IE, right? We have tools that make that process a bit easier but the point stands- each web client renders web code slightly different from others.
If modern email is comprised of HTML and your email client renders that HTML into a visual message, isn’t your email client a web browser? Taking a look at Email Client Market Share, last month’s numbers (Oct 2019) show all but one of the top ten clients eating up 1% or more of the email client market share. Each of those email clients has its own unique web code rendering engine that renders HTML slightly differently from the others. This means you have to add redundant, custom-per-client, annoying attributes and code to any email signature you create in the hopes that it will work across a large portion of the email client apps that may open that email.
Here’s an example. This is a very basic test signature with a logo that I threw together on Wisestamp. Visually it looks decent, right?
Now here’s the huge amount of html required to render that signature reliably across many email clients. Tons of repetition, everything in-line, just generally not great.
<table style="max-width: 470px;padding-bottom:10px;margin-bottom:8px" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="470" style="width: 470px;">
<tbody>
<tr valign="top">
<td style="width: 10px; padding-right:10px;"> <img
src="https://s3.amazonaws.com/ucwebapp.wisestamp.com/269dc1cb-65b0-4f50-b2d3-6947531df3c8/ITNStacked.format_png.resize_200x.png#logo"
width="65" height="58.7587822014" alt="photo"
style="border-radius:0;moz-border-radius:0;khtml-border-radius:0;o-border-radius:0;webkit-border-radius:0;ms-border-radius: 0;width:65px;height:58.7587822014px;max-width: 120px;">
</td>
<td style="border-right: 1px solid #45668e;"></td>
<td style="text-align:initial; font:12px Arial;color:#646464;padding:0 10px">
<div style="margin-bottom:5px;margin-top:0 !important"><b class="text-color theme-font">Test
Nmae</b><br> <span>Test Title</span>, <span>Test Company</span> </div>
<table style="width:470px;margin-top: 5px" width="470" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="color:#8d8d8d;font-size:12px;">
<p style="margin:0"> <a href="tel:Test Phone"
style="color:#8d8d8d;text-decoration: none;font-family: sans-serif;">Test Phone</a> <span
style="color: #45668e;display:inline-block;">|</span> <span style="display:inline-block;"><a
href="tel:Test Mobile"
style="color:#8d8d8d;text-decoration: none;font-family: sans-serif;">Test
Mobile</a></span> <span style="color: #45668e;display:inline-block;">|</span> <span
style="display:inline-block;"><a href="mailto:Test Email"
style="color:#8d8d8d;text-decoration: none;font-family: sans-serif;">Test Email</a></span>
</p>
</td>
</tr>
<tr>
<td style="color:#8d8d8d;font-size:12px;">
<p style="margin:0"> <span style="white-space: nowrap;display:inline-block;"><a
href="http://Test Site" target="_blank"
style="color:#8d8d8d;text-decoration: none;font-family: sans-serif;">Test Site</a></span>
<span style="color: #45668e;display:inline-block;">|</span> <span
style="display:inline-block;"><span style="color:#8d8d8d;">Skype: <a href="#"
style="text-decoration:none; color:#8d8d8d;font-family: sans-serif;">Test
Skype</a></span></span> </p>
</td>
</tr>
<tr>
<td style="color:#8d8d8d;font-size:12px;font-family: sans-serif;"> <span
style="color:#8d8d8d; display:inline-block;font-family: sans-serif;">Test Addy</span> </td>
</tr>
</tbody>
</table>
<div style="margin-top: 10px">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="padding-top: 10px;">
<td align="left" style="padding-right: 5px;text-align: center; padding-top: 0;"> <a
href="http://facebook.com/abc" target="_blank"><img
src="https://cdn.gifo.wisestamp.com/social/facebook/3b5998/16/0.png"></a></td>
<td align="left" style="padding-right: 5px;text-align: center; padding-top: 0;"> <a
href="http://us.linkedin.com/in/abc" target="_blank"><img
src="https://cdn.gifo.wisestamp.com/social/linkedin/0077b5/16/0.png"></a></td>
<td align="left" style="padding-right: 5px;text-align: center; padding-top: 0;"> <a
href="http://twitter.com/abc" target="_blank"><img
src="https://cdn.gifo.wisestamp.com/social/twitter/55acee/16/0.png"></a></td>
<td align="left" style="padding-right: 5px;text-align: center; padding-top: 0;"> <a
href="http://instagram.com/and" target="_blank"><img
src="https://cdn.gifo.wisestamp.com/social/instagram/E4405F/16/0.png"></a></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>Gross. Having written some of these HTML blobs from scratch and having had to dig through email client HTML renderer API docs to figure out which css attributes are even supported, I can confirm, it’s awful. Never again.
2. Plain text emails are a hell of a lot safer than HTML emails. They’re not perfect, but they mitigate a lot of the danger inherently.
I don’t need to talk extensively here. Anybody that’s ever had an email address knows how much spam, phishing, and other crap email boxes receive on a daily basis.
Plain text emails cannot disguise malicious URLs as safe-looking text that’s hyperlinked to the malicious location. Plain text emails cannot load potentially-malicious external scripts, stylesheets, or documents. Plain text emails can’t hide text that may fool spam filters by changing the text color to be transparent. Plain text emails can’t execute modern functional CSS tricks to change the hyperlink of a URL.. after the message has already been delivered. Plain text emails can’t track you by having invisible embedded Pixels. The list goes on. Read this article if you’d like to learn of more security benefits to plain text.
3. Plain text emails have no issues with dark mode.
I recognize that I’m a bit more on the functional side than the beauty side on this topic and that there are plenty of marketing departments at all sorts of organizations that will disagree with my thoughts above, but most rich-content emails look terrible when rendered in a dark-mode app. There are typically two ways this happens:
-
Some parts of the email get rendered in dark mode, some get rendered light - generally breaking all design and color principles that the marketing team was shooting for in the first place, or
-
The whole email gets rendered on a white background, hurting my eyes when the rest of my user experience is dark and my eyes were adjusted to it
Either way, I’m not a fan. The good news is that plain text emails carry no opinion on their coloring - the whole message is simply a string of characters, after all. Email clients like Outlook and macOS Mail have no issue converting plain text emails to dark mode. Sweet, sweet, dark mode.
Make it Philosophical
At the end of the day, email is meant to be just that - electronic mail. When I sit down and write someone a letter, there aren’t any fancy graphics, there’s no custom styling, and there aren’t any Litmus tests I need to run before they get it. It’s a letter. It contains information in written format. That’s it. Now my emails do the same 🙂
P.S. While not related directly to plain text emails, I also recommend disabling auto-loading remote content on all of your email clients. I promise the difference in person UX is almost zero and you can manually hit ‘load content’ on any message you actually care about. Pixels and other tracking mechanisms are awful and becoming ubiquitous.
Shout out to Raam Dev for getting my brain turning on this topic initially.