In short, HTML emails are emails created using HTML (Hypertext Markup Language), which is a coding language also used to design web pages. If an email contains anything more than plain, unformatted text, it is most likely created with HTML, since it is the most popular coding language used in email design today.
Here’s a typical HTML marketing email:
Obviously, this is something you cannot create using plain text only. But why go to such lengths for a marketing email?
Because the differences between HTML and plain text emails generally make HTML a preferable choice for marketing emails. The biggest benefit is, you can insert the elements you need to boost your email’s look and performance, such as embedded images, fonts, colors, and interactivity. For example, you can include an image to attract your customers’ attention, or a CTA button with a link to your web page.
The problem is, popular free email services will only let you create HTML emails with their visual editing features, and these are not nearly enough for professional marketing emails.
Yet it is still possible to send complex HTML emails with Gmail, MacOS, and other clients. Here’s how.
To send an HTML email, you need to create it first, so make sure you know how to create HTML emails. In this section, we’ll explain how to send an HTML email assuming you already know how to write it. To illustrate the process, we’ll be using an HTML email template from Selzy library (more on that later).
Here’s what the template looks like. On the right, you can see the HTML code, and on the left — the rendered email:
First, write your email code in an HTML editor of your choice. You can also use a standard text editor such as Microsoft’s Notepad for that purpose, but HTML editors are more convenient because they highlight code lines with different colors.
Here’s what the code looks like in an HTML editor:
And here’s the same code in a standard text editor:
If you don’t have an HTML editor installed on your device, free online tools can help. Some of them, such as Free online HTML editor, even allow real-time collaboration, which is a great feature for teams. The problem is, most online editors won’t let you save an .html file. However, some tools do allow it — for example, Postdrop. Anyway, you can always copy the code, paste it into the text file, and save it with the .html extension.
Also, you don’t always need to write code from scratch. Instead, you can use a ready-made email template and simply tweak it here and there. To do that, copy and paste the template code and re-write the bits you need to alter.
When you’ve finished writing and/or editing your email, save it as an .html file on your device. If you’re using an HTML editor, that would be your default file format. For text editors, change the file type to “All files” and add the .html extension to the file name manually.
Now, open the file you’ve just created with a web browser of your choice.
Here’s what an HTML email looks like when opened in Google Chrome. As you can see, it renders as a typical marketing email from your inbox:
Finally, select the entire email content in the Chrome window (you can use Ctrl+A on Windows/Cmd+A on MacOS to do that) and hit “Copy”. Now the content is copied to your cache. Start your email client (Gmail, in our case) and open the “Compose” window to create a new email.
Paste the content you’ve just copied into the email body, and — there you go. Your email is almost ready.
Now, add a subject line, choose your recipients, and hit “Send”.
The method described above is simple and convenient. Yet there are more ways to send HTML emails via Gmail and similar email services that you might want to try. Here are the most popular ones.
Chrome’s Developer Tools allow users to work with and edit HTML code directly in the browser window. This option can come in handy if you are a web designer, but also if you want to send HTML emails without external tools such as HTML or text editors.
Here’s what the code looks like in the Developer Tools window alongside the graphic render of the email:
To write and edit HTML emails with Developer Tools using Gmail, follow these steps:
Here’s what the process looks like:
You can also find the place you need to alter without typing in the text first, but this is more difficult as you’ll have to look for specific words among the code lines.
Another convenient option is to use a Chrome browser extension. Typically, such extensions simplify the sending of HTML emails via Gmail and other email clients by offering one the the following three options:
These extensions are easy to find in the Chrome Web Store using the “html email” query.
However, some browser extensions might potentially be unsafe to use. Besides, they also have limitations as some email clients might still render the emails created with extensions incorrectly.
Now that you know how to send HTML emails, here are some important details to keep in mind to ensure the best results.
To insert images in your emails, upload them on the web yourself first. The images you find on the internet may get deleted, and your email will no longer display correctly. Ideally, upload the images to your own server. You can also upload them to a public hosting service or a cloud storage such as Google Drive.
When using public hosting or cloud storage, provide the link to the image file and not the folder containing the image, and make sure the link is public.
Also, remember to include the full path to the uploaded image in your HTML code, including the URL.
In HTML documents, external styles are linked CSS (Cascade Style Sheet) files containing code that specifies the look of an email or a web page. These external styles are convenient and efficient, but not all email clients support them. As a result, your emails might render incorrectly in some cases.
That’s why it’s best to stick to inline styles when sending emails with Gmail and similar services — i.e., to specify style elements directly in the HTML code. Although this will add more lines to your code, it guarantees that your style remains consistent across different email clients.
To ensure your email displays correctly in all clients, avoid using web fonts. Gmail, for example, won’t allow importing them anyway, so you can only utilize the few fonts available in the client, such as Sans Serif, Tahoma, Veranda, and others. To see the full list, click on the font field in the “Compose” window.
All that said, we cannot but mention a convenient alternative to sending HTML marketing email with popular email clients like Gmail, Outlook, Yahoo, and others.
Professional ESPs (email service providers) such as Selzy allow you to create, edit and send HTML emails quickly and easily without using any additional software, making the whole process more efficient. You can also use ready-made templates such as the one we’ve used to illustrate this article and work with them in the in-built HTML editor to produce unique professional emails for your business. In Selzy, you can try this feature for free and see how much more convenient it is.
These were the most popular and convenient ways to send HTML email via Gmail. Try them if you want to have more control over how your emails look and make them more effective. Alternatively, you can use a professional ESP like Selzy to up your email marketing game and get access to the in-built HTML editor and many other useful features.
