When you create an email using a drag-and-drop or module-based tool, you’re actually generating an HTML email. As a marketer, you’ve probably compared HTML emails versus plain text emails and realized that each type has different benefits. HTML emails aren’t inherently better than plain text emails, and in different situations, both types can be part of a successful email marketing program. In this article, we’ll cover how you can get started creating creating HTML emails, regardless of your experience level and comfort with coding, and share some free templates you can use. Let’s dive in.
Plain Text vs. HTML Emails
There are two main types of email you can send and receive: plain text emails (these are exactly what they sound like — any email that contains just plain old text with no formatting) and HTML emails, which are formatted and styled using HTML and inline CSS. HTML emails are easy to spot — most of the styled, multimedia marketing emails in your inbox are HTML emails. Here’s what an HTML looks like on the front end. Click on the HTML button to see the code behind it.
How to Create an HTML Email
Good news: You actually don’t need to know how to code to create an HTML email. Most tools that create and send of email ouch as HubSpot) will offer pre-formatted, ready-to-go HTML templates that enable you to design emails without ever needing to access the actual code on the back end. As you make changes in the email editor, those changes will be automatically coded into the final product. Email-building tools like this are an ideal option if you don’t have an email designer on your team, but you still want to send professional-looking marketing emails.
Pro tip: Need help with the content of your email? HubSpot’s Campaign Assistant can create a customized first draft in just a few clicks— so you can get back to the fun part.
Still want to create an HTML email from scratch? If you you’re comfortable with HTML and want more direct control over the code of your emails, most email tools will allow you to import HTML files directly for use as custom email templates. There are a wide variety of free HTML email templates available on the web (some of which we’ll share below), and if you know your way around an HTML file, it’s usually quite straightforward to adapt the template to the email-building tool of your choice.
If you want to learn how to create an HTML email template completely from scratch, you’ll need to have an advanced knowledge of HTML (or work with a developer who does). This guide offers a solid overview of coding a basic HTML email. Because the process of creating an HTML email from scratch can be quite involved, we recommend working with a developer or using a pre-made HTML email template instead.
Developing an HTML email specifically for HubSpot? If you want to know how to create an HTML email template specifically for use in HubSpot, you’ll want to make sure you include the required HubL tokens (these ensure your emails can be customized and are compliant with CAN-SPAM laws). You can find a complete guide to coding HubSpot-specific HTML email templates here. Or alternatively, just use our simple what-you-see-is-what-you-get email editor.
HTML Email Best Practices
Make sure your HTML email is responsive for different screen sizes and devices.
Make sure your styling works in different email clients.
Be conscious of how long a long your HTML emails take to load.
Plan (as much as you can) for end-user inconsistencies.
Conduct thorough testing.
Now that you understand the basics of what goes into developing an HTML email, let’s go over a few important best practices you should keep in mind. No matter what method you plan to use to learn how to create an HTML email template, these best practices will help improve the design, user experience, and deliverability of your emails.
1. Make sure your HTML email is responsive for different screen sizes and devices.
The way your email looks in a user’s inbox depends on a wide variety of factors. One of the biggest and most obvious factors is the screen size of the device it’s being viewed on. An email that looks amazing and well-formatted on desktop can easily devolve into a tangle of images when viewed on a smartphone screen. To ensure your HTML emails look the way you intended across a wide spectrum of screen sizes, the best thing you can do is keep your layout simple and straightforward. When you start adding more complex elements like multiple columns and floated images, it becomes more difficult to translate the format of your email for different screen sizes. If you decide to develop a more complex layout, make sure you’re actively solving how the elements will be rearranged to suit different screen sizes. For example, if your email displays as multi-column on desktop, that same structure won’t fly on mobile — you’ll need to use media queries to define how elements will be displayed on different screen sizes.
Let’s look at this template from HubSpot. You can see how the image and the copy have switched layouts when it’s on different screens. What I like about this is its ability to look at the template through a user’s lens to identify what piques their interest to click or subscribe. Remember, developing truly responsive HTML emails goes beyond the structure and format of your message. Think about how the overall user experience of your email will be perceived on different devices. Make sure your font choices are just as legible on mobile as they are on desktop, and use mobile-friendly buttons or calls-to-action (CTAs) in place of hyperlinked text (have you ever tried to tap a little line of hyperlinked text on mobile? It’s not very easy). You can find our more in-depth guide to mobile email best practices right here.
2. Make sure your styling works for different email clients.
Another big factor that heavily impacts the way your HTML emails appear in your subscribers’ inboxes is the email client they’re using to open the message. Every email client loads emails slightly differently, so an email that looks a certain way in Gmail will likely look different in Outlook. Luckily, if you know how most popular email clients load particular HTML and CSS elements, you can create a pretty consistent experience across different users’ inboxes. It’s all about knowing which unsupported tags to avoid and adapting accordingly. This comprehensive guide explains how the most popular email clients (including Gmail and multiple versions of Outlook) support and render different styling elements. If you’re wondering how it’ll look, HubSpot actually works with multiple email clients to make sure you’re aware of your email preview. You can also check out an article we wrote on optimizing emails for different email clients.
3. Be conscious of how long your HTML emails take to load.
How long your email takes to load could very well be the difference between gaining a new customer and losing a frustrated subscriber. While it can be tempting to take advantage of all the different styling options and opportunities to incorporate visuals that HTML emails offer, none of that matters if your email takes too long to load. As you design your HTML email, remain conscious of how long your email will take to load — especially if someone is, say, opening your message on their morning subway commute with a weak data connection. Here are a few little steps you can take that will go a long way toward improving load time. Use images sparingly. That way, you’ll bolster the message you want to get across to subscribers. Always use an image compressor (like Compressor.io) to reduce the file size as much as possible. Most image compressors can significantly reduce the file size of an image without compromising on quality, so taking this extra step won’t hurt the visual integrity of your email. Use standard web fonts. Custom fonts are great for spicing up a landing page, but they can add an extraneous layer of complexity when added to an email. As we talked about above, all email clients handle style elements differently, and this…
Source link
