6 HTML Tips for your Email Templates that All Marketers Should Know
Most companies today are developing strong marketing automation strategies. Even though it can be annoying to receive dozens of promotional emails every day, let’s be honest: no other distribution channel drives engagement and builds customer relationships like email marketing. Since covid-19, customer relationships have been reduced almost entirely to online experiences, so it makes sense that marketing and engagement patterns have changed as a result.
According to Mailchimp, one of the leaders in marketing automation tools, users tracking engagement began to see a steady increase in click and open rates, accompanied by a decrease in unsubscribe rates compared to last year’s covid-free world.
So you might be wondering how to implement a successful email marketing strategy as well as what the best email marketing software for your business is. Instead of addressing this question, I would like to delve deeper into an operational subject: how does the HTML code in your email template work? In fact, I realized that most email marketing software enables users to make their own unique emails with a drag-and-drop editor so that HTML knowledge is no longer a prerequisite to be able to customize one’s layout, add calls-to-action and images, and modify content and colors to match one’s brand. However, it can happen that you need to be able to read the HTML code to fix design issues or add more personalization. This is not an easy task and that’s where this article might be useful to you.
I’m pretty sure most of you did not study HTML during your marketing studies and I definitely think it is something that should be taught. When it comes to HTML, most people typically end up in a “learn-by-doing” situation which may waste time while you’re interning in your dream company. Now here are my tips to save time and get ahead:
#1 — Get the HTML code of your email
First, you should know how to view the HTML code of an email you received before you even start coding. You might have seen an email from another brand that caught your attention: a nice header/footer, the shape of a button, that’s how you can have inspiration. Then if you want to be able to use the same idea in your email, looking at the code is the solution:
Copy and paste some part of the code of my competitor and adapt it to my graphic charter is my key advice to save some time.
Luckily, most email template includes a ‘view this email in your browser’ link (1). This feature offers an online version of emails to readers who may have trouble viewing HTML messages or have image loading turned off. It’s usually found in the preheader of the email. Once the email is opened in your browser (2), right-click the email and click on “View Page Source”. This will open a window and the code will appear, as if by magic (3).
#2 — Create and Edit a HTML File
The next step is editing your HTML file. You actually don’t need any fee-based HTML/CSS editor** such as Adobe Dreamweaver to design your email. You have default text editors in MacOs and Windows which respectively are TextEdit and Notepad.
To view how your email looks after editing > Open the Notepad/TextEdit file in a browser by double-clicking on the file.
*I recommend to use the free tool Notepad++ for editing which has great features
#3 — Change text format in HTML
First, let me remind you that it is important to use standards fonts that could render correctly on any devices and browsers like Arial, Times New Roman, Calibri,… Next, if you want to add a style to your text, such as a text in bold, use the Find function (Ctrl +F/ ⌘+ F) to localize your text in the code then simply add the opening tag <b> and the closing tag </b> and insert your text between these tags. You have many other styles:
#4 — Insert Space or Non-Breaking Space
If you want to add some space between paragraphs, to separate contents or text, you have several options:
· You can use the <br> tag that inserts a single line break within your text. Good to know, the <br> tag is an empty tag which means that it has no end tag.· The <hr> element is used to separate content (or define a change) in an HTML page· The <p> element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.
Source: https://www.w3schools.com/html/html_paragraphs.asp
#5 — Insert an image in your email template or fix a broken image
A broken image can easily be identified when you see that you’re missing images in your template or if nothing is displayed. It means that the source of the image cannot be found.
To replace an image you need to identify the image tag that should look like :
<img src ”http://emails.news.darty.com/EmailsDarty/emailsautodarty/nl_images_recurrente/pixel_dv/pixel-arriere-plan.png" alt=”Bien meubler” > (example of Darty email)
The <img> tag has two required attributes:
src — Specifies the path to the image
alt — Specifies an alternate text for the image
<img src=”url” alt=”alternatetext”>Source: https://www.w3schools.com/html/html_images.asp
Before replacing the image in your email template, it must be hosted in an image hosting service or you can host it directly in your email marketing tool or you can host the Image publicly in Google Drive by sharing the link ‘public on the Web’ or ‘anyone with the link’.
#6 — Change Link Destination href
If you want to add a link redirecting to your website on your CTA buttons, here’s how to do using the anchor tag:
Write the code <a href=” “>. Then add the text that should work as a link. Finally, add an </a> tag to indicate where the link ends.
<a href=”url”>link text</a>By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link. The target I use the most is “blank” to opens the url link in a new window or tab.
<a href=”https://www.w3schools.com/" target=”_blank”>Visit W3Schools!</a>Last but not least, if you want to use an image as a link, just put the <img> tag inside the <a> tag:
<a href=”default.asp”>
<img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;”>
</a>Source: https://www.w3schools.com/tags/att_a_href.asp
I hope you liked these tips, feel free to share with me your HTML issues I’ll be happy to help. Otherwise if you want to learn more about HTML, I recommend this free training course: https://www.freecodecamp.org
Also here are some great Email Marketing automation Tools for your company: Salesforce Marketing Cloud, MailChimp, Eloqua Oracle, Hubspot, Marketo.
Add your favourites in the comments below!
