Need to learn to create an HTML electronic mail? Fortuitously, it isn’t as onerous because it sounds. You don’t must be a developer, and also you don’t really want to know the best way to code.
For those who’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 components ought to look and behave.
So if most electronic mail editors allow you to design with drag-and-drop instruments, why do it’s good to know any HTML to create emails?
Good query.
Whereas most electronic mail editors offer you a good quantity of management inside the modules, you gained’t be capable of tweak each nitty-gritty side of your electronic mail. You’ll probably 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 modifying. A combo powerhouse like that offers you full management over the feel and appear of your emails, guaranteeing a constant, top-notch model expertise in each message.
Fortuitously, it isn’t too tough to create an HTML electronic mail. Under, we’ll provide the ideas and electronic mail construction know-how it’s good to code higher emails.
5 ideas for the best way to create an HTML electronic mail
Coding an HTML electronic mail is comparatively easy, however electronic mail shoppers and inboxes might be finicky. Comply with these greatest practices to make sure your messages look nice, no matter your recipients’ consumer, browser, or gadget.
1. Make your emails responsive
Recipients open electronic mail messages throughout varied working programs, gadgets, display screen sizes, browsers, and electronic mail purposes. Every of those components will render your electronic mail in another way, so it’s your job to guarantee your electronic mail is responsive and works as meant in most inboxes.
You’ll find loads of responsive electronic mail templates, however the activity is a little more concerned once you code an HTML electronic mail from scratch. Right here are some things that’ll assist make your emails extra responsive:
- Embody media queries: Media queries allow you to adapt your electronic mail templates to totally different gadgets.
- Use a single column: It is perhaps simple to learn 2-column emails on a desktop, however it will possibly get a bit dense on cellular gadgets.
- Enhance 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 fallacious hyperlink as a result of your hyperlinks have been too shut collectively.
- Add alt tags: Alt tags describe your pictures in case the pictures fail to load.
2. Add pictures sparingly
Pictures are nice additions to your electronic mail campaigns, however watch out to not go overboard with them. Too many pictures can lengthen loading instances and make it tough for emails to render.
Use smaller pictures that’ll load sooner and never take up the whole display screen. Additionally, add responsive sizing components like “width” and “max-width” to make sure your pictures load correctly on each gadget and electronic mail consumer.
3. Maintain it easy
Keep in mind the aim of your electronic mail. Many electronic mail designers get misplaced within the artwork and creativity, forgetting the general purpose of the e-mail—which isn’t to earn oohs and aahs.
First, you need folks 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.
Maintain 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, the whole lot else is fluff.
When including totally different HTML components 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’ll find prebuilt HTML electronic mail templates with the whole lot it’s good to ship a stellar marketing campaign. Templates have already performed the onerous work to create a handsome, responsive electronic mail design.
For those who 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 methodology for these new to HTML.
5. Check your emails
By no means ship an electronic mail with out testing it first. The old-school means to do that could be to ship a take a look at electronic mail to varied electronic mail addresses (throughout electronic mail shoppers) and take a look at opening it on totally different gadgets. If that seems like a whole lot of wasted time and complications, you’re proper.
Fortuitously, there’s a greater means lately.
Twilio SendGrid’s electronic mail testing software 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 gadgets. For instance, you’ll be able to see how your electronic mail will look on a cellular gadget utilizing Gmail and a desktop utilizing Outlook.
E mail testing instruments may 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 components like styling, sizing, and meta textual content.
Physique
Use the physique for the visible components of your electronic mail, reminiscent of textual content, pictures, tables, hyperlinks, and the like.
Create an HTML electronic mail template with code
Right here’s an HTML electronic mail instance utilizing a Twilio SendGrid template. You possibly can view how this journey e-newsletter electronic mail template renders throughout desktop, pill, and cellular gadgets.
Like what you see? Click on “Obtain Template,” and we’ll ship you a replica of the HTML code to your inbox. You possibly can then copy/paste the code into your electronic mail design editor to import the template and tailor it to your model and marketing campaign.
Use this HTML electronic mail code instance to observe the information outlined above and take a look at your hand at media queries, alt textual content, font measurement, and different changes to the code.
Try different electronic mail templates from Twilio SendGrid
Need extra easy HTML electronic mail templates? Fortunate for you, we now have a gallery filled with them. Whether or not you want a e-newsletter, password reset, or appointment reminder template, our free template gallery has the whole lot.
Plus, these designs are responsive, guaranteeing your electronic mail seems to be nice throughout shoppers, browsers, and gadgets. Oh, and did we point out the templates are free?
Begin creating higher HTML emails at the moment with a prebuilt template.
