How to Send HTML Emails in Gmail (3 Top Tips)

Before we start looking at sending HTML emails in Gmail, it's important to understand some of thehistory of Gmail. After all, it is one of the most popular email clients in the world. With over 1.8 billion people now using the email service, Gmail has come a long way since its launch back in 2004. One of the biggest changes that has made to Gmail has been the removal of its HTML editor and simplifying the UI.

This change was made simply because most users simply didn’t need an HTML editor to create HTML emails in Gmail. This was why Gmail only offers a WYSIWYG editor. Now, if you’re just sending a personal email, this is often enough. It offers basic formatting options but not much else.

However, if you want to add your company branding or more complex formatting, the default editor is not enough. While it is possible to add a logos or banner, the image won’t be responsive. You will need to use HTML if you want images to scale and appear as intended.

Even though Gmail no longer offers an HTML editor, you can still use HTML in Gmail messages. This is so the imagery renders correctly.

Find out how to design and send HTML emails in Gmail in our step-by-step guide below.

Build your HTML design

If you’re not very familiar with HTML code, there are lots of free HTML editors out there. Two of the most popular are:

• HTMLg.com

• W3Schools Editor

These let you preview your email before you upload the HTML in Gmail. Otherwise, we recommend that you get graphic designer and HTML guru to build your email template for you.

Import HTML in Gmail

Once you have built your design in HTML, you need to get the code into Gmail. Now, you simply can’t copy and paste raw HTML into the Gmail Compose window. Your recipients would receive emails filled with lots of random code.

So, do the following:

1. Save your HTML code as a .html file on your computer.

2. Right click on the HTML file and open it in a web browser like Google Chrome. This will let you see if it renders correctly.

3. Select the entire page using Ctrl+A on Windows PCs or Cmd+A on Macs.

4. Use Ctrl+C (Windows) or Cmd+C (Macs) to copy the page contents.

5. Insert the HTML in Gmail’s Compose window using Ctrl+V (Windows) or Cmd+V (Macs). You can now send your email.

Important points to note for HTML emails in Gmail

1. You will need to use hosted images

To add HTML in Gmail messages such as images, you have to upload them online and reference them using a web URL. You can do this by hosting the images on your Google Drive or using a hosting site like Imgur. This means the image is never actually a physical part of your HTML email in Gmail. Also remember to make sure the link is public so anyone can see it.

2. You won’t be able to use web fonts

Gmail doesn’t let you use web fonts or import them into your HTML. This means you’ll have to use the available fonts provided. If you do want to use another font, turn the text into an image and then host it online. You can then link to it from the HTML code when you build your email template.

3. You can’t use external style sheets

Even though Gmail doesn’t support external styles, you can use embedded CSS and Inline styles. Inline CSS is used to ensure your Gmail message maintains a proper structure and styles correctly. You can then use embedded CSS to normalize how your HTML renders across multiple email clients.

Summary

Sending HTML emails in Gmail isn’t that difficult. However, this technique only works if you want an entire template composed in HTML such as a marketing email. It won’t work if you want to send a normal email and include an HTML email signature with your corporate branding.

To find out how to add a professional email signature in Gmail, read this guide.