Sending elegant HTML emails via 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 electronic mail consumer with only one click on.
Wanna do the identical inside simply minutes?
On this article, I’ll:
-
create an HTML electronic mail template;
-
export it to my Gmail account;
-
spotlight some Gmail technical options;
-
and eventually, will survey how Stripo helps take care of them — in different phrases, what makes our templates appropriate with Gmail.
1. Creating an electronic mail
Previous to exporting electronic mail templates to your Gmail account, it’s essential to construct one.
There are 3 ways to do it:
Method 1. Utilizing our prebuilt HTML electronic mail templates
Stripo provides over 1000+ ready-to-use templates. They’re categorized by varieties, like affirmation, deserted cart, promo, welcome, and so forth., by options, like conventional HTML, Interactive (written in HTML5), and AMP emails (written in AMP HTML) — as we all know, AMP for electronic mail is absolutely supported by Gmail, and by seasons and holidays. Select the one you want probably the most. Undoubtedly, you have to to customise it in order that your Gmail HTML electronic mail template matches your model type. It gained’t take you lengthy.
Use prebuilt templates to ship high-quality HTML emails via Gmail
Method 2. Creating an HTML electronic mail template from scratch
Log into your Stripo account, go to the Templates tab, then select the “Primary templates”. There you will see 8 electronic mail mockups, aka prototypes. The “Coaching Template” comprises a proof of tips on how to use our Drag-n-Drop blocks.
You can even choose the “Empty Template” on this part to easily drag fundamental blocks into your Gmail HTML electronic mail template.
Method 3. Importing your customized HTML code
Go to your private account, the “templates” tab —> “fundamental 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 electronic mail templates?
We’ve printed a weblog publish “Stripo A to Z“. There we confirmed intimately tips on how to work on emails with Stripo. Nonetheless, I’d love so as to add a number of traces right here.
Step 1. How one can set a topic line and a preheader with Stripo and what your electronic mail will appear like
It’s a well-known reality 69% of recipients decide whether or not to open the e-mail by sender title, topic line, and preheader.
For this reason 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, when you solely set the topic line and no preheader, any electronic mail consumer will present part of the textual content written within the first paragraph of your electronic mail. It might look considerably awkward because it usually says one thing like, “Do not see the pictures? Here is the hyperlink to the online model of the e-mail”. You could 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 electronic mail will appear like the e-mail from WWF, the World Wildlife Fund:
(Supply: Gmail)
You can even add whitespace in case your preheader is brief sufficient.
Step 2. How one can add the Internet Model hyperlink to your emails
Typically pictures, GIFs in our emails do not work. Or in case your electronic mail is partaking sufficient, customers may need to share it with their mates.
Due to this fact, we have to add the “View in browser”, aka “Internet model” hyperlink.
(Supply: E mail from Stripo)
Usually, it’s positioned both in electronic mail header, or electronic mail footer. There aren’t any strict guidelines.
To get a hyperlink to the online model of your electronic mail with Stripo, it’s essential to:
-
enter the “Preview mode”;
-
in a brand new window, click on “Copy” to save lots of the hyperlink to your clipboard;
Step 3. How one can add a header and emblem with Stripo and what your electronic mail will appear like
It’s been stated many instances that electronic mail header is the face of your electronic mail and your model, as effectively. Be sure to add your organization emblem and its title.
How one can construct electronic mail header with emblem and menu in Stirpo:
- drag a two-column construction in your HTML electronic 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 the whole construction by clicking the “Construction” label within the template space;
- within the settings panel, set columns, aka containers, width and indent between them.
You can even add social media icons and get in touch with info within the electronic mail header, as effectively.
For extra detailed info on tips on how to work on electronic mail menus, please consult with the “Add menu with Stripo” weblog publish.
Step 4. How one can add a banner with Stripo and what your electronic mail will appear like
That is our favourite ingredient of templates. Banners set the temper for a whole electronic mail. Thus, it’s essential to work totally on it. Discover and insert the most effective picture you want. I’m proud to say that presently, we’re the one editor that lets you apply particular filters to banner pictures with none picture editors and third-party instruments. Then chances are you’ll place textual content over this picture and wrap it in banner/ornamental fonts — we provide over 40.
Additionally, with us, chances are you’ll apply a further picture over a banner. This allows you to create multi-layer banners with none picture editor.
For extra info on tips on how to construct banners, please consult with our weblog publish “How one can construct banners with Stripo in beneath 10 minutes”, or watch a brief video.
Construct subtle electronic mail banners straight in Stripo
Step 5. How one can add constructions, aka rows, with Stripo and what your electronic mail will appear like
A picture and a textual content, two images and two textual content blocks in a row? It’s as much as you to determine. This can be a widespread function. Nonetheless, many editors allow you to select between one or two columns in a row. With us, you may select as much as 4 of them with 1 click on. Beneath, we’ll present tips on how to place as much as 8 containers in a row.
Drag the mandatory one into your HTML electronic mail template for Gmail.
Then add mandatory content material in every column/container.
Check out the instance of a two-column construction in electronic mail:
A 3-column construction in electronic mail:
As you may see, chances are you’ll add a button beneath description to each column.
A four-column construction:
If 4 columns per row are usually not sufficient for you, you may add 4 columns extra. That would make 8 columns in complete.
How one can add further columns to your Gmail HTML electronic mail, it’s essential to:
Apply background pictures or colours to every column individually, or a single one for a whole construction/row.
Step 6. How one can add Social media icons with Stripo and what your electronic mail will appear like
Find them wherever you need.
We provide 70 social media icons, not solely the preferred ones for Fb, Twitter, and Instagram. We did our greatest to collect all of them on your comfort.
You could choose the colour scheme, and set their dimension.
That is quite simple: drag-and-drop the “Social” block into the mandatory 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.
Construct the “Observe us” part as soon as and use it in your future campaigns
To take action, it’s essential to fill out your social media info in your profile with Stripo. When constructing your subsequent marketing campaign — you simply drag the essential “Social” block in your Gmail HTML electronic mail and Stripo will insert the icons you’ve got 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 electronic mail templates, please consult with our weblog publish.
Step 7. How one can use our library of Content material Modules in order that it lets you create HTML emails in Gmail quicker
Undoubtedly, you extremely worth your time and don’t really feel like creating related templates day by day. Identical right here. As a consequence of this cause, we determined to invent the Library of Content material Modules. It is extremely simple to make use of our Library: Upon getting created a template, save the module/electronic mail ingredient that it’s essential to 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 electronic mail ingredient that you just want: From little containers to complete rows/constructions.
Within the “My modules” tab, you will notice the modules you’ve got beforehand saved. Within the “Template modules”, chances are you’ll get the modules which have been extracted from the very template by the system. And the “Pre-built” part comprises the modules that have 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 provide this feature a strive, begins utilizing it instantly and saves hours on electronic mail manufacturing.
Step 8. How one can construct Gmail promotion annotations with Stripo and what your electronic mail will appear like on cellular gadgets
Gmail divides incoming emails into tabs: major for private emails, promo emails, updates, and so forth. Customers set the variety of these tabs on their very own.
In case you are sending bulk emails by way of Gmail, your emails are prone to be delivered to the promotions tab.
The promotion annotations will assist your emails stand out amongst a variety of incoming emails in customers’ inboxes.
Generate annotations on your promo emails to face out amongst tons of of emails in customers’ inboxes
This function is supposed for cellular gadgets solely.
For extra info on tips on how to construct annotations, please consult with our weblog publish.
Step 9. How one can add AMP components to your emails and what your electronic mail will appear like in Gmail
In March 2019, Google rolled out its AMP for emails. And Stripo is the primary drag-n-drop electronic mail template builder that enables creating AMP emails with no coding expertise in any respect.
Stirpo provides three drag-n-drop AMP blocks:
- accordion — to current your content material in sections. Works greatest for lengthy emails;
- picture carousel — to put 3-16 banners on one display. Recipients will solely have to click on the “arrow” to see all pictures from the carousel;
- type — interactive kinds permit customers to depart a remark and share their suggestions in your companies straight in emails. AB take a look at reveals that interactive kinds are 5.2X time extra suggestions in comparison with common exterior kinds.
You can even construct AMP elements with Google playground, and embed them in your Gmail HTML electronic mail templates for our open code editor.
For extra info on tips on how to construct AMP emails with Stripo, please consult with our devoted weblog publish.
Please, keep in mind that you may additionally add the next options in your Gmail HTML emails:
All of the aforementioned components render completely effectively in Gmail, but they are often simply constructed with Stripo with little to no HTML coding expertise.
Step 10. How one can preview HTML emails earlier than you export them to Gmail
Simply click on the preview button proper above your electronic mail.
Right here you will notice each desktop and cellular variations of your electronic mail.
Each variations have their subversions: AMP and HTML. Remember to examine all of them.
In case your AMP electronic mail has any errors, our editor will present them.
Click on the error icon to see what bugs you’ve got and little tips about tips on how to repair them.
Essential 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 are going to simply see a desktop model of your electronic mail as a substitute of the cellular one.
(The Gmail app. E mail despatched via Gmail)
This occurs solely whenever you ship your electronic mail to Gmail drafts.
In case you ship mass emails via your ESP, the e-mail shall be absolutely responsive, all containers shall be stretched to the display width — one container per row.
(The Gmail app. E mail despatched via ESP)
2. Exporting HTML emails to Gmail
To ship your HTML electronic mail template to Gmail, it’s essential to:
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 checklist — and the e-mail shall be exported to this electronic mail consumer instantly.
Essential to notice:
First, yearly since we have rolled out direct export to Gmail, we move the Safety take a look at by Bishop Fox to make sure your information is secure with us.
Second, by permitting Stripo entry to your Gmail account, you give us entry to the Drafts folder solely. We won’t have entry to some other folder, to not your contact base.
Now that your electronic mail has been delivered to your Gmail account, to the Draft folder, it is able to be despatched.
Set topic line, enter recipients. Achieved!
Within the “How one can Ship Mass Emails Utilizing Gmail” weblog publish, we confirmed tips on how to ship bulk emails to 2 000 recipients without delay.
By the way in which, you may nonetheless edit electronic mail templates previous to sending them out!
3 and 4. Gmail technical restrictions and tips on how to take care of some through the use of Stripo
I learn a variety of information and hypotheses about Gmail and determined to check all of them. Right here they’re:
Speculation 1. Gmail means that recipients obtain pictures with out hyperlinks
The online says that if any picture in an HTML formatted electronic mail doesn’t comprise any hyperlinks, then Gmail will counsel that your customers obtain that.
I’ve examined — that is so true. You could not need this “obtain” button as a result of it harms the whole design, and electronic mail doesn’t look skilled that manner.
Answer:
When including pictures to insert into an electronic mail, you may nonetheless add a hyperlink. However even when you neglect, our system has a “hyperlink” set as a default one:
Undoubtedly, it gained’t take your prospects wherever, but there won’t be the irritating “obtain” button over pictures in emails.
Conclusion: true.
Speculation 2. Pictures with out Alt-text could go to the Spam folder
I wager you’ve got heard it, too, that emails with pictures 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’t 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 have to alt textual content to move spam filters.
Essential to notice:
Irrespective of how simple it’s to move the SPAM filters, we strongly suggest that you just add alt texts to pictures. First, out of electronic mail accessibility causes. Second, in the event that they get blocked by electronic mail shoppers, 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 might be simply luck 🙂 In addition to, we have to add Alt textual content to pictures for different electronic 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 electronic mail;
- 200 kB, AMP HTML electronic mail.
On the finish of the seen a part of an electronic mail, it provides to “view complete message”.
Answer:
At present, there is no such thing as a technical risk to win over this. But, you may weigh your emails with us:
File properties stated that this Gmail HTML electronic mail template is 65 kB. I’ve verified this info with a number of purposes, 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 a must to do is go to your settings.
I attempted to use this trick to my mass emails and it labored.
Answer:
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 lady, I 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 electronic mail to my good friend. My electronic 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 electronic mail to our shoppers.
Conclusion: false.
Speculation 6. Telephone numbers and electronic mail addresses turn into clickable in HTML emails on Gmail
I heard that Gmail inserts hyperlinks to our electronic mail addresses and cellphone numbers in emails — makes them clickable, in different phrases. I’ve examined tons of cellphone numbers. You recognize what? Not one of the numbers was clickable. I nonetheless have to focus on and replica it to make use of.
But!! The scenario 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 maintain it manually 🙂
Answer:
Add “Mailto” hyperlinks to each electronic mail handle that you just share in your electronic mail.
For extra info on tips on how to set “Mailto” hyperlinks in emails, please consult with the weblog publish given under.
Speculation 7. Backgrounds don’t render in Gmail desktop if the e-mail width exceeds 640 pixels
Many electronic mail entrepreneurs declare that Gmail doesn’t show an electronic 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 — have been displayed in Gmail throughout all gadgets and all net browsers.
(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 electronic mail design much more distinctive. Nonetheless, it’s true: Gmail tends to switch some customized fonts with the default one — Arial.
I’ve examined 4 totally different fonts.
Right here’s how they labored:
-
Nice Vibes — labored effectively on cellular and desktop;
-
Dokdo — was changed with Arial;
-
Alexa Std — was changed with Arial;
-
Montserrat — was changed with Arial.
Conclusion: partially true. However it’s essential to take a look at 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.
Ultimate ideas
Now that you understand how to create an HTML electronic mail in Gmail, tips on how to ship bulk emails via Gmail without spending a dime, we hope you’ll ship solely elegant HTML emails even for private correspondence.
Construct HTML Emails for Gmail with Stripo Effortlessly.
