Blog: Event marketing
HTML email is scary. Your marketing emails look great when you hit send, but how do they look at the other end?
12 May 2022 minute read
HTML email. Two words that, when combined, strike fear into a web developer’s heart.
And if you rely on beautifully crafted email communications to persuade people to attend your events, you should be a little afraid too.
Because things are not always as they seem in the magical world of HTML email.
You can spend ages designing and crafting perfect HTML emails, only to have them look like a total mess when your customer opens them. The reason for this is that there are lots of email clients out there and they all render the emails you send to users in a variety of ways.
An email client is the program that lives on your computer and lets you send or receive emails. Basically, email client vendors haven’t been as progressive as web browser vendors in adopting common standards.
And while web browsers and devices have become vastly more powerful and sophisticated, email design is somewhat stuck in the past. If anything, the problem has worsened with the growth of mobile devices and the proliferation of email clients.
First, the basics
When you design an email, the approach is pretty similar to how you’d design a website: think about your audience and what you want them to do; then create a design that meets those ends.
More than 50% of emails are opened on phones, so make sure your design is mobile-friendly, and gets to the point, because you’re working with limited screen space.
Also, make sure your email mostly makes sense without images. Some people set their mail clients to block images within emails by default. Use alt text on images so they can be ‘read’ instead of viewed.
Lastly, be careful with your visual design, because you’re much more limited in what you can do within the confines of an HTML email. No complex animation and no interactivity besides links. There are also certain CSS properties such as background images that don’t always work, so you’ll either have to avoid them in your design or get used to coding clever hacks to get around the limitations.
And now for the weird stuff
Email development is a bit like the Forbidden Forest in Harry Potter. It’s deep, like the Forbidden Forest. It’s vast like the Forbidden Forest. And it’s dark, like the Forbidden Forest.
But instead of Aragog the massive spider, you have Microsoft Outlook.
When we build event websites, we make sure that they’re perfectly functional and look gorgeous in every modern web browser: Chrome, Safari, Firefox, Edge and others.
Email isn’t so simple. You’re still doing cross-client compatibility checks – you look at your email on iOS Mail, Gmail, Yahoo!, Outlook, and so on. But many email clients just don’t handle HTML and CSS the way you’d expect.
For example, since 2007, Microsoft Outlook on Windows uses the HTML engine from Microsoft Word to render emails. That’s right! They use a word processor to render HTML.
And it gets weirder. Many email clients don’t support various CSS properties (like positioning), CSS selectors (like .class), or even entire HTML tags. Some email readers rip out anything you put in a <head> tag – and there goes all your CSS!
But the quest must go on, so new techniques were invented to accommodate the plethora of strange behaviours displayed by email clients. Instead of writing CSS in a <style> tag, we plant all of the CSS on each HTML element directly, known as inlining:
To build layouts, we must use HTML tables instead of CSS grid, flexbox or floats. You know tables – those things we stopped using for layout on the web more than a decade ago? It turns out tables are one of the few things that work consistently across mail clients.
Are you still there?
Don’t worry, it’s not as bad as it sounds! We’ve established that building emails is scary. But thankfully, there are a ton of resources out there to make it easier.
First off, all that stuff about tables? Don’t sweat it. These days, there are great open-source tools that let you code emails in a simpler form of HTML, that is automagically converted into the complex, battle-tested HTML you need. They can also help you with all that weird CSS business, or help you bundle up your email for final delivery.
In 2013, the open source project Ink (now called Foundation for Emails) was launched, which took the Bootstrap/Foundation-style 12-column grid and converted it to use tables, allowing you to easily build grid-based layouts in an email. Since then, other tools such as MJML have sprung up to help streamline email development
You’ll still have to be careful how you write your code though. For that, I suggest a few resources:
Campaign Monitor’s Ultimate Guide to CSS: a support table that shows you what CSS you can and can’t use in various email clients.
The Litmus blog and Email on Acid blog: two great blogs on all things email: design, copywriting, development, and more.
You’ll also need to test your emails, to make sure they work in all of the major desktop and mobile email clients, plus popular webmail services.
Thankfully, you don’t need a spare PC with an ancient copy of Outlook 2003. There are dedicated email testing services that let you upload an email and then generate screenshots of the email in whatever clients you want. Two of those services are Litmus and Email on Acid.
Email marketing services like MailChimp also have email testers, so you can test and send your emails all in one place.
These tools make it easy to test your email on dozens of mail clients at a time.
Brave the Forbidden Forest and drink the unicorn blood of beautiful emails
So what have we learned?
Deciding to code and maintain your own HTML templates in-house is not something to be entered into lightly.
Building reliable HTML emails takes courage and a lot of patience. Old school tables are somehow good again, and Microsoft Outlook stubbornly plays by its own rules.
Thankfully there are years and years of collective knowledge out there to help you, and some great open-source tools to streamline things.
Of course, if you’re still worried about getting your HTML emails to work every time, you can always elect to use an enterprise-grade email system like the one built into AttendZen.
We constantly monitor and update our email engine to take account of the latest changes in mail client compatibility. Our robust templates make it easy for our users to create the beautiful, branded emails they need – without having to consult a developer – safe in the knowledge that their design and messaging will look right, every time, for every customer.
Think of us as Hagrid.
Or Dumbledore. Honestly, I’ve not read it.
