How to send HTML emails in Gmail
How to ship HTML emails in Gmail
Gmail is hugely popular, with more than than 1,5 billion accounts registered worldwide. Both individuals and businesses utilize information technology actively and who once becomes an avid Gmail user is usually hesitant to ever say adiós. No wonder, Gmail offers everything one needs to send and receive emails and packs it all in a very simple to use interface.
I result of simplifying the UI was hiding the proficient one-time HTML editor and for a good reason - 99,9% of users don't demand information technology at all. Simply without it, adding banners, images, tables or other visual media and making them all expect good together on any screen size is really tough (if not impossible). Luckily, with a unproblematic workaround, you tin can withal apply HTML templates in your Gmail messages.
Hold up. Earlier nosotros go on, exist certain to get your re-create of our 10 responsive HTML email templates. Including welcome email, newsletter, onboarding, and more.
Come across the email templates
Copy/pasting HTML into Gmail
At present let's see what happens if we just insert HTML code into a Gmail Etch window. We're non really sharing this e-mail with our entire mailing list so information technology can be simple stupid. Let's try with this ane:
<p>Simple HTML.</p> <h3><em>And so very unproblematic.</em></h3> <p><bridge style= "color: #ff0000;" >Lame joke that follows.</span></p> <p> <span mode= "color: #ff0000;" ><img src= "https://afinde-production.s3.amazonaws.com/uploads/981ebabb-5722-44c1-ad30-fc57fbc8ee9d.jpeg" alt= "Lame joke" width= "245" height= "221" /></span> </p> <h2 style= "padding-left: 30px;" >do you?</h2> <ul> <li>yes</li> <li>no</li> <li><stiff>not entirely certain</potent></li> </ul> And let's paste it directly into Gmail and send:
Yup, that doesn't wait quite right. Gmail uses a WYSIWYG editor and so whatever you paste into the Compose window, will look simply about the same on the receiver'southward end. That's why nosotros'll need to take a different approach.
Inserting HTML into Gmail
First of all, compose or export HTML code and salve it as a .html file. Make sure your editor saves files as plaintext, without any boosted formatting. It likewise cannot add .txt or any other extensions to the file name, otherwise, the code won't be rendered properly. Mac's TextEdit, for instance, needs a few tweaks to piece of work with HTML as expected.
Now, endeavour to save it. Notice how it adds .txt extension by default, making the file useless. Be sure to use File -> Relieve on Mac and uncheck the part about .txt extension.
Right-click on the file and open it with a browser of your option. Information technology should render as expected. If you see raw HTML, double-cheque if the file was saved properly and if your editor relies on evidently text.
Copy the entire content of a page, either with Ctrl+A (Windows) / Cmd+A (Mac) or simply use a mouse or a trackpad. And then, insert it into your Gmail's compose window and send it!
The email should arrive in exactly the same shape as it was concluding seen leaving your inbox.
What to pay attending to when writing an HTML email?
Although HTML is a really uncomplicated framework, there are several features/limitations of Gmail that you demand to exist enlightened of. Here are the chief ones:
1. Images need to be hosted online and available publicly
If yous were to add images to an email, they would be stored as attachments. This is probably not the ideal way for a recipient to access the pictures. That's why images demand to be uploaded somewhere on the internet and referenced with a link in the HTML code.
If possible, store them on your ain server or apply, for example, Google Drive. When uploading to the latter 1, make certain the link is public, not private (trying to access it in the incognito mode should do the job). When uploading to popular epitome sharing services such as Imgur or Tinypic, make sure you lot fetch a direct link to an image, not to a folder where information technology's stored.
ii. External mode sheets won't piece of work
Gmail doesn't offer support for external styles. Y'all can, nonetheless, utilize embedded CSS besides every bit Inline styles. A good responsive email typically consists of a fair share of Inline CSS, used mainly to maintain a proper structure and styling of a message. Embedded CSS is used to add CSS Reset Styles and rules required to make an e-mail responsive.
iii. Y'all can't use spider web fonts
Gmail doesn't let y'all utilize whatsoever of the web fonts and at that place'south no way to import them into your HTML. Y'all'll need to utilize one of the available fonts in your emails:
Utilizing HTML editors
Merely do you really demand to write an entire HTML code from scratch or test how it looks on unlike screens? Likely, y'all don't. There'due south an abundance of gratis and paid email editors bachelor both online and for download.
Some costless editors worth a look are Htmlg.com or W3schood editor. They offer a bit more than the default Google editor. But the biggest value is from the chance to preview your emails every bit you write or change it.
More sophisticated tools come with lots of templates ready for any occasion. So whether you're later infographic templates or wish to invite someone to a wedding, y'all'll take plenty to choose from.
Pick the right one, adjust it to your needs, preview and download the unabridged HTML code. And so just follow the instructions above to send it with Gmail or use whatsoever other client or email service provider (ESP). About of these tools run on a freemium model, letting you try some basic templates for free and charging you for more advanced ones.
Final words
As you can see, sending HTML emails via Gmail isn't difficult at all. The catchy function might exist to display them properly in the vast array of browsers and email clients. With a chip of practice and the appropriate toolset, information technology shouldn't cause a problem too.
Now, pick the right e-mail design, launch Gmail or an email marketing provider of your choice and transport your next campaign without any hassle.
This is a guest post by Andriy Zapisotskyi, Growth Director at Mailtrap, a product that helps people audit and debug emails before sending them to real users. He has over five years of feel in the field of marketing & product. Andriy loves to network with people. Running is his hobby and he enjoys discovering new places. Yous tin connect with Andriy via Linkedin or Facebook
Receive email design content like this to your inbox.
No spam. Only related electronic mail content.
Source: https://htmlemail.io/blog/how-to-send-html-emails-in-gmail
Posting Komentar untuk "How to send HTML emails in Gmail"