Creating HTML emails isn’t as onerous because it sounds. You don’t should be a developer, and also you don’t actually need to know tips on how to code.

If you happen to’ve ever used a WYSIWYG (What You See Is What You Get) electronic mail editor, you’ve already created an HTML electronic mail. Every of the modules you drag and drop consists of HTML and in-line CSS, defining how totally different electronic mail parts ought to look and behave.

So if most electronic mail editors allow you to design with drag-and-drop instruments, why do it’s worthwhile to know any HTML to create emails?

Good query.

Whereas most electronic mail editors provide you with a good quantity of management inside the modules, you received’t be capable of tweak each nitty-gritty facet of your electronic mail. You’ll doubtless want HTML to change issues like:

Font measurement
Alt textual content
Borders
Margins
Padding
Picture measurement
Colours

Have you ever used Twilio SendGrid’s electronic mail editor? It allows you to create emails with a mix of drag-and-drop modules and HTML enhancing. A combo powerhouse like that provides you full management over the feel and appear of your emails, making certain a constant, top-notch model expertise in each message.

Happily, coding an HTML electronic mail isn’t too difficult. Under, we’ll provide the suggestions and electronic mail construction know-how it’s worthwhile to create higher emails.

5 suggestions for coding an HTML electronic mail

Coding an HTML electronic mail is comparatively easy, however electronic mail shoppers and inboxes will be finicky. Observe these greatest practices to make sure your messages look nice, no matter your recipients’ consumer, browser, or machine.

1. Make your emails responsive

Recipients open electronic mail messages throughout numerous working programs, units, display sizes, browsers, and electronic mail functions. Every of those components will render your electronic mail in a different way, so it’s your job to guarantee your electronic mail is responsive and works as supposed in most inboxes.

You could find loads of responsive electronic mail templates, however the activity is a little more concerned if you code an HTML electronic mail from scratch. Right here are some things that’ll assist make your emails extra responsive:

Embrace media queries: Media queries allow you to adapt your electronic mail templates to totally different units.
Use a single column: It is perhaps straightforward to learn 2-column emails on a desktop, however it may get a bit dense on cellular units.
Improve the font measurement: Don’t go any smaller than a 13- or 14-point font.
House out your hyperlinks: You don’t need readers unintentionally clicking the unsuitable hyperlink as a result of your hyperlinks had been too shut collectively.
Add alt tags: Alt tags describe your photos in case the pictures fail to load.

2. Add photos sparingly

Pictures are nice additions to your electronic mail campaigns, however watch out to not go overboard with them. Too many photos can lengthen loading occasions and make it tough for emails to render.

Use smaller photos that’ll load sooner and never take up the whole display. Additionally, add responsive sizing parts like “width” and “max-width” to make sure your photos load correctly on each machine and electronic mail consumer.

3. Hold it easy

Bear in mind the aim of your electronic mail. Many electronic mail designers get misplaced within the artwork and creativity, forgetting the general aim of the e-mail—which isn’t to earn oohs and aahs.

First, you need individuals to open your emails. Subsequent, you need them to click on and take motion. That is perhaps to go to your web site, learn a weblog put up, make a purchase order, or join an occasion.

Hold issues easy. Present worth to your recipients, entice them with content material, after which drive them towards your name to motion. That’s it. More often than not, all the things else is fluff.

When including totally different HTML parts to your electronic mail, ask your self the query: “Does this assist the e-mail fulfill its goal?” If not, nix it out of your electronic mail design.

4. Use prebuilt electronic mail templates

You could find prebuilt HTML electronic mail templates with all the things it’s worthwhile to ship a stellar marketing campaign. Templates have already achieved the onerous work to create a handsome, responsive electronic mail design.

If you happen to like an electronic mail template however aren’t 100% glad with it, you’ll be able to typically obtain the HTML and make the edits you’d like. This may be a superb email-editing technique for these new to HTML.

5. Check your emails

By no means ship an electronic mail with out testing it first. The old-school manner to do that could be to ship a check electronic mail to varied electronic mail addresses (throughout electronic mail shoppers) and check out opening it on totally different units. If that appears like numerous wasted time and complications, you’re proper.

Happily, there’s a greater manner lately.

Twilio SendGrid’s electronic mail testing instrument is built-in along with your design editor, serving to you troubleshoot issues from a single utility. It’ll enable you see how your electronic mail renders throughout shoppers, browsers, and units. For instance, you’ll be able to see how your electronic mail will look on a cellular machine utilizing Gmail and a desktop utilizing Outlook.

Electronic mail testing instruments may also enable you discover damaged hyperlinks and buttons, spammy-looking content material, and formatting points.

HTML electronic mail construction

HTML emails have a easy construction:

DOCTYPE

Use the <!DOCTYPE> to inform the browser what to anticipate—on this case, it’d be an HTML electronic mail.

Header

Use the header part to incorporate parts like styling, sizing, and meta textual content.

Physique

Use the physique for the visible parts of your electronic mail, resembling textual content, photos, tables, hyperlinks, and the like.

Electronic mail template with HTML code

Right here’s an instance of an electronic mail template with HTML code. You’ll be able to view how this journey publication electronic mail template renders throughout desktop, pill, and cellular units.

Like what you see? Click on “Obtain Template,” and we’ll ship you a replica of the HTML code to your inbox. You’ll be able to then copy/paste the code into your electronic mail design editor to import the template and tailor it to your model and marketing campaign.

Try different electronic mail templates from Twilio SendGrid

Need extra electronic mail templates? Fortunate for you, we have now a gallery filled with them. Whether or not you want a publication, password reset, or appointment reminder template, our free template gallery has all the things.

Plus, these designs are responsive, making certain your electronic mail appears to be like nice throughout shoppers, browsers, and units. Oh, and did we point out the templates are free?

Begin creating higher HTML emails immediately with a prebuilt template.