In this quick tutorial, I will show you how to send HTML email using the standard Go library. In the end of this tutorial, you will be able to send a Newsletter email looking as below:
Before I start, all the code used in this demo can be found on my Github.
1 — HTML Template
Coding Email template is one of tasks that brings tears to a developer’s eyes because of the vast differences in HTML/CSS rendering between email clients. Email clients don’t render HTML in the same way as browsers do. CSS properties like float, background-image and even margins should not be part of your vocabulary while creating an HTML email template. So how to create a nice HTML email template then ?
Think back to 1999 which means Tables, cellpadding, cellspacing, colspan. All those shitty things you thought you’d left behind are now your closest friends.
In my experience, HTML email code gets very complicated, very quickly. So it’s always better to keep it simple and start with a plan:
So we will start off with our wrapper table with 100% as width and white background. I used cellpadding and cellspacing HTML attributes. Think of them like using margin and padding CSS properties:
Note: There are 4 rows inside the table:
- one at top for the header
- one in the middle for the main content
- one for the subscription button
- one at the bottom for the footer
Now we can start the process of coding our newsletter, section by section:
1.1 — Header
The header is pretty simple, it’s one column, and a text in the center of a row:
1.2 — Content
Our content section is quite simple, it’s just a paragraph, so the coding is straighforward:
Note: The {{ .username }} part will be replaced with the receiver name while parsing the HTML template by the template engine before sending the Email.
1.3 — Subscription Button
Now comes the most difficult part, button element are not supported in most of email clients, Therefore, we have to use tables and table cells :
Note: that we’re using bgcolor instead of background CSS property. This is because HTML values are better supported in email clients than CSS properties.
This is just one way to implement buttons in email. Admittedly, it doesn’t always look identical in every client, but the web is not always pixel-perfect either. I prefer this because it’s simpler and doesn’t involve using image assets or VML
1.4 — Footer
Footer is just repeating what we’ve already done on the header part.
Note: Don’t forget to add the meta tags:
Viewport:
<meta name=”viewport” content=”width=device-width”/>
It used to tell the browser that your email is responsive and can adapt to small screens like tablets and smartphones.
Charset:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8" />
It’s important in order to preserve the character encoding across various email clients.
And the main layout is now complete:
2 — Coding Part
2.2 — Mailer
It’s responsible for parsing the HTML template and send an Email
2.3 — Mailer Configuration
Responsible for mapping the configuration file into a Config object
Configuration file has the SMTP server information:
server=”smtp.gmail.com”
port=587
email=”YOUR EMAIL ADDRESS”
password=”EMAIL PASSWORD”
Note: The code above uses an external library to parse the config file, so be sure to grab it by typing the following command:
go get github.com/BurntSushi/toml
2.4 — Main application
It creates a new request with the mail subject and receiver email, then calls the Send method:
3 — Testing
There are a lot of clients to test, and a lot of ways to test them, let’s go over a small sets of Email Clients:
3.1 — Yahoo
3.2 — Gmail
3.3 — Mozilla Thunderbird
3.4 — Microsoft Outlook
3.5 — Android Email (5.0)
So as you can notice above the template we created is also responsive.