Saturday, November 11, 2023
HomeEmail MarketingLearn how to Create & Ship HTML Emails by way of Gmail...

Learn how to Create & Ship HTML Emails by way of Gmail Utilizing Stripo? — Stripo.e-mail


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 shopper with only one click on.

How to Create and Send HTML Email via Gmail with Stripo

Wanna do the identical inside simply minutes?

Join free

On this article, I’ll:

  • create an HTML e-mail template;
  • export it to my Gmail account;
  • spotlight some Gmail technical options;
  • and at last, 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, you might want to construct one.

There are 3 ways to do it:

Means 1. Utilizing our prebuilt HTML e-mail templates 

Stripo provides over 1000+ ready-to-use templates. They’re categorized by sorts, 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 probably the most. Positively, you will want to customise it in order that your Gmail HTML e-mail template suits your model fashion. It gained’t take you lengthy.

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

Browse

Means 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” accommodates an evidence of tips on how to use our Drag-n-Drop blocks.

Create HTML Email Template in Gmail _ Basic Templates

You may also choose the “Empty Template” on this part to easily drag primary blocks into your Gmail HTML e-mail template.

Means 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 simplest ones, in my view. Let’s survey them.

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

We’ve revealed a weblog put up “Stripo A to Z“. There we confirmed intimately tips on how to work on emails with Stripo. Nonetheless, I might love so as to add just a few strains right here.

Step 1. Learn how to set a topic line and a preheader with Stripo and what your e-mail will appear like

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

This is the reason we strongly suggest that you just by no means omit this selection:

Send HTML Template Through Gmail _ Setting Subject Line and Preheader

Necessary to notice:

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

Nonetheless, if you happen to solely set the topic line and no preheader, any e-mail shopper 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? This is the hyperlink to the online model of the e-mail”. You might keep away from it!

For those who imagine that the topic line alone is sufficient and you do not need to present any preheader, simply add whitespace as an alternative of the latter.

How to Send HTML Email in Gmail _ Adding Whitespace to Subject Line

For those who allow this selection, your e-mail will appear like the e-mail from WWF, the World Wildlife Fund:

How to Send HTML Email in Gmail _ Example of Emails with Whitespaces as Preheder

(Supply: Gmail)

You may also add whitespace in case your preheader is brief sufficient.

Step 2. Learn how to 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 buddies.

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

How to Send HTML Email Template Through Gmail _ Adding the View in Browser Link to Email Footer

(Supply: Electronic mail from Stripo)

Usually, it’s positioned both in e-mail header, or e-mail footer. There aren’t any strict guidelines.

To get a hyperlink to the online model of your e-mail with Stripo, you might want to:

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

Step 3. Learn how to add a header and brand 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 effectively. Ensure you add your organization brand and its title. 

Export to Gmail Header and Logo _ Stripo

Learn how to construct e-mail header with brand 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 brand;
  • drag the “Menu” block into your template. Title every menu merchandise. Add your hyperlinks;
  • now to set the scale/width of every column, activate the settings for the complete construction by clicking the “Construction” label within the template space;
  • within the settings panel, set columns, aka containers, width and indent between them.

Building Responsive HTML Email Template for Gmail _ Adding Containers

You may also add social media icons and make contact with info within the e-mail header, as effectively.

For extra detailed info on tips on how to work on e-mail menus, please discuss with the “Add menu with Stripo” weblog put up.

Step 4. Learn how to add a banner with Stripo and what your e-mail will appear like

That is our favourite aspect of templates. Banners set the temper for a whole e-mail. Thus, you might want to work totally on it. Discover and insert the very best 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 picture 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.

Export to Gmail Banner _ Stripo

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

Multie-Layered Banner _ Updated

For extra info on tips on how to construct banners, please discuss with our weblog put up “Learn how to construct banners with Stripo in underneath 10 minutes”, or watch a brief video.

How to Make an Attractive Banner within Minutes with Stripo

Construct refined e-mail banners straight in Stripo

Be part of now

Step 5. Learn how to add buildings, aka rows, with Stripo and what your e-mail will appear like

A picture and a textual content, two pictures 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 possibly can select as much as 4 of them with 1 click on. Under, we are going to present tips on how to place as much as 8 containers in a row.

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

Export to Gmail Structures _ Stripo

Then add essential content material in every column/container.

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

Export to Gmail 2 blocks in Structure _ Stripo

A 3-column construction in e-mail:

Export to Gmail 3 Blocks in Structure _ Stripo

As you possibly can see, you could add a button underneath description to each column.

A four-column construction:

Export to Gmail 4 blocks in Structure _ Stripo

If 4 columns per row are usually not sufficient for you, you possibly can add 4 columns extra. That would make 8 columns in complete.

Learn how to add further columns to your Gmail HTML e-mail, you might want to:

Highlighting Structures in Emails _ Gmail HTML Email Template

Adding Columns to Structures _ How to Send HTML Email Template in Gmail

  • add 1-4 extra containers;
  • then you possibly can set the width on your columns. Set both particular person width for every container, or equalize all of them.

Sending HTML Email in Gmail _ Equalizing Containers

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

Step 6. Learn how to 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 collect all of them on your comfort.

Create HTML Email Template in Gmail _ Adding Social Media Icons

You might choose the colour scheme, and set their measurement.

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 may configure them simply as soon as — and use throughout all campaigns with out the need to even add hyperlinks and work on their design. 

Synchronizing Stripo Account with Social Media Channels

Construct the “Comply with us” part as soon as and use it in your future campaigns

Get began

To take action, you might want to fill out your social media info in your profile with Stripo. When constructing your subsequent marketing campaign — you simply drag the fundamental “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 info on tips on how to add and design social media icons in your HTML e-mail templates, please discuss with our weblog put up.

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

Positively, you extremely worth your time and don’t really feel like creating related templates day by day. Identical right here. On account of this cause, we determined to invent the Library of Content material Modules. It is rather straightforward to make use of our Library: After getting created a template, save the module/e-mail aspect that you might want to the library, give it a reputation. And subsequent time when beginning a brand new marketing campaign, you’ll solely have to tug and drop it into a brand new template.

Save any e-mail aspect that you just want: From little containers to total 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 accommodates the modules that have been constructed by our coders and designers.

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

Step 8. Learn how to construct Gmail promotion annotations with Stripo and what your e-mail will appear like on cell units

Gmail divides incoming emails into tabs: major 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 by way of Gmail, your emails are more likely to be delivered to the promotions tab.

The promotion annotations will assist your emails stand out amongst numerous incoming emails in customers’ inboxes.

Gmail Promotion Tab Email Example Inbox _ Stripo

Generate annotations on your promo emails to face out amongst a whole lot of emails in customers’ inboxes

Get began

This function is supposed for cell units solely.

For extra info on tips on how to construct annotations, please discuss with our weblog put up.

Step 9. Learn how to 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 permits 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 screen. Recipients will solely must click on the “arrow” to see all photos from the carousel;

Creating HTML Email Template for Gmail _ AMP Content _ Image Carousel

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

Designing HTML Email Template for Gmail _ Interactive Forms

You may also construct AMP elements with Google playground, and embed them in your Gmail HTML e-mail templates for our open code editor.

For extra info on tips on how to construct AMP emails with Stripo, please discuss with our devoted weblog put up.

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

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

Step 10. Learn how to 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. Make sure to verify all of them. 

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

How to Build HTML Email Template for Gmail _ Errors in AMP Email

Click on the error icon to see what bugs you’ve and little tips about tips on how to repair them.

Necessary to notice:

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

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

Send HTML Emails via Gmail _ Fully Responsive Emails

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

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

For those who ship mass emails by means of your ESP, the e-mail will probably be totally responsive, all containers will probably be stretched to the display screen width — one container per row.

Send HTML Emails Through Gmail _ Mobile-friendly Design

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

2. Exporting HTML emails to Gmail

To ship your HTML e-mail template to Gmail, you might want to:

How to Send HTML Email via Gmail _ Exporting Emails to Gmail

  • in a pop-up window, choose Gmail. Ensure that the pop-up window possibility is energetic in your browser;

Exporting HTML Email Templates to Gmail for Further Sending

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

Giving Stripo Access to Your Drafts

Send HTML Emails Through Gmail _ Finding Your Email in the Drafts Folder

You do that simply as soon as. When exporting HTML emails to Gmail subsequent time, you’ll solely want to choose Gmail from the Exporting checklist — and the e-mail will probably be exported to this e-mail shopper instantly.

Necessary to notice:

First, yearly since we have rolled out direct export to Gmail, we move the Safety check by Bishop Fox to make sure your information is protected 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 some 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. Completed!

Within the “Learn how to Ship Mass Emails Utilizing Gmail” weblog put up, we confirmed tips on how to ship bulk emails to 2 000 recipients directly.

Strive Stripo out

By the best way, you possibly can nonetheless edit e-mail templates previous to sending them out! 

3 and 4. Gmail technical restrictions and tips on how to cope with some by utilizing Stripo

I learn numerous information 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 online says that if any picture in an HTML formatted e-mail doesn’t include any hyperlinks, then Gmail will recommend that your customers obtain that.

I’ve examined — that is so true. You might not need this “obtain” button as a result of it harms the complete design, and e-mail doesn’t look skilled that manner.

Export to Gmail Download button _ Stripo

Resolution:

When including photos to insert into an e-mail, you possibly can nonetheless add a hyperlink. However even if you happen to neglect, our system has a “hyperlink” set as a default one:

Export to Gmail Adding Links _ Stripo

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

Conclusion: true.

Speculation 2. Photos 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, and so they made it to the inbox button with none points. But, this time I examined Gmail solely. So we can not promise that your emails with out alt textual content will move Outlook or Apple Mail spam filters. Consequently, if you’re going to ship emails not solely to Gmail customers, you will want alt textual content to move spam filters.

Export Gmail Alt Text _ Stripo

Necessary to notice:

Regardless of how straightforward it’s to move the SPAM filters, we strongly suggest that you just add alt texts to pictures. First, out of e-mail accessibility causes. Second, in the event that they get blocked by e-mail purchasers, recipients will nonetheless have an concept 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 may very well be simply luck :). Moreover, we have to add Alt textual content to pictures for different e-mail purchasers and for accessibility.

Speculation 3. Gmail clips messages

That is true.

Gmail clips emails which are 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 total message”.

Clipped Messages _ Gmail

Resolution:

At the moment, there is no such thing as a technical risk to win over this. But, you possibly can weigh your emails with us:

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

Scaling Emails _ Creating HTML Emails in Gmail

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

Conclusion: true. We all know tips on how to 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 it’s important 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.

Sending HTML Email through Gmail _ The Unsend Button

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 lady, 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 will say that this speculation was not confirmed. Which is nice, by the best way. However I sincerely doubt that any of us will ship that lengthy e-mail to our purchasers.

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 cellphone numbers in emails — makes them clickable, in different phrases. I’ve examined tons of mobile phone numbers. You realize what? Not one of the numbers was clickable. I nonetheless have to focus on and replica it to make use of.

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

Conclusion: false. We’ve to handle it manually :).

Resolution:

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

How to Build HTML Email Template for Gmail _ Adding Mailto Links

For extra info on tips on how to set “Mailto” hyperlinks in emails, please discuss with the weblog put up given under.

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, in fact, we examined that.

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

Send HTML Email Gmail _ Email Width 650 Pixels

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

Conclusion: false.

Speculation 8. Gmail does change 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 effectively 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 you might want to check to search out which fonts of the ones that you just actually like don’t get changed by the default fonts.

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

Ultimate ideas

Now that you understand how to create an HTML e-mail in Gmail, tips on how to ship bulk emails by means of Gmail at no cost, we hope you’ll ship solely elegant HTML emails even for private correspondence.

Construct HTML Emails for Gmail with Stripo Effortlessly. 

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments