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

• According to Statista, in 2019, the number of email users worldwide reached a benchmark of 3.9 billion. 1.4 billion of them use Gmail, according to Wikipedia. It appears that 35.8 percent of all users prefer this email client.

There are cases when plain-text emails are not enough. And HTML emails come to the rescue. 

But it’s very difficult to impossible to create an HTML email in Gmail. Why? Because this email client 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. The vast majority of them allow building responsive email templates, while only some allow exporting them directly to Gmail.

Wanna do the same within minutes?

Use Stripo

You would want to send an 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 some 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 build one.

There are three ways to do it:

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

Stripo offers 300+ ready-to-use templates. They are categorized by types: confirmation, abandoned cart, promo, welcome, etc. And categorized by features: traditional HTML, Interactive (written in HTML5) and AMP emails (written in AMP HTML) — as we know, AMP for email is supported by Gmail. Choose the one you like best. Definitely, you will need to customize it so that your Gmail HTML email template fits your brand style. It won’t take you long.

2. The second way 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 universal email template for many purposes. And simply combine the modules according to the goal of your marketing campaign.

You can also pick the “Empty template” in this section to simply drag basic blocks into your Gmail HTML email template.

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

You also need to go to your personal account, the “templates” tab —> “basic templates”, then choose “My HTML”.

Open this “template”, and insert your custom HTML code.

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 ready-to-use email templates?

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 subject line and 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 they open an email. 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 that you never omit this option.

Important to mention:

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

(Arial font, preheader preview in the subject line)

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

Important to note:

Please, always add the “View in browser” link. It could be also called “Web version”.

To get a link to the web version of your email, you need to:

• enter the “Preview mode”;

• in a new window, click “Copy” to save the link to your clipboard;

• paste this link into the respective field.

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 your company logo and its name. 

You can also add social media icons and contact information in the email header, as well.

Important to mention:

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 an entire email. Thus, you need to work thoroughly on it. Find and insert the best image you like. I am proud to say that currently, we are the only editor that enables you to apply special filters to banner images without any photo editors and third-party tools. Then you may place text over this image and wrap it in banner/decorative fonts — we offer over 40.

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

For more information on how to build banners, please refer to our blog post “How to build banners with Stripo in under 10 minutes”. 

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.

Take a look at the example of two columns in a structure:

Three columns in a structure:

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

Four-column structure:

Important to mention:

If 4 columns in a structure are not enough for you, you can add 4 columns more. That would make 8 columns in total.

To do so, you need to:

• put a mouse pointer over an entire structure in the Gmail HTML email template — if done right, you will see the label “Structure”;

• in the settings panel, click “+”;

• then you can set width for your columns, or you can equalize them all.

Get registered with Stripo

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

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

Locate them wherever you want.  

We offer 45 social media icons, not only typical ones for Facebook, Twitter, 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 size.

This is very simple: drag-and-drop the “Social” block into the necessary structure, design your icons and paste your URLs into the “Link” fields.

What is so great about our social media icons? 

You configure them just once — and use across all campaigns without the necessity to even add links and work on their design. 

You need to make respective settings in your profile with Stripo. When building your next campaign — you just need to drag the basic “Social” block in your Gmail HTML email and Stripo will insert the icons you have already picked, with respective links, and the design that you’ve set.

For more information on how to add and set social media icons to your HTML email templates, please refer to our blog post.

Step 6. How to use our library of modules so that it helps you to create HTML emails in Gmail

Definitely, you highly value your time and don’t feel like creating similar templates every day. Neither do we when there’s a need to run a new campaign. Due to this reason, we decided to invent the Library of content modules. It is very easy to use our Library: once you have created a template, save the module/email element that you need to the library, give it a name. And next time when starting a new campaign, you will only have to drag-and-drop it into a new template.

Save email elements, containers, or entire structures.

In the “My modules” tab, you will see the modules you have previously saved. In the “Template modules”, you may get the blocks that have been extracted from the very template by the system. And the “Advanced” section contains the modules that were built by our coders and designers.

Step 7. How to build Gmail promotion annotations with Stripo and what your email will look like on mobile devices

Gmail divides incoming emails into tabs: primary for personal emails, promo emails, updates, etc. Users set the number of these tabs on their own.

If you are sending bulk emails via Gmail, your emails are likely to be delivered to the promotions tab.

The promotion annotations will help your emails stand out among a number of incoming emails in users’ inboxes.

Try it out

This feature is meant for mobile devices only.

For more information on how to build annotations, please refer to our blog post.

Step 8. How to add AMP elements to your emails and what your email will look like in Gmail

In March 2019, Google rolled out its AMP for emails. And Stripo is the first drag-n-drop email template builder that allows creating AMP emails with no coding skills at all.

Stirpo offers two drag-n-drop AMP blocks:

• accordion — to present your content in sections. It looks more structured that way;

• image carousel — to place 3-16 banners on one screen. Recipients will only need to click the “arrow” to see all images from the carousel.

You can also build AMP components with Google playground, and embed them in your Gmail HTML email templates for our open code editor.

For more information on how to build AMP emails with Stripo, please refer to our dedicated blog post.

Step 9. How to adjust your HTML email to Gmail on mobile devices

Literally all email builders now provide their users with responsive email templates. Still, some of them may render improperly on mobile devices — smaller fonts, missing indents, and paddings. It ruins your email design and makes your copy illegible.  

Stripo allows adjusting your emails to Gmail app with just 1 single click.

To activate this option, you need to:

• go to Appearance;

• enter the General Settings tab;

• toggle the Adapt for Gmail App button.

Please, remember that you can also add the following features in your Gmail HTML emails:

• image rollover effect — works on desktops;

• countdown timers — works on both desktops and mobiles;

• anchor links to menu tabs — works on both desktops and mobiles;

• CSS-animated buttons — works on desktops;

• survey forms — works on desktops; on mobile devices recipients see the link to the questionnaire on Google.

All the aforementioned elements render perfectly well in Gmail, yet they can be easily built with Stripo with little to no HTML coding skills.

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:

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

The desktop version of your email may have two versions, as well: HTML and AMP HTML. You need to preview both. If you like what you see and our AMP code validator does not detect any errors in your email, you may proceed to export it.

• click the export button;

• in a pop-up window, pick Gmail;

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

• in a new pop-up window, you will be asked to sign in with Google;

• give Stripo access to your drafts by clicking the “Allow” button;

• find your HTML email template in the Drafts folder. It is ready to be sent.

Important to note:

You do this just once. When exporting HTML emails to Gmail next time, you will only need to pick Gmail from the Exporting list — and the email will be exported to this email client right away.

Try Stripo out

How can you use HTML email templates in Gmail? Simply enter the subject line if you have not done it in Stripo, 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 indulge recipients with elegant emails!

By the way, you can still edit email templates prior to sending them out! 

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. Gmail suggests that recipients download images without links

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.

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:

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

Conclusion: true.

Hypothesis 2. Images without Alt-text may go to the 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.

No matter how easy it is to pass the SPAM filters, we strongly recommend that you add alt texts to images. If they get blocked by email clients, recipients will still have an idea of what the message is all about. Try to make alt texts as clear as possible.

Conclusion: emails without Alt text do get delivered to Incoming. But that could be just luck :) Besides, we need to add Alt text to images for other email clients and for accessibility.

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;

• and then 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.

Conclusion: true. We know how to weigh our emails with mail-tester, or any other tool of a kind.

Hypothesis 4. Gmail does not support <div> class

Gmail does transfer and display those attributes. Tested.

Conclusion: false.

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.

Conclusion: false.

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.

Conclusion: false.

Hypothesis 7. Phone numbers and email addresses become clickable 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. 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.

Conclusion: false. We have to take care of it manually :)

Hypothesis 8. Backgrounds do not render in Gmail desktop if the email width exceeds 640 pixels

Many email marketers claim that Gmail does not display an email’s background color, nor background image if the email width exceeds 640 pixels.

And, of course, we tested that.

The background image/color — we tested both — were displayed in Gmail across all devices and all web browsers.

(Width of the content part — 670 pixels, OS — macOS)

Conclusion: false.

Hypothesis 9. Gmail does replace custom fonts with the default ones

Custom fonts make your email design even more unique. However, it is true: Gmail tends to replace some custom fonts with the default one — Arial.

I have tested 4 different fonts.

Here’s how they worked:

1. Great Vibes — worked well on mobile and desktop;

2. Dokdo — was replaced with Arial;

3. Alexa Std — was replaced with Arial;

4. Montserrat — was replaced with Arial.

Conclusion: true. But you need to test to find which fonts of the ones that you really like do not get replaced by the default fonts.

Please remember that you can upload custom fonts with Stripo.

5. Previewing and testing

Always, before sending HTML email in Gmail, and before exporting it, make sure to preview and test your emails. 

Our email testing tool enables you to preview emails across 90+ email clients and devices without leaving the editor.

Final words

Now that you know how to create an HTML email in Gmail, and since doing with Stripo doesn’t take much time, we hope that from now, you will send only elegant HTML emails to your friends, and colleagues.

If you have any questions, please leave a comment below or email us at support@stripo.email.