How to Create Effective HTML Emails

Email is an essential marketing channel for any online business. It’s an affordable way to reach new and existing customers, and you can show off your brand’s personality in any way you can imagine—but only when using an HTML email. 

While an HTML email sounds terrific, email design and development can be a massive challenge. Some vendors aren’t up to speed on the latest standards. Manipulating an HTML file sounds like you need three years of CodeAcademy just to create an email. And what the heck is a rendering engine?

Our advice? Don’t sweat it. Here are our best insights into the world of HTML email, as well as a couple of tactics and resources you can use to build them. 

What are HTML emails?

HTML emails sound scary, but most of the emails you see that include more than just text are created from HTML. HTML stands for HyperText Markup Language. It’s code that forms the email structure and allows you to add formatting, images, and styling. 

Let’s compare HTML to two other common email types:

1. Plain text emails: a simple email with no formatting options (e.g., bolded, italicized, or underlined fonts) or special layouts. Think of an email you’d send to a friend or family member. Casual and boring, but it gets your message across quickly and easily. 

1. Rich text emails: an enhanced plain text email with formatting options (like bolding, hyperlinks, and bullet points) without the use of HTML code. 

Embracing an HTML email format allows you to:

• Create compelling emails for promos, abandoned cart sequences, lead nurturing, and more
• Use dynamic content in your emails to display updated, fresh product catalogs
• Add calls to action button that link directly to your shopping cart
• Use fonts, styles, formats, etc. that go way beyond what’s available in rich-text emails

Your contacts can view emails in both HTML and plain-text formats. They may not be able to see HTML elements depending on their email client or settings, so you’ll want to set up a plain-text version of your emails just in case. 

If you’re running or promoting an online store, HTML emails are standard practice to create a good customer experience and increase conversions. But how can you build an HTML email for your business if you don’t know how to code? 

How to create HTML emails

There are different options to help you create the right HTML emails for your email marketing, even if you have no coding experience. 

Email builder

You’ve probably heard of email marketing software like Mailchimp and ActiveCampaign. They allow you to build and send HTML emails to your contacts and track the results. Did you know you could manage HTML based emails inside ManyChat as well? 

In Flow Builder, a drag-and-drop campaign builder, you can create branded, mobile-responsive emails without ever touching a line of code.

Here’s how easy it is: 

With ManyChat’s HTML email builder, you can customize:

1. Text: Bold, italicize, underline, or change the color of your font. You can also include links and coupons in your email. 
2. Multimedia: Upload an image or add a dynamic link to show updated photos from your website. You can add image-based email headers, in-message product catalogs, and video to engage viewers and encourage them to click.
3. Call-to-action button: Include a CTA button that sends people back to your website or Shopify store with a special discount. Or bring them back to Facebook Messenger and continue the conversation there. 
4. Dividers: Organize your layout to make it easy for viewers to understand and interact with your email.

With ManyChat’s Flow Builder, you can also create behavior-based campaigns to reach more contacts with the right message. If a contact opens (or doesn’t open) your email, you can send a follow-up message or start a conversation on Messenger or through SMS (if you have their permission to do so).

Learn more about ManyChat’s Email Builder and how it can help improve your marketing campaigns. 

Design agency

Businesses frequently use a Chat Marketing marketing agency for Messenger and SMS, but they can also go to an email design agency to manage campaigns. If you manage a small team or don’t have the budget to hire an in-house email marketer but still want custom HTML designs, this can be an option for you. 

Here are some notable email marketing agencies:

1. InboxArmy: A full-service email marketing firm that designs, codes, and manages email campaigns
2. ActionRocket: Offers creative strategy, design, and development for email marketing
3. Uplers: Provides email template production, full-service email marketing, and support for mid-to-large sized businesses

Email marketing agencies can also build templates for you to use on your own. The templates are typically compatible with most of the top email clients like Mailchimp, Hubspot, Campaign Monitor, and more. They can be more expensive, but can save you money if you already have a marketing strategist in-house. 

HTML email free templates

A predefined HTML template can help you build beautiful, responsive HTML emails in minutes. It includes all the content blocks and design elements you need to launch a professional email. You can customize them and make each template your own to create on-brand campaigns. 

Find templates for every occasion at sites like:

1. Litmus Templates
2. Stripo
3. Bee
4. Dyspatch

If you’re so inclined, email service providers like Mailchimp and Campaign Monitor allow you to import custom HTML to build an email from scratch in their platform. All you have to do is paste the code into the provider of your choice (if they allow it!).

Tips and recommendations for creating HTML emails

Before you drop everything to create your first HTML email, let’s cover some tips and recommendations to help you make eye-catching email campaigns that amaze and engage your contacts. 

• Follow the basics. Read Mailchimp’s guide to email basics and use it as a guide when creating your HTML emails. It suggests building utilizing a grid system, offers maximum widths, and advocates for simplicity above all. Move away from using complicated CSS by using popular styles, and opt for inline over external CSS. Learn more about CSS in HTML emails. 
• Consider email trends, but prioritize usability. Email marketing trends are always changing. Right now, dark mode, AMP, and 3D-graphics are in vogue. Experiment with these and see if they work for your audience, but don’t lose sight of the basics. 
• Include space for personalization. Emails that contain personalized content achieve higher open and click rates, with a 19% higher click through on average. Personalization has an even greater impact on even calls to action, with personalized CTAs improving conversions by over 200%.
• Make emails mobile responsive. Constant Contact found that 60% of their customers’ emails were opened on mobile devices. Design your emails so they look good on multiple screen sizes. 
• Add exciting on-brand design elements. Dynamic content and animated gifs increase your email marketing spends ROI by 22% and 21%, respectively. Don’t overcomplicate things, but do take time to make your email stand out and feel like it exemplifies your brand and personality. 
• Look for inspiration online. Study your inbox and see which email designs stand out to you. What images, copy, or messaging prompt you to take action? Which emails do you delete immediately after opening? Take a look at Really Good Emails for inspiration for your HTML email build.
• Optimize images. Don’t use massive five MB images for your emails. They’ll load painfully slowly and can send your email straight to spam. Bring each image size down to 250 KB or less. Also, add alt text to describe your images because email clients may block them by default. With alt text, a viewer can get an idea of what they’re missing before they click to view images, plus visually-impaired people using screen readers will be able to better understand your email.
• Check that your design works across devices and clients. While research by Litmus indicates users read 56% of emails on either an iPhone or in Gmail, it’s still essential to ensure your design works across all devices and email clients. With over 1,000 email clients in use today, it’s critical to build your templates using best practices for design codes so you have the best chance for it to look good on multiple clients. 
• Always A/B test your email campaigns. Research confirms that companies that A/B test every email see a 37% higher ROI than those that don’t. Send your email campaigns out with the subject line that hits hardest and you’ll see better results. 
• QA your emails: It’s crucial to test and review every email before sending it to your entire audience for typos, mistakes, broken links, or errors in your code or design. 

Final thoughts

Whether you’re looking to create an appealing newsletter or design an abandoned cart sequence, HTML can turn a good email marketing campaign into a great one. However, it’s not a one-off thing. You’ll want to test emails to test deliverability, update them regularly, and continuously evaluate them to ensure they’re getting the results you want. 

The key to email success is finding a great email service provider like ManyChat to help quickly create HTML emails and put them into action. 

Create, send, and manage your email marketing program with ManyChat. Start free now.