Want to learn how to create an HTML email? Fortunately, it isn’t as hard as it sounds. You don’t need to be a developer, and you don’t really need to know how to code.
If you’ve ever used a WYSIWYG (What You See Is What You Get) email editor, you’ve already created an HTML email. Each of the modules you drag and drop consists of HTML and in-line CSS, defining how different email elements should look and behave.
So if most email editors let you design with drag-and-drop tools, why do you need to know any HTML to create emails?
Good question.
While most email editors give you a fair amount of control within the modules, you won’t be able to tweak every nitty-gritty aspect of your email. You’ll likely need HTML to alter things like:
Font size
Alt text
Borders
Margins
Padding
Image size
Colors
Have you used Twilio SendGrid’s email editor? It lets you create emails with a combination of drag-and-drop modules and HTML editing. A combo powerhouse like that gives you complete control over the look and feel of your emails, ensuring a consistent, top-notch brand experience in every message.
Fortunately, it isn’t too tricky to create an HTML email. Below, we’ll give you the tips and email structure know-how you need to code better emails.
Coding an HTML email is relatively straightforward, but email clients and inboxes can be finicky. Follow these best practices to ensure your messages look great, regardless of your recipients’ client, browser, or device.
Recipients open email messages across various operating systems, devices, screen sizes, browsers, and email applications. Each of these factors will render your email differently, so it’s your job to ensure your email is responsive and works as intended in most inboxes.
You can find plenty of responsive email templates, but the task is a bit more involved when you code an HTML email from scratch. Here are a few things that’ll help make your emails more responsive:
Include media queries:Media queries let you adapt your email templates to different devices.
Use a single column: It might be easy to read 2-column emails on a desktop, but it can get a bit dense on mobile devices.
Increase the font size: Don’t go any smaller than a 13- or 14-point font.
Space out your links: You don’t want readers accidentally clicking the wrong link because your links were too close together.
Add alt tags: Alt tags describe your images in case the images fail to load.
Images are great additions to your email campaigns, but be careful not to go overboard with them. Too many images can lengthen loading times and make it difficult for emails to render.
Use smaller images that’ll load faster and not take up the entire screen. Also, add responsive sizing elements like “width” and “max-width” to ensure your images load properly on every device and email client.
Remember the purpose of your email. Many email designers get lost in the art and creativity, forgetting the overall goal of the email—which isn’t to earn oohs and aahs.
First, you want people to open your emails. Next, you want them to click and take action. That might be to visit your website, read a blog post, make a purchase, or sign up for an event.
Keep things simple. Provide value to your recipients, entice them with content, and then drive them toward your call to action. That’s it. Most of the time, everything else is fluff.
When adding different HTML elements to your email, ask yourself the question: “Does this help the email fulfill its purpose?” If not, nix it from your email design.
You can find prebuilt HTML email templates with everything you need to send a stellar campaign. Templates have already done the hard work to create a good-looking, responsive email design.
If you like an email template but aren’t 100% satisfied with it, you can often download the HTML and make the edits you’d like. This can be an excellent email-editing method for those new to HTML.
Never send an email without testing it first. The old-school way to do this would be to send a test email to various email addresses (across email clients) and try opening it on different devices. If that sounds like a lot of wasted time and headaches, you’re right.
Fortunately, there’s a better way these days.
Twilio SendGrid’s email testing tool is integrated with your design editor, helping you troubleshoot problems from a single application. It’ll help you see how your email renders across clients, browsers, and devices. For example, you can see how your email will look on a mobile device using Gmail and a desktop using Outlook.
Email testing tools can also help you find broken links and buttons, spammy-looking content, and formatting issues.
Here’s an HTML email example using a Twilio SendGrid template. You can view how this travel newsletter email template renders across desktop, tablet, and mobile devices.
Like what you see? Click “Download Template,” and we’ll send you a copy of the HTML code to your inbox. You can then copy/paste the code into your email design editor to import the template and tailor it to your brand and campaign.
Use this HTML email code example to practice the tips outlined above and try your hand at media queries, alt text, font size, and other adjustments to the code.
Want more simple HTML email templates? Lucky for you, we have a gallery full of them. Whether you need a newsletter, password reset, or appointment reminder template, our free template gallery has everything.
Plus, these designs are responsive, ensuring your email looks great across clients, browsers, and devices. Oh, and did we mention the templates are free?
