How to embed HTML in an email without your mail client screwing it up
Written by someone who learned how to write HTML through Neopets and MySpace
Spoiler alert: Don’t rely on style sheets, even if it’s part of your HTML body
I am far from being a web developer or someone remotely skilled at building a website. I can mess with templates and figure something out, but anything past HTML and CSS is beyond me.
Lately, at work, I started running two different newsletters that I wanted to be embedded directly in an email.
Why not just use a newsletter service or attach it as a PDF?
That would be too simple 😅
No, it’s because I want the emails to come directly from me rather than some external sender that my readers won’t be familiar with. I also feel that people don’t want to take the extra step to open a PDF.
I’m also a bit of a masochist apparently.
Write your newsletter code
The first step of all this is to have HTML for your newsletter! Our company uses Braze for marketing campaigns, so I took an HTML template from there and edited it to my liking.
If you’re savvier than me, you could start from scratch!
I tested all of this in a code editor and by opening the .html file in my browser.
Dropping HTML directly into an email
If it weren’t for my colleague, Jennifer, who works with me on my office newsletter, it wouldn’t have occurred to me to do this.
Once you’ve gotten your newsletter the way you like it, open up a new email message.
We use an internal email system called Verse at IBM, so that’s why I’m sharing this delightful workaround.
Next, I get real fancy and inspect element by right clicking in the browser.
I hover my mouse over where you can start typing in the content of the email. See where it says <!DOCTYPE html>? You can paste in your HTML right below where it begins the <html> text.
To do that, right click the line you want and select “Edit as HTML.”
Paste in your HTML code and then click out of the editor area.
Voila! You have HTML in your email.
If you’ve done all your styling in the body of the email, you should have no problem!
Alas, I tried to get fancy and had a problem that I’ll share with you.
Discovering a critical issue
The most recent time I did this, this did not work for me like it had all the other times.
I had all this nice written content in my email, but what ended up going through when I sent my test email was a whole bunch of images.
Not exactly visually appealing or worth reading.
Tip: Always send a test email! When you’re working with code, the smallest change could be catastrophic.
This method had worked for me so many times. I couldn’t fathom what had gone wrong.
I tried seeing if it was something in the <head> code or something to do with the DOCTYPE. I didn’t realize it then, but I was close to the problem.
I copied the HTML code from my email client to compare the <head> code even. They were, of course, pretty different and had different style sheets.
I figured it out.
As a designer, I had wanted to optimize my code so that I could make padding and spacing changes in the CSS without having to manually do it line by line.
In my email template, all of the styles were defined as separate elements in the HTML tags.
I spent a Friday afternoon rewriting the code so that I could call a class and the styling would just automatically apply.
Don’t do that if you’re doing an email! (at least in the way I’m doing an email)
Working around my email client
In my walkthrough example of putting HTML into an email, I had inspected element and put in my whole HTML text into the email.
I realized that my email client was overwriting my <head> definitions and therefore getting rid of my CSS.
I was trying to be smart and optimize my code, but then it does not work with my mail client.
Lesson learned: Do not rely on head CSS styling. Have your styling be in the body of your HTML code.
If you’re using an email template, don’t mess with the styling. If you’re starting from scratch, don’t define CSS classes at the top. Do it individually.
Since I’d done ALL that work and am not GitHub savvy enough to revert my changes, I did a bit of a workaround and used the place I got my template from (Braze) to send myself a test email. It kind of optimized my code for me again.
Optimizing the email
Now that I know that my email’s web client will just overwrite my CSS, I realized there is no need to insert the whole HTML file. In fact, that would just cause me some headaches.
Instead, I should go directly to the <body> of the email.
I noticed a handy thing about my email’s client. It has this tag called where it enables you to edit content (contenteditable=“true”).
So I left the <body> definitions alone and then pasted everything below body from my newsletter template code into the email following the same steps I mentioned above.
I sent out my test email and, hooray, the problem was solved!
My content was back!
I did have some spacing issues I had to go in and manually fix, but overall my problem was solved.
Planning for the future
I want to continue to send out this newsletter. I hope that I’ve worked out the kinks as much as possible. It’s been a fun challenge for me to wear a different hat than the one I normally wear.
This is just the way that I figured out how to do it. By no means is it the best, I’m sure.
Hope this helps the folks like me who want to send a custom email from their own email address!
Rachel is a user experience researcher for IBM’s suite of Db2 products within the Hybrid Data Management portfolio in the Cloud Data and AI business unit.
The above article is personal and does not necessarily represent IBM’s positions, strategies or opinions.