Sending elegant HTML emails by means of Gmail has by no means been simpler! No add-ons, no extensions required. As a result of Stripo permits creating and pushing HTML emails to your favourite e mail consumer with only one click on.

On this article, I’ll:

• create an HTML e mail template;
• export it to my Gmail account;
• spotlight some Gmail technical options;
• and eventually, will survey how Stripo helps cope with them — in different phrases, what makes our templates suitable with Gmail.

1. Creating an e mail

Previous to exporting e mail templates to your Gmail account, it is advisable construct one.

There are 3 ways to do it:

Approach 1. Utilizing our prebuilt HTML e mail templates 

Stripo provides over 1000+ ready-to-use templates. They’re categorized by varieties, like affirmation, deserted cart, promo, welcome, and many others., by options, like conventional HTML, Interactive (written in HTML5), and AMP emails (written in AMP HTML) — as we all know, AMP for e mail is totally supported by Gmail, and by seasons and holidays. Select the one you want essentially the most. Undoubtedly, you will have to customise it in order that your Gmail HTML e mail template matches your model fashion. It gained’t take you lengthy.

Use prebuilt templates to ship high-quality HTML emails by means of Gmail

Browse

Approach 2. Creating an HTML e mail template from scratch

Log into your Stripo account, go to the Templates tab, then select the “Primary templates”. There you will see 8 e mail mockups, aka prototypes. The “Coaching Template” incorporates an evidence of how one can use our Drag-n-Drop blocks.

It’s also possible to decide the “Empty Template” on this part to easily drag primary blocks into your Gmail HTML e mail template.

Approach 3. Importing your customized HTML code

Go to your private account, the “templates” tab —> “primary templates”, then select “My HTML” template.

Open it, and paste your customized HTML code.

The primary possibility and the second choices are the best ones, in my view. Let’s survey them.

So how do you modify our ready-to-use e mail templates?

We have now printed a weblog submit “Stripo A to Z“. There we confirmed intimately how one can work on emails with Stripo. Nonetheless, I’d love so as to add a couple of traces right here.

Step 1. How you can set a topic line and a preheader with Stripo and what your e mail will appear like

It’s a well-known reality 69% of recipients decide whether or not to open the e-mail by sender identify, topic line, and preheader.

That is why we strongly suggest that you just by no means omit this feature:

Essential to notice:

Very often, preheaders function the continuation of the topic line. Some manufacturers use it even for storytelling.

Nonetheless, for those who solely set the topic line and no preheader, any e mail consumer will present part of the textual content written within the first paragraph of your e mail. It could look considerably awkward because it usually says one thing like, “Do not see the pictures? Here is the hyperlink to the net model of the e-mail”. It’s possible you’ll keep away from it!

In case you consider that the topic line alone is sufficient and you do not need to present any preheader, simply add whitespace as a substitute of the latter.

In case you allow this feature, your e mail will appear like the e-mail from WWF, the World Wildlife Fund:

(Supply: Gmail)

It’s also possible to add whitespace in case your preheader is brief sufficient.

Step 2. How you can add the Internet Model hyperlink to your emails

Typically photos, GIFs in our emails do not work. Or in case your e mail is participating sufficient, customers would possibly need to share it with their pals.

Subsequently, we have to add the “View in browser”, aka “Internet model” hyperlink. 

(Supply: E mail from Stripo)

Usually, it’s positioned both in e mail header, or e mail footer. There are not any strict guidelines.

To get a hyperlink to the net model of your e mail with Stripo, it is advisable:

• enter the “Preview mode”;
• in a brand new window, click on “Copy” to avoid wasting the hyperlink to your clipboard;

Step 3. How you can add a header and emblem with Stripo and what your e mail will appear like

It’s been stated many instances that e mail header is the face of your e mail and your model, as nicely. Be sure you add your organization emblem and its identify. 

How you can construct e mail header with emblem and menu in Stirpo:

• drag a two-column construction in your HTML e mail template for Gmail;
• pull the “Picture” block in the left one. Add your emblem;
• drag the “Menu” block into your template. Identify every menu merchandise. Add your hyperlinks;
• now to set the scale/width of every column, activate the settings for your entire construction by clicking the “Construction” label within the template space;
• within the settings panel, set columns, aka containers, width and indent between them.

It’s also possible to add social media icons and speak to data within the e mail header, as nicely.

For extra detailed data on how one can work on e mail menus, please seek advice from the “Add menu with Stripo” weblog submit.

Step 4. How you can add a banner with Stripo and what your e mail will appear like

That is our favourite factor of templates. Banners set the temper for a complete e mail. Thus, it is advisable work completely on it. Discover and insert the most effective picture you want. I’m proud to say that presently, we’re the one editor that allows you to apply particular filters to banner photos with none photograph editors and third-party instruments. Then you could place textual content over this picture and wrap it in banner/ornamental fonts — we provide over 40.

Additionally, with us, you could apply an extra picture over a banner. This allows you to create multi-layer banners with none photograph editor.

For extra data on how one can construct banners, please seek advice from our weblog submit “How you can construct banners with Stripo in below 10 minutes”, or watch a brief video.

Step 5. How you can add buildings, aka rows, with Stripo and what your e mail will appear like

A picture and a textual content, two photographs and two textual content blocks in a row? It’s as much as you to resolve. It is a widespread function. Nonetheless, many editors allow you to select between one or two columns in a row. With us, you’ll be able to select as much as 4 of them with 1 click on. Under, we’ll present how one can place as much as 8 containers in a row.

Drag the required one into your HTML e mail template for Gmail.

Then add obligatory content material in every column/container.

Check out the instance of a two-column construction in e mail:

A 3-column construction in e mail:

As you’ll be able to see, you could add a button below description to each column.

A four-column construction:

If 4 columns per row will not be sufficient for you, you’ll be able to add 4 columns extra. That would make 8 columns in complete.

How you can add additional columns to your Gmail HTML e mail, it is advisable:

• add 1-4 extra containers;
• then you’ll be able to set the width to your columns. Set both particular person width for every container, or equalize all of them.

Apply background photos or colours to every column individually, or a single one for a complete construction/row.

Step 6. How you can add Social media icons with Stripo and what your e mail will appear like

Find them wherever you need.  

We provide 70 social media icons, not solely the most well-liked ones for Fb, Twitter, and Instagram. We did our greatest to assemble all of them to your comfort.

It’s possible you’ll choose the colour scheme, and set their dimension.

That is quite simple: drag-and-drop the “Social” block into the required construction, design your icons and paste your URLs into the “Hyperlink” fields.

What’s so nice about our social media icons? 

You’ll be able to configure them simply as soon as — and use throughout all campaigns with out the need to even add hyperlinks and work on their design. 

To take action, it is advisable fill out your social media data in your profile with Stripo. When constructing your subsequent marketing campaign — you simply drag the essential “Social” block in your Gmail HTML e mail and Stripo will insert the icons you’ve already picked, with respective hyperlinks, and the design that you just’ve set.

For extra data on how one can add and design social media icons in your HTML e mail templates, please seek advice from our weblog submit.

Step 7. How you can use our library of Content material Modules in order that it lets you create HTML emails in Gmail sooner

Undoubtedly, you extremely worth your time and don’t really feel like creating related templates daily. Identical right here. Because of this motive, we determined to invent the Library of Content material Modules. It is extremely simple to make use of our Library: After getting created a template, save the module/e mail factor that it is advisable the library, give it a reputation. And subsequent time when beginning a brand new marketing campaign, you’ll solely have to pull and drop it into a brand new template.

Save any e mail factor that you just want: From little containers to whole rows/buildings.

Within the “My modules” tab, you will note the modules you’ve beforehand saved. Within the “Template modules”, you could get the modules which have been extracted from the very template by the system. And the “Pre-built” part incorporates the modules that had been constructed by our coders and designers.

These Reusable Modules do save time. Our consumer Felipe Guerra from iLogica shares his expertise with our readers so that everybody who has been hesitating whether or not to present this feature a strive, begins utilizing it straight away and saves hours on e mail manufacturing.  

Step 8. How you can construct Gmail promotion annotations with Stripo and what your e mail will appear like on cell units

Gmail divides incoming emails into tabs: main for private emails, promo emails, updates, and many others. Customers set the variety of these tabs on their very own.

If you’re sending bulk emails through Gmail, your emails are prone to be delivered to the promotions tab.

The promotion annotations will assist your emails stand out amongst quite a lot of incoming emails in customers’ inboxes.

This function is supposed for cell units solely.

For extra data on how one can construct annotations, please seek advice from our weblog submit.

Step 9. How you can add AMP parts to your emails and what your e mail will appear like in Gmail

In March 2019, Google rolled out its AMP for emails. And Stripo is the primary drag-n-drop e mail template builder that enables creating AMP emails with no coding abilities in any respect.

Stirpo provides three drag-n-drop AMP blocks:

• accordion — to current your content material in sections. Works finest for lengthy emails;

• picture carousel — to put 3-16 banners on one display. Recipients will solely must click on the “arrow” to see all photos from the carousel;

• type — interactive types enable customers to go away a remark and share their suggestions in your providers straight in emails. AB check reveals that interactive types are 5.2X time extra suggestions in comparison with common exterior types.

It’s also possible to construct AMP parts with Google playground, and embed them in your Gmail HTML e mail templates for our open code editor.

For extra data on how one can construct AMP emails with Stripo, please seek advice from our devoted weblog submit.

Please, keep in mind that you may additionally add the next options in your Gmail HTML emails:

All of the aforementioned parts render completely nicely in Gmail, but they are often simply constructed with Stripo with little to no HTML coding abilities.

Step 10. How you can preview HTML emails earlier than you export them to Gmail

Simply click on the preview button proper above your e mail. 

Right here you will note each desktop and cell variations of your e mail.

Each variations have their subversions: AMP and HTML. Be sure you verify all of them. 

In case your AMP e mail has any errors, our editor will present them.

Click on the error icon to see what bugs you’ve and little recommendations on how one can repair them.

Essential to notice:

The Gmail app doesn’t help media queries, on each Android and iOS. 

No, this doesn’t imply that your recipients will see a horizontal scroll. They may simply see a desktop model of your e mail as a substitute of the cell one.

(The Gmail app. E mail despatched by means of Gmail)

This occurs solely if you ship your e mail to Gmail drafts. 

In case you ship mass emails by means of your ESP, the e-mail can be totally responsive, all containers can be stretched to the display width — one container per row.

(The Gmail app. E mail despatched by means of ESP)

2. Exporting HTML emails to Gmail

To ship your HTML e mail template to Gmail, it is advisable:

• in a pop-up window, decide Gmail. Guarantee that the pop-up window possibility is lively in your browser;

• in a brand new pop-up window, you may be requested to sign up with Google. Enter your login and password;
• give Stripo entry to your drafts by clicking the “Permit” button;

You do that simply as soon as. When exporting HTML emails to Gmail subsequent time, you’ll solely want to select Gmail from the Exporting record — and the e-mail can be exported to this e mail consumer straight away.

Essential to notice:

First, yearly since we have rolled out direct export to Gmail, we go the Safety check by Bishop Fox to make sure your knowledge is secure with us.

Second, by permitting Stripo entry to your Gmail account, you give us entry to the Drafts folder solely. We is not going to have entry to every other folder, to not your contact base.

Now that your e mail has been delivered to your Gmail account, to the Draft folder, it is able to be despatched. 

Set topic line, enter recipients. Finished!

Within the “How you can Ship Mass Emails Utilizing Gmail” weblog submit, we confirmed how one can ship bulk emails to 2 000 recipients without delay.

Attempt Stripo out

By the way in which, you’ll be able to nonetheless edit e mail templates previous to sending them out! 

3 and 4. Gmail technical restrictions and how one can cope with some through the use of Stripo

I learn quite a lot of details and hypotheses about Gmail and determined to check all of them. Right here they’re:

Speculation 1. Gmail means that recipients obtain photos with out hyperlinks

The net says that if any picture in an HTML formatted e mail doesn’t comprise any hyperlinks, then Gmail will recommend that your customers obtain that.

I’ve examined — that is so true. It’s possible you’ll not need this “obtain” button as a result of it harms your entire design, and e mail doesn’t look skilled that manner.

Resolution:

When including photos to insert into an e mail, you’ll be able to nonetheless add a hyperlink. However even for those who neglect, our system has a “hyperlink” set as a default one:

Undoubtedly, it gained’t take your clients wherever, but there is not going to be the irritating “obtain” button over photos in emails.

Conclusion: true.

Speculation 2. Pictures with out Alt-text might go to the Spam folder

I wager you’ve heard it, too, that emails with photos do get into the spam folder when there is no such thing as a alt textual content (alt tag) to each picture used.

I intentionally despatched out many emails with eliminated Alt textual content, they usually made it to the inbox button with none points. But, this time I examined Gmail solely. So we can’t promise that your emails with out alt textual content will go Outlook or Apple Mail spam filters. Consequently, if you’ll ship emails not solely to Gmail customers, you will have alt textual content to go spam filters.

Essential to notice:

Irrespective of how simple it’s to go the SPAM filters, we strongly suggest that you just add alt texts to photographs. First, out of e mail accessibility causes. Second, in the event that they get blocked by e mail shoppers, recipients will nonetheless have an thought of what the message is all about. Attempt to make alt texts as clear as potential.

Conclusion: emails with out Alt textual content do get delivered to Incoming. However that could possibly be simply luck :). In addition to, we have to add Alt textual content to photographs for different e mail shoppers and for accessibility.

Speculation 3. Gmail clips messages

That is true.

Gmail clips emails which can be bigger than:

• 102 kB, conventional HTML e mail;
• 200 kB, AMP HTML e mail. 

On the finish of the seen a part of an e mail, it provides to “view whole message”.

Resolution:

Presently, there is no such thing as a technical risk to win over this. But, you’ll be able to weigh your emails with us:

• merely click on the “export” button;
• select “HTML”;
• obtain HTML;

File properties stated that this Gmail HTML e mail template is 65 kB. I’ve verified this data with a couple of functions, together with mail-tester.com. All of them confirmed that file weight.

Conclusion: true. We all know how one can weigh our emails.

Speculation 4. Undo button doesn’t work for mass emails

Completely false in case you employ Gmail with none add-ons like Gmail Mail Merge. All you need to do is go to your settings.

I attempted to use this trick to my mass emails and it labored.

Resolution: 

Within the settings panel, discover the “Undo Ship” possibility and set the time that fits you. It varies from 5 to 30 seconds.

I attempted to use this trick to my mass emails and it labored.

Conclusion: false.

Speculation 5. Textual content blocks with over 8 500 characters are eliminated

As a copywriter or only a girl, I really like lengthy sentences, detailed explanations. And I made a decision to insert one of many articles into the textual content block. That article contained about 10,000 characters excluding areas. And despatched that e mail to my good friend. My e mail was delivered, not one of the blocks was clipped or eliminated.

So we are able to say that this speculation was not confirmed. Which is nice, by the way in which. However I sincerely doubt that any of us will ship that lengthy e mail to our shoppers.

Conclusion: false.

Speculation 6. Telephone numbers and e mail addresses turn into clickable in HTML emails on Gmail

I heard that Gmail inserts hyperlinks to our e mail addresses and telephone numbers in emails — makes them clickable, in different phrases. I’ve examined tons of cellular phone numbers. You recognize what? Not one of the numbers was clickable. I nonetheless have to focus on and duplicate it to make use of.

But!! The scenario with the e-mail addresses was fairly humorous. They had been both gray but clickable or blue, underlined however non-clickable.

Conclusion: false. We have now to handle it manually :).

Resolution:

Add “Mailto” hyperlinks to each e mail tackle that you just share in your e mail.

For extra data on how one can set “Mailto” hyperlinks in emails, please seek advice from the weblog submit given beneath.

Speculation 7. Backgrounds don’t render in Gmail desktop if the e-mail width exceeds 640 pixels

Many e mail entrepreneurs declare that Gmail doesn’t show an e mail’s background colour, nor background picture if the e-mail width exceeds 640 pixels.

And, after all, we examined that.

The background picture/colour — we examined each — had been displayed in Gmail throughout all units and all net browsers.

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

Conclusion: false.

Speculation 8. Gmail does substitute customized fonts with the default ones

Customized fonts make your e mail design much more distinctive. Nonetheless, it’s true: Gmail tends to exchange some customized fonts with the default one — Arial.

I’ve examined 4 totally different fonts.

Right here’s how they labored:

1. Nice Vibes — labored nicely on cell and desktop;
2. Dokdo — was changed with Arial;
3. Alexa Std — was changed with Arial;
4. Montserrat — was changed with Arial.

Conclusion: partially true. However it is advisable check to search out which fonts of the ones that you just actually like don’t get changed by the default fonts.

Please keep in mind that you may add customized fonts with Stripo.

Remaining ideas

Now that you know the way to create an HTML e mail in Gmail, how one can ship bulk emails by means of Gmail without spending a dime, we hope you’ll ship solely elegant HTML emails even for private correspondence.