How to Send HTML Emails in Gmail, Outlook and More
Try Publicate For Free Today
Start Now
With almost two billion users, Gmail is one of the most popular email clients. So, knowing how to embed and send HTML emails in the email provider is a handy skill nowadays. In this guide, we will cover how to create HTML emails and how to send HTML emails in Gmail.
And, while sending HTML emails is useful to know, we will also share how a web-based email builder like Publicate could save you time by helping you create beautifully designed emails in minutes without code. Plus, you can still use Gmail or Outlook to send your emails!
Gmail’s standard email editor (what you see in the composer window when you create an email) is pretty basic.
You can use it for some formatting, such as changing the font’s color and size, as well as creating bullet lists and aligning text however you want it. You can also add images and emojis.
But its functionalities stop around there.
With HTML, you can stylize your emails in more engaging ways, and access new levels of flexibility that give your emails a unique, professional stamp. For example, create columns, add your company logo and colors, and add clickable buttons that give your recipients the next step to take.
Ultimately, you’ll be able to add richer content that provides a better user experience. But how can you send HTML emails in Gmail. Let’s find out…
(Unless you use an email builder.)
This is because if you paste HTML directly into Gmail or any other email client, it will paste the HTML as text, which is not what you want. You want a beautifully rendered newsletter, not a bunch of text laid out in HTML tags.
Thankfully, there are a couple of ways around it, with varying degrees of technical complexity and time needed.
We will cover all of the possible methods in this post. You’re probably looking for the simplest one that is going to save you the most time and effort, so let's start there.
You’re here because you want to know how to send HTML in Gmail. Although some of the options can be tricky, not all of them are. They include:
We’ll look at each in turn.
Learning how to send HTML emails in Gmail using code can become complicated. Firstly, you have to know how to code HTML. Secondly, you’ll need to know what kind of HTML tags you can and can’t use, you have to be able to host images on the web, and so on.
To make it easier, you can use an email builder like Publicate that allows you to choose from an array of professional email templates that all work seamlessly with Gmail, Outlook or any other client. It also has a powerful drag-and-drop editor so you can easily customize your email.
There are a variety of templates to choose from for whatever your purpose. From Sales to Internal Communications to Events and Seasonal messages, there’s a template for any need.
Other benefits of using an email builder instead of coding your own HTML email include:
Pros of using an email builder:
Cons of using an email builder:
You can create HTML yourself and copy and paste it into Gmail, but you will have to make sure you copy rendered HTML, not just the HTML itself.
Keep in mind that if you’re choosing this route, you also have to be aware of what Gmail allows in its HTML. For example, you can’t use external style sheets; instead, you’ll have to use inline CSS. There are also HTML tags that might not be supported.
Here’s how to insert your HTML code into Gmail:
Pros of copying and pasting HTML:
Cons of copying and pasting HTML:
You can edit HTML directly in the console of Google Chrome by using the “Inspect” element in your Gmail message window. In this case, you have to already have the correct HTML coded and ready to paste into the console.
Let’s take a look at how to use the Chrome developer tools to insert HTML directly into the Gmail compose window in the next section.
Pros of using Chrome’s tools:
Cons of using Chrome’s tools:
Here are some other points you need to be aware of when sending HTML emails.
You can send HTML emails in Gmail and other clients, but you need to know how to code HTML and use a text editor, unless you use a purpose-built email builder like Publicate.
When coding your own HTML, keep in mind that HTML renders differently across email providers, so you want to code in a way that your email renders correctly for the maximum number of people possible. This starts with structuring content inside tables, storing images on a live web server, and using secure links that start with https://.
As you likely know, the most engaging emails balance text and imagery. But, when it comes to HTML, not everyone will be able to download images by default. You also need to be aware that you will have to host your images on your own server, again unless you use a purpose-built email builder.
There are legal guidelines in place to protect consumers from receiving emails that they never signed up for. So, when you are sending HTML emails or any type of email, you have to remain compliant with these regulations.
Read up on the CAN-SPAM Act for help.
As with any email you send, be sure to review your email before you launch it. Make sure that links are going where you intend, images and fonts appear, and your email fits within the width of the box on the screen.
You will also want to make sure that you test your newsletter renders across various screen sizes, and email clients and platforms.
Before sending your HTML email to a mass email list, choose a test list to whom you can send out the email. Then, follow up to find out if the email hit their inbox or went straight to spam. This way, you can optimize your email to make sure it’s actually delivered.
Unless you are using an email builder, any images you include in your HTML email need to be hosted somewhere and should be made publicly available. Upload them on the internet (for example, in a public Google Drive) and provide a link in the code so they can be accessed.
You might use external style sheets when coding a website, but Gmail doesn’t support them. Be sure to use embedded CSS or inline styles if you want to use CSS.
Gmail doesn’t let you import web fonts. So, when you want to send HTML emails in Gmail, you’ll need to stick to Gmail’s default font, Arial, or other email-safe fonts like Open Sans or Roboto.
When writing HTML emails for Gmail and other ESPs, these tips are for you. These quick tips will help you maximize the amount of people who can receive and read your emails as you intend.
Instead of being bogged down in email code, you can spend that time curating your email content and ensuring your newsletter is engaging for your readers. A tool like Publicate is an email builder that lets you build and send beautiful HTML emails from your chosen email service provider, without having to code a thing.
It also gets around all of the limitations of the other methods as images and media are automatically hosted. Emails are rigorously tested across all email clients so you can be sure it looks great for your readers, and you can export what you create with the click of a button to wherever you want to send it, including Gmail and Outlook.
The powerful email builder also makes it super easy to create beautiful engaging newsletters and there are hundreds of templates to choose from for whatever purpose you have in mind - from announcing new hires to sharing news and blog posts, events, fundraisers and more.
With a template, you’ll have the layout ready to go and you can customize it as much or as little as you want to. Publicate makes email design simple and fast thanks to incredible features like Brand Kits, inline image editing, integrations with stock image sites, and real-time collaboration.
After you send your creation, you can track its performance through analytics. That means you’ll get a clear grasp on what your subscribers love and what could be improved, so you can continue to ramp up your email game!
Publicate’s no-code email builder makes it quick and easy to create stunning emails in minutes - even if you’re not a coder or designer!
To streamline the process even further, we’ve added a Chrome extension so you can send HTML emails in Gmail without even having to copy and paste anything. With this powerful tool, your templates are effectively stored in Gmail. You can access and send them with just a few clicks; that means no wasting time on code.
Here’s how to use it:
Here’s a selection of some of the best HTML email templates to send in Gmail. You’ll find them all in Publicate, ready to use and customize with your content.
There’s a template for just about every purpose and industry, but we’ll just cover a handful here. Check out the full range of templates to get inspired.
A regular newsletter sent to employees helps keep them in-the-loop and feeling aligned with your business. This is a great tool to solidify culture and streamline communications (by keeping everything in one spot).
Ideal for eCommerce stores (or any business with an offer to promote), this template has a clean design that puts the focus on your offer and CTAs. Like every template, you can customize it with your own branding and content.
Get feedback from customers or employees with a simple survey email. This helps you get a grasp on how well your business is doing, and where you could improve, to keep your audience happy and engaged.
With Publicate, you can insert surveys directly into the email, with a simple drag-and-drop. This streamlines the response process, taking away any extra steps so it’s super simple for readers to take your survey.
If you code your HTML email in a text editor, then you can paste the HTML into either Gmail or Outlook, but it is not quite as simple as copy and paste.
Here’s how to do it:
Start by coding your email and then saving it. All Text Editors (where you create your HTML) have an option to either “save” or “download” your HTML file. Here’s how to save your creation:
Remember how we said you can’t just paste HTML into an email client like Gmail or Outlook? That’s why you have to open it as a webpage in your browser first, so you can copy the rendered HTML, not the HTML code itself.
To do that, go to your saved HTML file and double click it to choose “Open With” and then open the file in your desired web browser.
Highlight all the content on the web page and “Copy” (On Windows, click CTRL and C to copy; on Mac, click Command and C to copy)
Create a new email on your preferred email platform. This may be done with a prompt like “Compose” or “New Message.”
Yahoo, Apple Mail, and Gmail are all set on default to enable HTML emails. For Outlook, you’ll have to enable HTML emails.
Paste the previously copied rendered HTML in the message body and you should see your rendered newsletter in the compose window.
Remember you will need to ensure all images and media are hosted on a server for this to work and for them to send with your newsletter.
Add your recipients to the “To” field and input a subject line that accurately reflects the content of the email.
Proofread, and send! (Remember: you may want to send to a test list first to perform a spam test).
If things don’t quite look right you’ll have to go back to the text editor and edit your HTML, save it, render it and then copy it over again.
Rather than having to code the newsletter yourself, host the images and media yourself, and go through these lengthy processes, you can leverage a web-based email builder like Publicate. This is equipped with HTML email templates and a powerful newsletter editor that exports directly to Gmail and Outlook, saving you a lot of time and hassle.
This allows you to design beautiful and branded emails without having any coding knowledge or hiring a graphic designer. Then, with a few clicks, you can export your creation to Gmail or another email provider of your choice (or an alternative communication channel like Slack) for distribution.
Once you learn how to send HTML emails in Gmail and other ESPs, you can see how an email builder can really help you save time and operate more efficiently.
There are many nuances to know about when writing your own HTML to send in an email provider. When you use an email builder instead, it eliminates the multistep processes, having to host things on your own server and most importantly, the need to code the newsletter itself.
A tool like Publicate is an email builder that enables you to create beautiful newsletters and send HTML emails from your chosen email service provider. All you have to do is build your email and export the HTML to your preferred email client, or use the Chrome extension to upload HTML newsletters in one click.
.jpg)
