It still exists! (Screenshot of Neopets website taken on October 27, 2020)

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

Why not just use a newsletter service or attach it as a PDF?

That would be too simple 😅

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.

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.

Discovering a critical issue

The most recent time I did this, this did not work for me like it had all the other times.

Debugging

I figured it out.

CSS styling applied to each separate line of code

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.

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.

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.

UX Strategist + Researcher at IBM. Holistic lifestyle coach in training. Self-proclaimed nerd of all trades.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store