How to encode HTML emails?
This is the part where you start creating emails. So let's start.
• Select a document type
A document type is adocument type declaration (DTD). These statements tell an email client which version of HTML you are using so that it can correctly display your email to the viewer.
Choosing a document type is the most important step in creating HTML email, because without it there is no guarantee that email clients will display your email the way you want.
Now, you need to decide which document type to use for the emails as there are many of them like HTML5, HTML4.01 Strict, HTML 4.01 Transitional etc.
HTML5 is the latest and is designed to accommodate many forms of code, but as it is still evolving, HTML5 support is limited in all email clients. For this reason, you should avoid using HTML5.
Scalerorecommends XHTML 1.0 Transitional and HTML 4.01 Transitional document type declarations:
<!PUBLIC HTML DOCTYPE "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!PUBLIC HTML DOCTYPE "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
You can choose the correct document type for your emails in theList of document types recommended by the W3C.
• Vector markup language and DPI scaling
After choosing a document type, you must add support for Vector Markup Language (VML). It is useful for ensuring that unsupported features such as background images and rounded edges display correctly in email clients such as Outlook 2007-16 and Outlook Express. The code looks like this:
<htmlxmlns:v="urn:microsoft-com-schemes:vml"xmlns:o="urn:microsoft-com-schemes:workshop:workshop">
Dots per inch, or DPI, is a measure of screen resolution. DP scaling can also be an issue with Outlook email clients, so we suggest adding the following code inside the<head>label:
<!--[si gte mso 9]>
<xml>
<o:Office document settings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:Office document settings>
</xml>
<![finalize]-->
• Email header encoding
It's time to create theemail header.The header elements contain the information that your subscribers cannot see, but which is necessary for machine processing byemail clients. Information is placed in meta tags within a tag.
** Metatags **
He<meta>The HTML element represents metadata that cannot be represented by other meta-related HTML elements, such as<base>,<link>,<script>,<style>o<title>.
There are many meta tags you can add in HTML, but the following are the most useful for keeping control over how your email essentials are displayed:
<meta name="detection format" content="data=no">
<meta name="detection format" content="phone=no">
These meta tags will tell iOS devices not to convert addresses or phone numbers in your emails into links. You might want these items to display as clickable links, but Apple's default blue might not match your email's color scheme.
Therefore, these meta tags will prevent such occurrences and allow you to modify your links according to your preferences.
<meta content="width=device-width, initial-scale=1" name="viewport" />
This tag guides email clients on how to size the email precisely its width. This will help maintain the position of the email content to avoid any white space next to images or text that doesn't fit properly.
After the meta tags, add a CSS style tag to indicate that your email content is, in fact, CSS:
<style type="text/CSS">
• Create tables and email body
Now you can create the general structure of your emails. In the body of the email, add a tag for the parent container with a width of 100%, as this table contains most of the email's content. You must follow these guidelines when creating tables:
- To add
padding: 0px; margin: 0pxto the body tag to remove the extra space in the email. - To add
“paper=presentation”attribute to each of your tables to help email clients know that the table is for visual purposes only, not as a data table. - In the main table, create rows (tr) and columns (td). Inside each column, create a table with a width of 600px. You can then define the contents of the table.
How to create emails in HTML?
When creating an HTML email, the design is just as important as the coding. An attractive, attractive andresponsive email designcan provide a better user experience. While creating an HTML email, you need to consider many elements like buttons, typography, layout and media elements like videos, GIFs, etc.
Each of these elements can significantly affect how your email looks and how the reader perceives it. Therefore, paying attention to them is essential.
💡Read in detail:A Beginner's Guide to HTML Email Design
How to make HTML emails accessible
When creating HTML emails, you must ensure the accessibility of the email. This means that all users must be able to access and read their email, regardless of their status. These states can be human or technical shortcomings, such as limited email client support.
For example, colorblind people may not see specific colors in their emails. On the technical side, Outlook (web) doesn't support AMP email, but the Gmail app for Android does.
💡Read in detail:What is email accessibility and why is it important?
7 Responsive HTML Email Templates
Ready to see some awesome and creative HTML email templates? We've curated a list of 7 different and most responsive email templates that you can customize and send with just a few clicks.
1. HTML Email Newsletter Template
for usEmail status report 2023, the newsletter was the most sent type of email. Then we have the perfect newsletter template for you, a mix of zigzag and single column layouts. It comes with placeholders that you can customize based on your newsletter content.
customize thisemail newsletter template
2. Cyber Monday HTML Email Templates
This email uses a Cyber Monday color theme to attract customers, and the images add a more engaging touch. It's a multi-column template that's best if you have multiple products to display in your email. Also, the minimalist theme makes this email stand out in the inbox as most holiday emails are edgy and edgy.
Take a look at our collection ofvacation email templates
3. HTML E-Commerce Email Template
Do you have a new product line launching? This product promotion email with zigzag and inverted layout is best for showing your products images and features. Add a customizable banner to the footer to drive more conversions.
Take a look at our collection ofecommerce email templates
4. Responsive promotional email template
This abandonment email aims to recover lost sales from website visitors. To compel action and recommendations to give visitors more options.
Take a look at our collection ofpromotional email templates
5. Welcome Email HTML Template
Send them this zig-zag welcome email to create a lasting impression on their new registrations. The banner image grabs attention and the product images showcase the products. The welcome coupon code is the highlight of the email.
Take a look at our collection ofwelcome email templates
6. HTML Event Invitation Email Template
This single column webinar invitation email is easy to customize. It summarizes the guest and event details and looks like a plain text email. Use it in your next webinar by customizing it in our code-free editor.
Take a look at our collection ofevent invitation email templates
7. Transactional Email Template
Don't let abandoned cart users disappear, they can help you drive great conversions. This reversed abandoned cart email uses the product image to engage the viewer. Plus, adding benefits at the end gives the recipient a compelling reason to complete the transaction.
Take a look at our collection oftransactional email templates
HTML email coding best practices
Email encoding can seem complex and confusing as email rendering has so many possibilities. To ensure your email works well, you can follow these best practices:
✅ Avoid JavaScript or Flash
These technologies are not widely supported by email clients, so emails will not be processed correctly.
However, if you want to use Javascript and other interactive elements in your emails, consider usingAccelerated Mobile Pages (AMP) for Email, but this format has limited customer support.
currently onlyGmail, Yahoo! y Mail.ruSupports AMP components in email.
✅ Keep HTML file size below 102KB
Each line of code in an HTML document file affects the email load time. That's why keeping your code tidy and inexpensive is essential to avoid redundant lines that just take up space.
Also, keep the HTML file size under 102KB as Gmail will clip files larger than 102KB. Also, a file size of 100 KB goes through morespam filters
✅ Avoid faulty HTML tags
Avoid using faulty HTML tags. If there are broken tags in your HTML code, the email client may mark them as spam or worse, not process them correctly. It will hurt theemail deliverabilityof current and future email campaigns.
✅ Avoid extra spaces around images
Avoid extra spaces around an image. Instead, use display: block to remove this different space.
✅ Avoid odd numbers for size
Try not to use odd numbers for the size like 11px, 13px etc as email clients sometimes add a 1px line between email elements. This issue is more common in Outlook 2016 and your email may look like this: Unwanted lines appear in Outlook 2016 with strange font sizes.
Source: Acid Email
✅ Remove comments in your CSS
Be sure to remove any comments in your CSS tag from your HTML code. This can break your code in some email clients like Outlook. Therefore, it is good practice to remove them if they are not needed.
✅ Always test your emails before sending them
The best way to know if your code works istest your emails. Therefore, before sending them to final recipients, test your emails at all stages of development.
By testing, you can detect any disparities in your emails. Thus, it will help you create a consistent viewing experience for all your subscribers.
A step up from HTML emails: AMP welcome emails
There's a new buzzword among email marketers:AMP para e-mails. So what is it? AMP for Emails is a set of JavaScript-compatible HTML tags that enable functionality with an additional focus on performance and security.
In addition, AMP emails are more compatible with the introduction of a new MIME (Multipurpose Internet Mail Extensions) part. The MIME part allows emails to fall back into HTML templates if a provider or client doesn't support AMP emails.
AMP for email is still in its infancy, but it will revolutionize email marketing. If you want to try AMP emails thenMailmodois your answer Mailmodo offers over 20 interactive AMP widgets such as forms, surveys, carts and calendars that you can embed in your email and increase your conversions.
What should you do next
Hello, thanks for reading until the end. Here are 3 ways we can help you grow your business:
Talk to an email expert.Do you need someone to take your email marketing to the next level? Mailmodo experts are here for you. Schedule a 30-minute email consultation. Don't worry, he's home.Book a meeting here.
See Also14 of the best examples of beautiful email designEmail Design Guide - Basic Tips for Better PerformanceUse These Email Design Samples To Get More Clients - DesignerlyThe Ultimate Guide to Email Design Best Practices - Email and Landing Page Design(Video) The RIGHT WAY to create HTML emails | TUTORIAL [2023]Send emails that drive higher conversions.Mailmodo is an ESP that helps you create and send app-like interactive emails with forms, carts, calendars, games and other widgets for higher conversions. Sign up for our 21-day free trial.start free.
Get smarter with our email features.Explore our entire knowledge base here and learn about email marketing, marketing strategies, best practices, growth hacks, case studies, templates and more.Access the guides here.