Creating HTML Emails | Twilio SendGrid

Creating HTML emails 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 questions.

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:

• Fontsize
• alttext
• Borders
• margins
• padding
• Image size
• color

Have you used Twilio SendGrid’s email editor? It lets you create emails with a combination of drag-and-drop modules other 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, coding an HTML email isn’t too tricky. Below, we’ll give you the tips and email structure know-how you need to create better emails.

5 tips for coding an HTML email

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.

1. Make your emails responsive

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.

2. Add images sparingly

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.

3. Keep it simple

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, nothing from your email design.

4. Use prebuilt email templates

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.

5. Test your emails

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.

HTML email structure

HTML emails have a simple structure:

DOCTYPE

Use the to tell the browser what to expect— in this case, it’d be an HTML email.

headers

Use the header section to include elements like styling, sizing, and meta text.

body

Use the body for the visual elements of your email, such as text, images, tables, links, and the like.

Email template with HTML code

Here’s an example of an email template with HTML code. You can see 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.

Check out other email templates from Twilio SendGrid

Want more 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?

Start creating better HTML emails today with a prebuilt template.