How to use custom HTML in a Gmail compose window

Today I’d like to show how you can create “HTML emails” and send them along in GMass. By equipping your GMass campaigns with these stylish emails, along with the other features of GMass, you can quickly and easily create a professional mail campaign.

The reason you have to create HTML emails in this way is because the Gmail Compose window doesn’t let you edit the HTML “behind” the message. This is in contrast to most email platforms, like MailChimp, Constant Contact, etc. in which you can edit the raw HTML. So, the technique below is a way to work around that Gmail limitation.

Overview

Once you have your HTML written, the process is basically just a matter of copy and paste. You create your page in HTML, load it in a browser, copy the contents of the browser, and then paste it into Gmail’s compose window. Then send it with GMass. Let’s run through a quick example of that.

Creating and Sending your HTML email

  1. Write your HTML. For this example, I’m using some boilerplate HTML adapted for our purposes. HTML can be either written directly or, possibly, composed with an HTML authoring tool. Gmail is a little picky with what it will allow as HTML in its emails, so here are a few important guidelines:
    – You can’t use external style sheets, though you can use inline CSS (e.g.  <td style=bgcolor=”white” align=”center”>) as well as embedded CSS in the head. For more on the details of exactly what you can and should use in Gmail, see this pageNote: Gmail changed their support for CSS in 2016, so older posts online may claim they don’t support things they actually do. The post I linked to is up to date with that change.
    – Some HTML tags may not be supported. This list (which may not be perfectly current) shows ones that are supported and some that are not.
    – Gmail does not support web fonts. So, either use the standard fonts they provide, or, if you want another font for something like a logo, make an image of that text. Then, in the HTML, link to that image hosted online, which is what I have done for the “Binkman’s Books” logo in my sample email below.
    – All images have to be hosted online somewherethey can’t be included in the email. You can host images on Imgur, Amazon Web Services, Google Docs (if you can get a direct link to the image), or any other place for hosting images.
    – Using tables to organize the display of contents is the recommended way to go for HTML emails. However, even with using tables, there are still issues to watch out for.
    Google Docs for composing could be problematic. Although there are tutorials out there about using Google Docs to create your HTML email without coding, when I tried it, I found that what was displayed on Google Docs was not exactly what appeared in the email (something that was centered in Google Docs was left aligned in the email).
    Keep it simple. Because it’s somewhat unpredictable what Gmail will support, it’s best to keep things fairly simple in terms of the HTML. (That’s probably a good idea from the point of view of recipients, too. No one needs an overly complex email.)
    Remember, Gmail is a work-in-progress. Gmail keeps changing, so blog posts or online answers from a few years ago are already out of date. So, if you’re researching how do anything with HTML and Gmail, try to find content that is as recently written as possible.

    A part of the HTML used to create the email.
    A part of the HTML used to create the email.
  2. Display the page in a browser. I used Chrome and just opened (Ctrl-O) the .html file that was on my computer.

    The HTML as rendered in the Chrome browser.
    The HTML as rendered in the Chrome browser.
  3. In the browser window, select all and copy the contents of the browser window into the clipboard.
  4. Open a Gmail Compose window and paste into the main text area. The HTML email should appear in the compose window. Double check (including scrolling down to the bottom) that everything looks appropriate before you send.

    HTML email now pasted to Gmail compose window.
    HTML email now pasted to Gmail compose window.
  5. Send your mail merge with GMass. As usual, just hit the red GMass button.

    Cursor shown poised over the GMass button, ready to click.
    Ready to send out, just need to click GMass…

That’s it! The nice thing about this approach is you can save the HTML file as a template, so that future HTML emails will look consistent and build a “brand look” in your emails. It also saves you a huge amount of time in crafting new HTML emails.

Of course, this technique can be combined with any of the other ways to use GMass, such as from a Google Docs spreadsheet, or even as part of an automated email sequence.

One Reply to “How to use custom HTML in a Gmail compose window”

Leave a Reply

Your email address will not be published. Required fields are marked *