A Beginner's Guide to HTML Email Design

Nupur Mittal
ByNupur Mittal

7 mins read

John was writing plain text Christmas greeting emails when he thought, “How amazing it would be if I could use different font styles, layout, in the email.”

John wasn’t aware that he could do this by coding emails with HTML.

So, if you are like John and want to understand the nitty-gritty of HTML emails design, this guide will help you. We will cover components, pros and cons, and best practices of HTML emails. Moreover, we will also help you understand the difference between plain text and HTML emails.

  • What’s HTML email design?

  • Difference between HTML emails and plain-text emails

  • Components of HTML email design

  • HTML email client compatibility

  • Pros and cons of coding an HTML email design

  • HTML email best practices

  • Alternative to HTML email design

What’s HTML email design?

HTML emails are formatted in HTML and inline CSS, using which email developers can incorporate formatting, layout, hyperlinks, etc., in the email. With HTML, emails can become more actionable due to CTA buttons, email icons, and social share icons. Such emails also help in creating brand awareness with brand style guidelines.

Difference between HTML emails and plain-text emails

HTML email Plain text email
HTML emails are coded emails that include formatting, links, email layout, embedded images, etc. Plain text email contains only text with no formatting, hyperlinks, etc.
HTML emails are not supported on every email client. Moreover, not all components of emails render as expected. Plain text emails are supported by every email client and hence provide better accessibility.
Provide better tracking due to the inclusion of an HTML tracking code by ESPs. Limited tracking as opens and click rate can’t be tracked as there are no image tracking pixels in plain text emails.
HTML emails are more prone to scams, phishing, etc. Plain text emails are less likely to get detected as spam because they do not contain malicious HTML code.
HTML email file size is larger as they contain different components and thus take longer to load. Plain text emails load faster as they contain text only and thus load quickly.

Components of HTML email design

In HTML email design, you can add different components to your emails. Let’s discuss some of the essential elements:

Buttons

Buttons can be used as call-to-action in HTML emails prompting users to take the desired action. While creating HTML email buttons, you can configure button type, size, color, and button text.

Maximize your email performance with our free ebook

Optimize the right email metrics for higher ROI

Typography

Textual data in the email is formatted using HTML code eg. 'p', 'h1', 'h2', etc. In this framework, for example, text elements can have the following properties:

Typography elements

Email layout

Email layout refers to the structured arrangement of email elements creating a smooth and scannable email copy. With HTML, you can create various formats such as hybrid layout, inverted pyramid layout, double-column layout, etc. Moreover, you can add tables, forms, etc.

Image component

As per international standards, the three image formats predominantly used in emails are JPEG, GIF, and PNG.

JPEG/JPG: To showcase photographs of real-world elements, elements, and stock photographs.

GIF: To show any animation or blend elements that don’t use many colors into backgrounds.

PNG: When you need your image to blend with the background color.

As per Can I Email, JPEG and PNG image formats are supported by all email clients, while 97% of email clients support GIF image format.

In HTML emails, you can include different kinds of hyperlinks that navigate users to the respective landing pages. For instance, you can include unsubscribing links, blog links, useful resources links, etc. these links allow users to communicate quickly and raise their concerns, which helps build trust.

Social share buttons

Social platform buttons inform users to share and check out more about your organization. Including these buttons helps drive more traffic towards your social channels. The social share buttons are included in the email footer which is at the end of the email.

HTML email client compatibility

The rendering of HTML emails is not uniform across all email clients. There are more than 50 email clients, and each of them renders HTML email differently depending upon the screen size, OS, browsers, etc. Moreover, support for email elements also varies. Here we will talk about the Gmail android app and Apple mail iOS support for HTML emails components.

For table elements:

Table element Gmail app Android 7.x Apple mail iOS 14
border-collapse
border-spacing
empty-cells

For font elements:

Font element Gmail app Android 7.x Apple mail iOS 14
font-family
font-size
font-weight
Letter-spacing
line-height
text-align

For link elements:

Link element Gmail app Android 7.x Apple mail iOS 14
<link> in <head>
<link> in <body>

For style elements:

Style element Gmail app Android 7.x Apple mail iOS 14
<style> in <head>
<style> in <body>

Source: Can I Use in HTML email

Pros and Cons of coding an HTML email design

Using HTML email design comes with its pros and cons which we will discuss in the following section, but to avoid its excessive use you can create an email design system.

Pros of coding an HTML email

  • HTML emails contain a tracking code that tracks users’ activity with the email, such as open rates, click-through rates, etc.

  • With HTML coding, one can add visually appealing elements such as banners, clickable buttons, custom-coded elements, etc., in various layouts. This helps in creating a better user experience.

  • These emails improve conversions and email ROI.

Cons of coding an HTML email

  • They are more likely to be caught in spam filters, and sometimes, antivirus software will automatically strip all CSS styles from the HTML email, leaving it a shell of its former self.

  • Every email client does not support HTML email components. Hence, rendering and compatibility issues can make emails look broken or stripped, impacting the email performance.

  • Coding an HTML email is a time-consuming process.

HTML email design best practices

Here are 9 tips to keep in mind while creating an HTML email:

  1. Create a plain-text version of HTML emails in case the email client does not render the HTML version.

  2. Keep the HTML file size below 102 KB since Gmail clips all emails above 102 KB.

  3. Ensure 60:40 text-to-image ratio.

  4. Make your HTML email responsive for different screen sizes and devices.

  5. Keep your HTML emails load time low.

  6. Always add alt text to images.

  7. Do not use mal-functional HTML tags. In case of any broken tags in your HTML, the email client won’t render the mail and can mark it as spam. That'll hurt deliverability, not just for that email but also for any emails coming from that particular email address in the future.

  8. Remove unnecessary, repetitive, extra elements while coding your HTML email. You can use an HTML minifier that automatically removes additional aspects while keeping the rendering of your email intact.

  9. Test HTML emails before you send them.

Get a sample AMP email in your inbox

Experience the power of interactivity right now

Alternative to HTML email design

If you want to go beyond HTML email and add more functionality, AMP emails are for you. AMP for emails is coded in HTML with some JS elements too. The key difference between AMP and HTML emails is that AMP emails enable you to add standardized interactive components, which are not possible with HTML emails. Moreover, the AMP components are supported by many email clients, while the same cannot be said for the interactive components in HTML emails.

AMP Emails are redefining interactive emails. If you want to test such emails out, Mailmodo will help you. Mailmodo provides a collection of AMP email templates that you can use to upscale your email marketing campaigns. You can sign up with Mailmodo and get access to all the templates and use them without any coding or other prerequisites.

What you should do next

Hey there, thanks for reading till the end. Here are 3 ways we can help you grow your business:

  1. Talk to an email expert. Need someone to take your email marketing to the next level? Mailmodo’s experts are here for you. Schedule a 30-minute email consultation. Don’t worry, it’s on the house. Book a meet here.

  2. Send emails that bring higher conversions. Mailmodo is an ESP that helps you to create and send app-like interactive emails with forms, carts, calendars, games, and other widgets for higher conversions. Get started for free.

  3. Get smarter with our email resources. Explore all our knowledge base here and learn about email marketing, marketing strategies, best practices, growth hacks, case studies, templates, and more. Access guides here.

What should you do next?

You made it till the end! Here's what you can do next to grow your business:

2_1_27027d2b7d
Get smarter with email resources

Free guides, ebooks, and other resources to master email marketing.

1_2_69505430ad
Do interactive email marketing with Mailmodo

Send forms, carts, calendars, games and more within your emails to boost ROI.

3_1_3e1f82b05a
Consult an email expert

30-min free email consultation with an expert to fix your email marketing.

Table of contents

chevron-down
What’s HTML email design?
Difference between HTML emails and plain-text emails
Components of HTML email design
HTML email client compatibility
Pros and Cons of coding an HTML email design
HTML email design best practices
Alternative to HTML email design

Fresh Marketing Ideas, Every Week.

Get the latest marketing roundup & news

Get 3X email conversion
with Mailmodo

Check.svg

Create & send interactive emails without coding

Check.svg

Put revenue on auto-pilot with pre-built journeys

Check.svg

Save time with AI-powered email content creation

Experience world’s only interactive email marketing platform

Trusted by 10000+ brands

Group_1110166020_1_6fb9f2bd9a
Group_1110165532_1_bf39ce18b3
Ellipse_Gradientbottom_Bg
Ellipse_GradientLeft_Top
gradient_Right