Why is email development so painful?
If you live half your life in email as so many of us do, chances are you aren’t too fussed about what your emails look like. As long as they get to where they need to go.
But if you partake in any sort of email marketing, including email blasts, newsletters, blogging, sales pipelines and promotional EDMs, you know that optimising email on different screens and email clients while maintaining brand cohesion, a nice aesthetic, total functionality and relaying your message is really quite painful.
The good news is, you don’t need to be an expert in email development to produce effective and aesthetic emails.
On the other hand, the standards are getting higher. Because we rely on email so much in not only our day to day professional comms, but also for marketing, sales and brand activities, it’s now really important for us to be sending top quality emails to our audiences.
If an email does not display correctly, 71% will delete it immediately (source). Yikes.
I think in recent years email marketing and email service providers have really advanced and I’m so glad that they are no longer as much of an eyesore. For this reason I think consumers are no longer very forgiving of substandard emails, so I’ll attempt to explain how it all works so you don’t get demoted to the junk folder by your clients/customers and you can maximise your ROI.
P.S. Almost half of the world’s email is considered spam (source). Yikes again.
A quick disclaimer that I’m by no means an expert on this topic. I’m giving a somewhat basic explanation based on what I’ve picked up and what I think is helpful to know, if this is something you’re struggling with or curious about.
So, why does it suck?
Email is written in HTML (HyperText Markup Language) - the standard markup language for documents designed to be viewed in a web browser.
Emails are created in HTML but rather than being rendered in a web browser, this is of course done in your email client. Rendering = the content visualised, so the code transformed into your text, images, boxes etc.
Unfortunately email clients do not render with the support and features available to us using the web. The state of how they render may be (very, very loosely) akin to how web pages rendered decades ago.
This means that there are far less options for features (think dynamic features like elements that move) and styling - so we can really only use the most basic HTML and CSS available to us along with outdated conventions, compared to what we’re used to when developing for the web.
Some things we often have trouble with in email development are font and form styling, fixed positions, background images, animations and transitions, and HTML5 elements pertaining to audio and video, and so on.
The lack of support and updates that occur for email clients means that it’s difficult to get visual consistency and incorporate engaging/interactive elements in email.
This is also why you often need to do a lot of testing across email clients and devices.
I don’t know whose fault this is, it’s just the way the cookie crumbles…
How the cookie crumbles/How it works
In 2007 Microsoft Outlook’s rendering engine switched to Microsoft Word's HTML and CSS rendering engine. This means that when you go to create an email for Outlook you basically are creating a word document.
That’s also why if you look at the HTML of an email you will often see the most cursed use of table elements. Tables are the predominant formatting tool in Word and so therefore they must be used in email, too.
For web-based email clients like Gmail, it’s a whole different story. Gmail has its own way of rendering HTML and CSS code in emails, which has its own limitations and quirks.
Some email developers use conditional code to target Gmail, allowing them to provide alternative styles that just work better in Gmail while not affecting other clients.
I use an email marketing platform, how is this relevant to me?
Most people use an email marketing platform like Mailchimp, Flodesk, Squarespace, Hubspot etc. which helps us create visually appealing email using drag and drop editors.
Having an understanding of email development best practices and being able to troubleshoot is not 100% necessary for individuals but for businesses sending out regular EDMs it’s very advantageous.
You’ll be able to:
Have a higher level of customization that is simply not possible with many platforms
Troubleshoot rendering issues and have higher compatibility across email clients
Create a more responsive design
Clean up the code to improve performance and deliverability, and more
Security takes priority
Do you every feel like the more heinous a platform’s UI is, the more secure it is? Maybe it’s just me… but in my mind this is a common trade off.
You’ll be happy to know that email clients very much prioritise security over all else.
Because modern web technologies can pose security risks if used in emails, to protect users from potential threats, email clients place restrictions on code and features. This limitation forces email developers to work within these constraints.
Weird things that happen in emails and why
e.g. 1. You forward an email and it turned into a mess
The email has been styled using CSS which is commonly placed in the <head> tag. Email clients like Gmail remove everything in the <head> tag when you forward that email. Goodbye styling.
e.g. 2. You’re using dark mode and the email content isn’t adjusted like web-based content would
Some email clients (Apple) support colour inversion when you’re in dark mode, most don’t. Some, like Gmail, invert everything for you. So when you design your email, it’s best to make sure it looks good as normal and inverted.
Tldr; how do I get the best results in email with minimal effort?
There are lots of little rules when it comes to email development, and even then broken down into discrepancies across clients.
When creating an email template, think of it in the context of a Word Document but worse because you don’t exactly know how it will render.
Start really simple and build from there. Have a content-first approach - add the flashy components after you’ve nailed down the flow of the content so that you can cut back easily if you need to.
Consider hiring someone to help with your email templates if you do want something more advanced.
Mailchimp has a good basic overview of the limitations of HTML Email and what you should avoid when crafting your EDMs.
Credit: Mailchimp
In the above, “Use with caution” mostly means that these features are only supported by some email clients. For example, Google doesn’t support @font-face.
This is a big topic and there are many more reasons why email development is its own beast. So, I’ll finish with this: embrace the table.
I’ve also written an article that identifies common email development anomalies as well as how to fix them, which you can read here if you have issues you need to troubleshoot.
As always, feel free to reach out to me with any questions! Happy emailing.