How to Create & Send HTML Emails via Gmail Using Stripo?

Hanna Kuznietsova
How to Create & Send HTML Emails via Gmail Using Stripo?
5 (100%) 15 votes
How to Create & Send HTML Emails via Gmail Using Stripo?
June 8, 2018 | 31,364 views

According to Statista, in 2018, a number of email users reached the benchmark of 3.8 billion. While 1.4 billion use Gmail. It appears that 36.8 percent of all users worldwide prefer this email client.

Many of us have tried to create an HTML email in Gmail, but all our attempts failed. Why? Because this email service does not provide us with appropriate tools. And honestly speaking, there is no need for them.

The Internet offers a big number of HTML email template editors. Most of them allow building responsive email templates, while only some allow exporting them directly to Gmail.

Wanna do the same within minutes?

You would wanna send HTML email in Gmail for several reasons. The essential reason for sending email templates to Gmail is that you can run your email marketing campaign without using any third-party tool because you already know how to send mass emails in Gmail.

In this article, I will:
     ➢ create an HTML email template;
     ➢ export it to my Gmail account;
     ➢ highlight Gmail technical features;
     ➢ and finally, we are going to survey how Stripo helps deal with them — in other words, what makes our templates compatible with Gmail.

1. Creating an email

Prior to exporting email templates to your Gmail account, you need to make one.

There are three ways to do it:

1. The first one is using our designed HTML email templates.

Stripo offers 200+ ready-to-use templates: confirmation, abandoned cart, promo and certainly holiday ones. Choose the one you like. Definitely, you will need to modify it and make some changes according to your needs, to the email type —  promo or event-triggered ones — and to your brand, as well. But it might not take you longer than 10 minutes.

Stripo-Export-to-Gmail-Templates

Stripo-Export-to-Gmail-Template-Samples

2. The second option is creating an HTML email template from scratch.

You will have to log into your Stripo account, go to the templates tab, then choose the “Basic templates”. There you will find our new offer “Master Template”. Create one email template for many purposes. And simply combine the blocks according to the goal of your marketing campaign.

Stripo-Export-to-Gmail-Creating-Emails-from-Scratch

3. The third way is inserting/importing your HTML code.

You also need to go to your personal account, “templates” tab and choose “My HTML”.

Stripo-Export-to-Gmail-Inserting-HTML

The first option is the easiest one unless you have your own HTML template created. Let’s survey it.

So how do you modify our designed emails?

We have posted many articles on how to work with our editor. Still, I would love to add a few lines here.

You have already chosen the template you like…

Now you need to open it in the editor:

Step 1. How to set a preheader with Stripo, and what your email will look like

It is a well-known fact that preheader is something recipients see first before opening a message. And let us be honest, they judge whether to open the email or not by the following factors: your name, subject line, and preheader.

Which is why we strongly recommend you to never omit this option.

Note: you may apply any font you like to the preheader text when creating a template. However, Gmail will use “Arial” when displaying this text in the preview of the message. Yet, in the body of the email, you’ve chosen font will remain.

Stripo-Export-to-Gmail-Preheader-in-Preview

(Arial font, preheader preview in the subject line)

Stripo-Export-to-Gmail-Preheader-Font

(I applied Courier New to the preheader text in the email template)

Step 2. How to add a header and logo with Stripo, and what your email will look like

It’s been said many times that header is the face of your email and your brand, as well. Make sure you add company logo and its name. To my mind, this is a great idea to mention contact information, as well.

Stripo-Export-to-Gmail-Header-and-Logo

Note: if you put a menu above the banner, it may be considered an element of the header.

Step 3. How to add a banner with Stripo, and what your email will look like

This is our favorite element of templates. Banners set the mood for entire email. Thus, you need to work thoroughly on it. Find and insert the best image you like. Btw, the trend for 2018 is using photos of people, less drawn pictures. I am proud to say that currently, we are the only editor that enables you to apply special filters to it. Then you may place text over this image and wrap it in custom/decorative fonts.

Stripo-Export-to-Gmail-Banner

Also, with us, you may apply additional image over a banner. This lets you create multi-layer banners without any photo editor.

Stripo Export to-Gmail-Multi-layer-Banners

Step 4. How to add structures with Stripo, and what your email will look like

An image and a text, two photos and two text blocks in a row? It is up to you to decide. This is a common feature, and many editors let you choose between one or two blocks in a line. While with us you can choose up to four of them.

Here, you are free to insert images, texts, buttons, videos, etc.

Stripo-Export-to-Gmail-Structures

Take a look at the example with two blocks in a structure:

Stripo-Export-to-Gmail-2-blocks-in-Structure

Three blocks in a structure:

Stripo Export to-Gmail-3-Blocks-in-Structure

As you can see, you may add a button under description to every single block.

Four blocks in a structure:

Stripo-Export-to-Gmail-4-blocks-in-Structure

Apply background images or colors to each block separately, or a single one for an entire structure.

Step 5. How to add Social networks’ icons with Stripo, and what your email will look like

Locate them anywhere you want. What is so great about our social networks icons? We offer 45 of them, not only typical ones for Facebook, Youtube, and Instagram. We did our best to gather them all for your convenience.

As a bonus, you may select the color scheme and set their shape.

Stripo Export to-GmailSocial-Network-Icons

This is very simple: drag-and-drop the “Social Networks” block to the necessary structure, select the shapes of your icons, colors, and paste the link into the “Link” field.

Step 6. Library of blocks, and how it is gonna help you create emails with Gmail

Definitely, you highly value your time and don’t feel like creating similar templates every day. Neither do we when we need to run a new campaign. Due to this reason, we decided to invent a Library of content blocks. It works very easily: once you have created a template, save the blocks you need to the library, give it a name. And the next time when starting a new campaign, you will only have to drag-and-drop it into a new template.

Save containers or entire structures.

Stripo-Export-to-Gmail-Library-of-Blocks

In the “My blocks” tab you will see the blocks you have previously saved. In the “Template blocks”, you may get the blocks that have been extracted from the very template by the system.

2. Exporting HTML emails to Gmail

This is my favorite step.

Yet, prior to exporting your email, we recommend previewing it. How? Just click the preview button right above your email. It looks like this:

Stripo-Export-to-Gmail-Preview-Button

Here you will see both desktop and mobile versions of your email.

Then click the export button.

Stripo-Export-to-Gmail-Export-Button

A pop-up window will appear.

Stripo-Export-to-Gmail-Exporting-Email

Note: make sure that the pop-up window option in your browser is active.

Certainly, we choose “Gmail”. If you have just one account with Gmail and are logged in, then your message will be exported right away. If you have two active accounts like me, then the system will ask you to choose which way to send out the template.

Note: your email will be located in your Drafts Folder, for your convenience.

Now you can simply write down the subject line, insert a recipient if you want to send HTML email template in Gmail to one single user or a group of them if you are going to send mass HTML emails, and done!

Stripo-Export-Email-Draft

🔺 By the way, you can still edit it! 🙂

3 and 4. Gmail technical restrictions and how to deal with some by using Stripo

I had read many facts and hypotheses about Gmail and decided to test them all. Here they are:

Hypothesis 1. Links and images

The web says that if any image in an HTML formatted email does not contain any links, then Gmail will suggest that your users download that.

I have tested — this is so true. You may not want this “download” button because it harms the entire design, and email doesn’t look professional that way.

Stripo-Export-to-Gmail-Download-button

Solution: when uploading images to insert into an email, you can still add a link. But even if you forget, our system has a “link” set as a default one:

Stripo-Export-to-Gmail-Adding-Links

Definitely, it won’t take your customers anywhere, yet there will not be the irritating “download” button over images in emails.

Hypothesis 2. Images without Alt-text may go to Spam folder

I bet you have heard it, too, that emails with images do get into the spam folder when there is no alt text (alt tag) to every image used.

I deliberately sent out many emails with removed Alt text, and they made it to the inbox button without any issues. Yet, this time I tested Gmail only. So we cannot promise that your emails without alt text will pass Outlook or Apple Mail spam filters. Consequently, if you are going to send emails not only to Gmail users, you will need alt text to pass spam filters.

Stripo-Export-Gmail-Alt-Text

But if you forget to add one, the system will copy your image name, whatever it is. Even if you accidentally — or on purpose, like me — remove the very alt text, when exporting an email our editor will put it back. Stripo does it automatically.

Note: for the purity of experiment, we turned this option off for a while to let me test Gmail spam filter.

With our tool, you don’t have to worry about alt text anymore And even if your images are blocked by email clients, recipients will still have an idea what the message is all about. Yet you are welcome to edit alt text if you please. Try to make it as clear as possible.

Hypothesis 3. Gmail clips messages

This is true. Gmail clips emails that are larger than 102 kB.
At the end of the visible part of an email, it offers to “view entire message”.

Currently, there is no technical possibility to win over this. Yet, you weigh your emails with us:
➢ simply click the “export” button;
➢ choose “HTML”;
➢ 
download HTML;

Stripo-Export-to-Gmail-Weigh-Message

➢ and then just with the right-click just check the file properties.

File properties said that this one is 65 kB. I have verified this information with a few applications, including mail-tester.com. They all confirmed that file weight.

Easy as it is!

Hypothesis 4. Gmail does not support <div> class

False. Gmail does transfer and display those attributes. Tested.

Hypothesis 5. Undo button doesn’t work for mass emails

Totally false in case you use Gmail without any add-ons like Gmail Mail Merge. All you have to do is go to your settings, find the “Undo Send” and choose the time: 5, 10, 20 or 30 seconds.

I tried to apply this trick to my mass emails and it worked.

Hypothesis 6. Text blocks with over 8,500 characters are removed

As a copywriter or just a woman, I love long sentences, detailed explanations. And I decided to insert one of the articles into the text block. That article contained about 10,000 characters excluding spaces. And sent that email to my friend. My email was delivered, none of the blocks was clipped or removed.

So we can say that this hypothesis was not confirmed. Which is great, by the way. But I sincerely doubt that any of us will send that long email to our clients.

Hypothesis 7. Links in HTML emails on Gmail

I heard that Gmail inserts links to our email addresses and phone numbers in emails — makes them clickable, in other words. I have tested tons of cell phone numbers and e-addresses. You know what? None of the numbers was clickable. I still have to highlight and copy it to use.

Yet!! The situation with the email addresses was pretty funny. They were either grey yet clickable or blue, underlined but non-clickable.

I think we still have to take care of it manually.

5. Testing

Always, before sending HTML email in Gmail, and before exporting it, make sure you test your emails out. Do it with Litmus or any other tool like this.

Now we are expecting integration with Litmus. Very soon, you will be able to test Gmail HTML emails without leaving the editor.

6. Summary

Now that you know how to create an HTML email in Gmail, and as working with Stripo doesn’t take much time, we hope that all your clients and friends will receive only elegant emails from you.

If you have any questions — find us on Facebook or email us at contact@stripo.email.

Be always wide awake in recent email marketing news, guides, articles and how-to’s