HTML emails - How to write them correctly

About

Email body are mostly written in HTML for advanced format and design of document that goes from marketing document to conventional letter

An HTML email:

The HTML emails sends programmatically:

There is also engine that does all of that at once.

Example

From amazon:

Rendered by WebCode

Text written by Gary Provost if we believe this page

HTML

Supported HTML Syntax

A well written HTML document is accepted nowadays in every modern email client (Gmail, ..) but not every tag is still supported.

HTML and CSS tag supports by client can be found at caniemail

For Gmail specifically: See css support and Gmail css reference

Metadata

You can add structured data such as reservation, meeting.

Best Practice

Best practices:

  • 600-800 pixels maximum width
  • basic font (Arial, Verdana, Georgia, and Times New Roman)
  • image (no svg support)
  • layout is almost done only with the table tag

More … see the design best practices at stackoverflow

Inline CSS

Because old email client may strip out the head and style tags from HTML emails, a process called inlineCss or premailer is generally executed in order to get all style inline.

Therefore there is always a pre-processing on HTML for email that will inline the CSS style.

Inline Library:

Template

An email template is a HTML template where variable (such as name, place, order, ..) are replaced with data before sending the email to create the the body of the email message.

For transactional email:

For batch email (marketing,..):

See also by categories

Repository:

No target on Anchor

In your email, it's best to add no target attribute on the anchor.

As target=“_blank”

  • may open a popup: Papercut-SMTP
  • don't let the choice to the user

Editor

Email editor are editor that target the HTML for the Email client.

List:

Engine

An engine is an application that takes as input:

List:

Design Guide

Documentation / Reference




Discover More
Email - Campaign

Campaign email are email that are written in the context of a campaign and have a marketing purpose. They are of the batch email type where an email is crafted for many recipient. This emails are generally...
Email - Structured-data (Metadata)

An email can be send as a web page and therefore can add web structured data. This way, the client can read them an offer feature such as: adding an event to a calendar extracting reservation information...
Data System Architecture
Features - Block of text are categorized by a name called feature

This page lists the most well known feature of text. They are an important part of the design vocabulary of a letter, web page, email or newspaper.
Card Puncher Data Processing
What are the UTM (Urchin Tracking Module) known as Campaign Parameters?

Urchin Tracking Module (UTM) are tracking information added to a URL and are also known as campaign parameters. Tag your ads, emails and social media posts with UTM tags and analyze your ecommerce and...
What is the Mime (Multipurpose Internet Mail Extensions) ?

In the context of email, mime may have two different definitions: the encoding of a email. the media type The mime is just the text structure of an email message (known as mime message). Example:...
What is the message body of an email? (also known as Content)

The last part of the email message is called the body or the content of the message. It is what the user will see. An email has a content part with a mime type (format) that is set with the content-type...



Share this page:
Follow us:
Task Runner