The Simplest Way to Use HTML and With Styling In G-Mail

Not too long ago I created a web app called Nalarama!, which was designed to be a controlled form where my friends and family could submit guesses on the different breeds of our mixed breed puppy as a contest with points and the whole nine yards. Then once the results from her DNA test came back I wanted to be able to send the results in a professional manner, but was unsure of how to send emails with a templated look instead of just text and attachments, a signature, etc.

So I have spent the last few days trying to figure it out, and I am creating this short post to share what I’ve learned so far! Let me tell you what, I did a lot of trial and error with this, but finally found a way to do what I wanted to do, for the most part.

Limitations

First and foremost, there are a lot of limitations. For example, if you are used to writing CSS on external stylesheets, that won’t work here. In fact, you can do embedded <style> tags to do CSS in there, which works, but can’t be trusted. G-Mail and other big name web mail clients strip out embedded CSS, and only allow certain CSS characteristics in general.

So whats the best option for styling? Inline is the most reliable when you want something to work. Period.

Oh, and if you love using Google Fonts and using <link> tags and imports to get your favorite cool fonts into your HTML, you may be disappointed to know this is something that is incompatible with your HTML template. However, I believe there are other non-conventional ways to use them I am just unaware of how!

According to a lot of the fine folks on the internet who have fought this battle before, the e-mail playing field is extremely far behind when it comes to styling. There are only so many things we can do in G-Mail for example, here’s the documentation which shows a list of the different acceptable CSS properties.

If you are someone who is super familiar with making tables in HTML, this is good news for you! Because it is definitely going to be the only way to create a grid.

So that takes away CSS grid, but what about Flexbox? I have found that display: flex; has been tricky, because it works, since display is able to be changed, but then things like flex-direction: column; aren’t recognized. So I haven’t been using it. Instead, to do things like centering my tables and other elements, I use margin-left: auto; margin-right: auto;.

To be completely honest, if you have never done this before, there will be a bunch of trial and error, and there’s no way around that. So let’s jump into how to integrate the HTML into your e-mail, so you can start testing it.

Integrate HTML Into E-Mail

There is a site called Litmus which tests your e-mail across a bunch of different e-mail clients to see how universal it is. I however. mostly just want to demonstrate this concept via G-Mail.

In order to see what it looks like as a received e-mail, I have been sending the entire thing to myself. Literally, I make myself the recipient and then open it like I just got fresh mail!

Now, I want to put this out there. Other sources online claim you can serve up your HTML in the browser, and then use command + A to copy all, then copy and paste it into the e-mail body. Does this work? Yes…. Kinda.

It works, but not all of the attributes work properly, try it for yourself, don’t take my word for it!

Here is how I have learned to test my e-mails:

Hit “Compose” to bring up a new e-mail window

Put yourself as a recipient, add a subject, and then right click inside the empty body

Click “Inspect” and the dev tools should open with a particular <div> already highlighted (I use Chrome because it supposedly has the best developer tools!). Right click on the highlighted <div>

If there is anything inside of this <div>, go ahead and delete it, because this is where our HTML document will be pasted. It will look like this

As mentioned above, paste your HTML code inside this <div> and as soon as you click out of that box, you will see the results pop up in your new e-mail window. Here’s what my Nalarama e-mail looks like when I do it for myself:

And the result on my phone when I send it to myself:

Conclusion

If you are curious about the HTML behind this e-mail, I have linked to the GitHub repo here.

I hope this post was beneficial to someone out there looking for information about HTML in e-mails like I was. Thanks for reading if you made it this far, and as always, happy hacking!