Stand with Ukraine 🇺🇦 Donate to support

Proven Ways to Send HTML Email with Gmail

On August 30, 2019
5min read
Andriy Zapisotskyi Growth Manager @Mailtrap

Gmail has over 1.8 billion accounts worldwide and the number keeps growing. You’re probably one of them and so am I, my team, and probably the majority of Mailtrap Email Delivery Platform users too. Gmail has gone through a lot of changes since it was first tested in 2004. One of them was about simplifying the compose window and removing the old HTML editor. It doesn’t mean, however, that HTML is no longer supported by Google – it’s just a bit trickier to send HTML emails from Gmail. Let’s see how it works.

Why import HTML into Gmail in the first place?

Gmail offers a WYSIWYG editor (What You See Is What You Get) by default, which is perfectly sufficient for nearly any communication. You can choose from a number of fonts, colours and sizes, align a copy, add bullet points or indentations, and even insert images or emojis. 

Things get tough, though, when you need to use your company branding or another more complex formatting not available in the default editor. Inserting a logo or banner is doable. You can hire a professional, or there is an easier and more affordable way – to use one of the logo maker tools available. For instance, you can check the functionality and features of Designhill Logo Maker, Zyro, or any other you would prefer.

But can you align those visuals properly with text and make sure they look fine on any screen size? Probably not from the client itself.

In such situations, you need to rely on external tools or write your own HTML and insert it into a compose window.

Importing HTML into Gmail

If you were to simply copy the HTML code and paste it into the Gmail’s compose window, the receiver would only receive the same raw HTML. In other words, Gmail wouldn’t render it in any way. If you’re exchanging emails with a fellow web developer, they may actually appreciate such an innovative way of communication. Most people won’t though. That’s why you need to use a simple workaround to insert HTML.

  • Outside of Gmail, compose HTML code and save it as an .html file on your drive. Make sure your editor saves files as plain text, without any additional formatting. It also cannot add .txt or any other extensions to the file name, otherwise the code won’t be rendered properly. Mac’s TextEdit, for example, needs a few tweaks to work with HTML as expected. Here’s is a simple code as an example:
  • Right-click on the file and open it with a browser of your choice. It should render as expected. If you see raw HTML, double-check if the file was saved properly and if your editor relies on plain text.
  • Copy the entire content of a page, either with Ctrl+A (Windows) / Cmd+A (Mac) or just use a mouse or a trackpad. Then, insert it into your Gmail’s compose window and send!

The email should arrive in exactly the same shape as it was last seen leaving your inbox.

What to pay attention to when writing an HTML email

Although HTML is a really simple framework, there are several features/limitations of Gmail that you need to be aware of. Here are the main ones:

Images need to be hosted online and available publicly

Instead, images need to be uploaded elsewhere on the internet and referenced with a link in the code.

If possible, store images on your own server or use Google Drive (or other similar services). When uploading to the latter, make sure the link is public, not private (trying to access it in the incognito mode should do the job). When uploading to popular image-sharing services such as Imgur or Tinypic, make sure you obtain a direct link to the image, not to a folder where it’s stored. 

External style sheets won’t work

Gmail doesn’t offer support for external styles. You can, however, utilize embedded CSS as well as Inline styles. A good responsive email typically consists of a fair share of Inline CSS, used mainly to maintain a proper structure and styling of a message. Embedded CSS is used to add CSS Reset Styles and rules required to make an email responsive.

You can’t use web fonts

Gmail doesn’t let you utilize any web fonts and there’s no way to import them into your HTML. You’ll need to use one of the available fonts in your emails.

Utilizing HTML editors

Is it really necessary to write an entire HTML code from scratch or to test how it looks on different screens? No. There’s an abundance of free and paid email editors available both online and for download.

More sophisticated tools come with dozens of templates perfect for any occasion. You pick the right one, adjust it to your needs, and preview and download the entire HTML code. Then you follow the instructions above to send it with Gmail or use any other client or email service provider (ESP) like eSputnik, GetResponse etc. Most of these tools run on a freemium model, letting you try some basic templates for free and charging you for more advanced ones.

Some of these platforms also offer responsive HTML email templates that will look great whether a receiver reads them on a laptop, 292-inch TV or a smartphone. If the budget allows, we strongly recommend picking one of the responsive templates, as well as trying out those design, logo, and banner maker tools that we mentioned at the beginning. It’s a good way to ensure a better UI.

By the way, we’ve recently covered the 10 best HTML email editors on our blog to help make the choice easier. Check them out here.

There are also many basic tools that will simply preview whatever you insert. They’re more suitable if you’re writing a new code or reusing an old one and need a quick way to preview. These tools are typically free and sometimes don’t even require a sign-up.

How to test your HTML emails

By now, your email is likely composed and ready for sending. Are you done, though? We think not. Before you press the ‘send’ button, you might want to test each template in several clients and on several screen sizes. You might be surprised how some platforms will render your carefully-crafted message.

With Mailtrap Email Sandbox you can preview all of your test emails on the most popular email clients and see how they are rendered on different devices. . Here, you can also validate HTML/CSS and receive reports with spam checks to immediately troubleshoot and debug issues. And once you set different inboxes for different projects – share them with your colleagues.

Mailtrap Email Sandbox also checks your domain against the most common blacklists to ensure there won’t be any issues with your email deliverability.

Final words

As you can see, sending HTML emails via Gmail isn’t difficult. The only tricky part can be displaying them properly in the vast array of browsers and email clients. However, with a bit of practice and the appropriate toolset, it shouldn’t be a problem. To validate that everything works smoothly, use one of Mailtrap Email Sandbox’s features – an HTML email checker to see how Gmail, Outlook, Apple Mail, and other popular email clients react to your emails. No need to set your own SMTP, use Mailtrap Email Sandbox to securely test your emails and then forward them to production with Mailtrap Email API. Mailtrap Email Delivery Platform is trusted by over 15K+ active monthly users to test, send, and control emails.

Article by Andriy Zapisotskyi Growth Manager @Mailtrap

Comments

1 replies

PAD

Its helpful for me…

Comments are closed.