Creating HTML Emails | Twilio SendGrid



Creating HTML emails isn’t as arduous because it sounds. You don’t have to be a developer, and also you don’t actually need to know methods to code.

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

So if most e-mail editors allow you to design with drag-and-drop instruments, why do you’ll want to know any HTML to create emails?

Good query.

Whereas most e-mail editors provide you with a good quantity of management throughout the modules, you gained’t have the ability to tweak each nitty-gritty facet of your e-mail. You’ll doubtless want HTML to change issues like:

  • Font dimension
  • Alt textual content
  • Borders
  • Margins
  • Padding
  • Picture dimension
  • Colours

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

Fortuitously, coding an HTML e-mail isn’t too tough. Under, we’ll provide the suggestions and e-mail construction know-how you’ll want to create higher emails.

5 suggestions for coding an HTML e-mail

Coding an HTML e-mail is comparatively simple, however e-mail purchasers and inboxes will be finicky. Comply with these finest practices to make sure your messages look nice, no matter your recipients’ shopper, browser, or machine.

1. Make your emails responsive

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

You will discover loads of responsive e-mail templates, however the process is a little more concerned if you code an HTML e-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 e-mail templates to totally different units.
  • Use a single column: It could be simple to learn 2-column emails on a desktop, however it will probably get a bit dense on cellular units. 
  • Improve the font dimension: Don’t go any smaller than a 13- or 14-point font.
  • Area out your hyperlinks: You don’t need readers by chance clicking the improper hyperlink as a result of your hyperlinks had been too shut collectively.
  • Add alt tags: Alt tags describe your photographs in case the photographs fail to load.

2. Add photographs sparingly

Photographs are nice additions to your e-mail campaigns, however watch out to not go overboard with them. Too many photographs can lengthen loading occasions and make it troublesome for emails to render.

Use smaller photographs that’ll load quicker and never take up the whole display. Additionally, add responsive sizing components like “width” and “max-width” to make sure your photographs load correctly on each machine and e-mail shopper.

3. Preserve it easy

Keep in mind the aim of your e-mail. Many e-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 could be to go to your web site, learn a weblog put up, make a purchase order, or join an occasion.

Preserve 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 pieces else is fluff.

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

4. Use prebuilt e-mail templates

You will discover prebuilt HTML e-mail templates with all the pieces you’ll want to ship a stellar marketing campaign. Templates have already executed the arduous work to create a handsome, responsive e-mail design.

Should you like an e-mail template however aren’t 100% glad with it, you possibly can usually obtain the HTML and make the edits you’d like. This may be a wonderful email-editing technique for these new to HTML.

5. Take a look at your emails

By no means ship an e-mail with out testing it first. The old-school manner to do that can be to ship a take a look at e-mail to numerous e-mail addresses (throughout e-mail purchasers) and check out opening it on totally different units. If that seems like plenty of wasted time and complications, you’re proper.

Fortuitously, there’s a greater manner nowadays.

Twilio SendGrid’s e-mail testing instrument is built-in together with your design editor, serving to you troubleshoot issues from a single software. It’ll enable you to see how your e-mail renders throughout purchasers, browsers, and units. For instance, you possibly can see how your e-mail will look on a cellular machine utilizing Gmail and a desktop utilizing Outlook.

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

HTML e-mail construction

HTML emails have a easy construction:


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


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


Use the physique for the visible components of your e-mail, equivalent to textual content, photographs, tables, hyperlinks, and the like. 

E mail template with HTML code

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

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

Try different e-mail templates from Twilio SendGrid

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

Plus, these designs are responsive, making certain your e-mail seems to be nice throughout purchasers, browsers, and units. Oh, and did we point out the templates are free?

Begin creating higher HTML emails at the moment with a prebuilt template.



Please enter your comment!
Please enter your name here