Essential Tips and Tricks for Coding HTML Emails

One of the crucial tough points of HTML electronic mail coding is that each electronic mail shopper has its personal quirks and options. Electronic mail purchasers often find yourself with these quirks by means of one of the best of intentions. For instance, they may flip a plain textual content web site handle right into a clickable hyperlink. There’s additionally the problem of safety. Electronic mail purchasers must make it possible for our electronic mail’s HTML and CSS received’t intrude with their very own interface’s HTML and CSS. A malicious electronic mail might use sure CSS properties (like absolute positioning) to lure individuals into clicking on overlaid hidden hyperlinks. So electronic mail purchasers ought to parse, filter and manipulate HTML electronic mail code. However which means that we, as electronic mail builders, should concentrate on this and make our code as pleasant as potential for them.

From options to bugs, listed below are among the hottest suggestions and methods we have to know. This text is excerpted from Crafting HTML Email, availble on Pylogix Premium.

Supporting the Outlooks

Based on electronic mail analytics software Litmus, Outlook (on each Home windows and macOS) accounted for 4.44% of email client market share in January 2022. That will not appear a lot, and keep in mind to take email analytics with a pinch of salt, however chances are high you’ll meet Outlook on Home windows in some unspecified time in the future in your electronic mail developer journey.

Right here’s what it’s good to know to make your HTML emails work painlessly within the Outlooks on Home windows.

How the Outlook Rendering Engine Works

Since 2007, the Outlooks on Home windows have used Phrase because the rendering engine for HTML and CSS. Microsoft justified the use of Word in 2009:

We’ve made the choice to proceed to make use of Phrase for creating e-mail messages as a result of we imagine it’s one of the best e-mail authoring expertise round, with wealthy instruments that our Phrase prospects have loved for over 25 years.

Not solely is Phrase not superb for rendering HTML and CSS, however the documentation on the matter is abysmal. The one official current documentation about Phrase’s rendering is a 2006 publish from Microsoft explaining HTML and CSS rendering capabilities in Outlook 2007.

It consists of info on the next:

• CORE: colour, background-color, textual content properties (font, font-family, font-style, font-size, font-weight, text-decoration, text-align, vertical-align, letter-spacing, line-height, white-space), border shorthand properties (border, border-color, border-style, border-width, border-collapse) and a few others.
• COREEXTENDED: text-indent and margin properties (margin, margin-left, margin-right, margin-top, margin-bottom).
• FULL: width, peak, padding (in addition to padding-left, padding-right, padding-top, padding-bottom) and border longhand properties (border-left, border-left-color, border-left-width, border-left-style, and so forth).

And every of those classes will solely apply to sure HTML parts:

• <physique> and <span> solely assist CORE properties.
• <div> and <p> assist each CORE and COREEXTENDED properties.
• All the opposite parts supported by Outlook (like <desk>, <td>, <h1>, <ul>, <li>, and so forth) assist CORE, COREEXTENDED and FULL properties.

This implies we should take into consideration which component to make use of to use sure types. So if now we have to outline a width or a peak on a generic container component, we’ll use a <desk>. If we’d like padding, we’ll additionally use a <desk> and a <td>.

To at the present time, the Outlooks on Home windows are the only real motive we nonetheless use tables in HTML emails. Fortunately, there are methods for us to solely make these tables seen for Outlook, hiding them from extra succesful electronic mail purchasers and permitting us to make use of extra semantic code.

Microsoft launched conditional comments again in 1999 in Web Explorer 5. They have been fairly well-liked on the Internet in the course of the IE6–9 period, however they have been eliminated for Web Explorer 10 and 11. Right here’s the way it works: inside an everyday HTML remark (<!-- -->), you possibly can code a situation that may make the remainder of the content material seen if that situation is fulfilled. Right here’s an instance:

It seems that conditional feedback are additionally supported within the variations of Outlook on Home windows utilizing Phrase’s rendering engine. As an alternative of utilizing IE as a situation, we’re going to make use of the mso key phrase:

Circumstances can be tied to a model quantity. For instance, mso 12 targets Outlook 2007. Sadly, Microsoft has stopped incrementing this model quantity within the newest Outlook releases. So mso 16 targets each Outlook 2016 and the latest Outlook 2019.

We will additionally use operators like gte (higher than or equal) or lte (lower than or equal) to create extra advanced circumstances:

One other helpful operator is the NOT operator (!), which lets us insert code for each electronic mail shopper besides Outlook on Home windows:

<p>That is seen in each electronic mail shopper besides the Outlooks on Home windows.</p>

mso- Properties

Outlook on Home windows has lots of of proprietary CSS properties, principally recognizable because of the mso- prefix. A whole listing is on the market in a .chm file, however electronic mail developer Stig Morten Myre has a handy archive of it readable online.

For lots of normal CSS properties, Microsoft has an equal proprietary model prefixed by mso- and suffixed by -alt. For instance, we will outline a padding worth for simply Outlook on Home windows with the mso-padding-alt property. A method I usually use that is after I code buttons. Ideally, the whole seen space of a button ought to be clickable, so I usually add padding to <a> parts. However Outlook on Home windows doesn’t assist this. So as a substitute, I wrap every <a> component with a <desk> and apply a padding just for Outlook on Home windows with the mso-padding-alt property:

<desk border="0" cellpadding="0" cellspacing="0" function="presentation" align="heart" type="margin:0 auto; max-width:100%; background:#2ea44f; border-radius:5px; border-collapse:separate;" class="email-btn">
    <tr>
        <td type="mso-padding-alt:14px 16px; text-align:heart;">
            <a type="padding:14px 16px; show:block; min-width:128px; colour:#fff; font:daring 16px/20px Helvetica Neue, Roboto, sans-serif; text-decoration:none; text-align:heart;" href="https://www.instance.com" goal="_blank" >Name to Motion</a>
        </td>
    </tr>
</desk>

Outlook additionally has different unprefixed proprietary properties that may mimic their extra fashionable CSS equivalents. For instance, text-underline-color in Outlook is similar as text-decoration-color in CSS. So if you wish to apply a particular colour to a textual content underline, you need to use each properties:

text-underline-color: pink; 
text-decoration-color: pink; 

Stig Morten Myre has an amazing article explaining how to fix bugs with Outlook specific CSS, together with tips about use mso-text-raise or mso-line-height-rule: precisely.

VML

VML is SVG’s ancestor, crafted by Microsoft within the late nineties. Identical to SVG, you possibly can draw content material with markup code. For instance, if we need to draw a pink rectangle, we will use the <v:rect> component and the next code:

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" 
        fillcolor="pink" 
        stroked="false" 
        type="width:200px; peak:100px;">
</v:rect>

A prerequisite for getting VML to work in Outlook on Home windows is so as to add its namespace declaration (xmlns:v="urn:schemas-microsoft-com:vml"). It could actually both be repeated inline for every VML component we use, or it may be added on the <html> component solely as soon as. And since VML will solely work in Outlook on Home windows, we’ll make sure that to wrap it in a conditional remark. Right here’s a full working instance for our earlier pink rectangle:

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <title>VML rectangle</title>
</head>
<physique>
    
</physique>
</html>

In fact, we will do extra thrilling issues than pink rectangles. A method we will use VML is to faux properties unsupported by Outlook on Home windows — akin to background pictures. If we need to present a background picture on our <physique> component, we will use the <v:background> element. Nevertheless, this may be a supply of accessibility points, because it turns the content material inside it into a part of the VML picture, which could get misplaced for assistive applied sciences like display readers.

Marketing campaign Monitor’s Backgrounds.cm and Buttons.cm make in depth use of VML to faux background pictures or rounded corners. And electronic mail developer Mark Robbins offers nice examples of how VML can be utilized to create CSS triangles or fake absolute positioning.

Microsoft’s “How to Use VML on Webpages” and “VML Object Model Reference” are nice locations to begin studying about VML.

Rendering at 120dpi

On sure Home windows configurations, Outlook on Home windows applies DPI scaling on emails. Electronic mail developer Courtney Fantinato has an in depth information to correct Outlook DPI scaling issues. Listed here are the three guidelines it’s good to observe:

1. Add the Microsoft Workplace namespace on the <html> component:

   <html xmlns:o="urn:schemas-microsoft-com:workplace:workplace">
   

2. Add the next OfficeDocumentSettings declaration contained in the <head> component:

3. All the time use dimensions outlined in CSS as a substitute of HTML attributes:

   
   <desk align="heart" function="presentation" width="600">…</desk>
   
   
   <desk align="heart" function="presentation" type="width:600px;">…</desk>
   

The one exception for that is with pictures. In Outlook on Home windows, a width set in a type attribute is ignored on pictures.

Making Your Emails Work with out <type>

On the subject of making use of types to any HTML content material (be it for an online web page or an HTML electronic mail), there are 3 ways to do it, utilizing:

• a <hyperlink> component and an exterior stylesheet
• a <type> component
• an inline type attribute

Electronic mail purchasers are very opinionated relating to this, and assist for every of those methods can fluctuate wildly. That is often attributable to safety points. Electronic mail purchasers should be very cautious in regards to the types they permit, as a result of a malicious electronic mail might use types to deceive a person. For instance, utilizing mounted or absolute positioning might let a malicious electronic mail developer stack faux parts over an electronic mail shopper’s personal interface.

Electronic mail purchasers make use of a wide range of strategies for getting round this, akin to solely permitting a subset of properties or values from a secure listing of their very own. Additionally they apply prefixing to CSS selectors in an HTML electronic mail to forestall electronic mail types from impacting the shopper’s interface. For instance, a selector like .button {} would turn out to be .rps_1234 .x_button {} in Outlook.com.

The <hyperlink> component is very well supported in desktop native functions like Apple Mail (on macOS or iOS) or Outlook (on Home windows or macOS). Nevertheless, it’s virtually universally ignored by webmail purchasers (akin to Gmail, Outlook.com, Yahoo Mail, and so forth) in addition to lots of cell apps (like Gmail, Outlook or Yahoo Mail, on both iOS or Android). So it’s not a beneficial technique to type an HTML electronic mail. However it could actually have fascinating use instances, like when Litmus created a live dynamic Twitter feed in 2015.

The <type> component has way better support. But it surely additionally has a number of quirks. Gmail purchasers, specifically, solely assist type tags outlined within the <head> (not within the <physique>). They’re additionally very choosy about any syntax error, and Gmail will take away a complete <type> that comprises one thing it doesn’t like (like an @ in an @ declaration, for instance). It’s a standard observe to make use of a number of <type> parts in HTML emails. After eradicating the unsupported ones, Gmail will mix them right into a single one which’s limited to 16KB.

However <type> parts should not at all times supported. For instance, if you happen to obtain an electronic mail within the Gmail app (on iOS or Android) with a non-Gmail handle (like an Outlook.com or Yahoo handle), you received’t get <type> assist.

<type> parts can be eliminated contextually. For instance, once you ahead an electronic mail within the desktop webmail of Gmail, all <type> tags are eliminated. Gmail additionally removes <type> tags when an electronic mail is considered in its unclipped model.

In order a basic rule, it’s safer and extra sturdy to make use of inline types through the HTML type attribute. We will additionally use <type> tags, however solely as a progressive enhancement, particularly for issues like @media queries or :hover pseudo-classes that may’t be inlined.

“Making an electronic mail work” with out the <type> component can imply lots of various things. But it surely’s greatest to suppose before everything in regards to the following:

• Structure. An electronic mail with out <type> ought to alter to any width with out horizontal scroll. I often take into account going as little as 280px extensive, which displays the width of an electronic mail considered on Gmail on an iPhone SE.
• Branding. An electronic mail with out <type> ought to mirror the branding of the sender.

Avoiding Computerized Hyperlinks

Electronic mail purchasers robotically add hyperlinks to sure key phrases. This may occur to the next sorts of textual content:

• URLs (Pylogix.com, https://www.Pylogix.com/weblog/)
• electronic mail addresses ([email protected])
• cellphone numbers
• mailing addresses
• dates
• flight numbers

The picture under reveals how Apple Mail offers detailed info on air flights when a present flight quantity is clicked.

The issue is that, if we don’t plan for them, these hyperlinks will give you their default types (often blue and underlined) — and this may create sudden and undesirable results. For instance, an automated blue hyperlink on an already blue background will probably be unreadable. Sadly, anticipating these automated hyperlinks isn’t foolproof. It’s not unusual {that a} customized provide or monitoring code is become a date or cellphone quantity hyperlink.

Listed here are three potential methods to keep away from automated hyperlinks:

• Add a particular meta declaration for Apple Mail. With this tag within the <head> of our electronic mail, Apple Mail received’t add automated hyperlinks:

  <meta identify="format-detection" content material="phone=no, date=no, handle=no, electronic mail=no, url=no">
  

• Use a zero-width non joiner character. A zero-width non joiner is an invisible character represented by the entity ‌ (or ͏) in HTML. We’ll use it right here to interrupt electronic mail purchasers’ content material detection algorithm by putting it in the course of textual content the place a hyperlink may be added:

  Go to Sitepoint‌.com for extra particulars!
  

• Add a hyperlink ourselves. Electronic mail purchasers are intelligent sufficient to not attempt to add a hyperlink to textual content that’s already linked. So if we add a hyperlink ourselves round textual content that we all know may get robotically linked, we will apply our personal types. A hyperlink would nonetheless be there, however at the least not so prominently seen:

  Go to <a href="https://Pylogix.com" type="colour:#000; text-decoration:none;">Pylogix.com</a> for extra particulars!
  

Utilizing Actual URLs

Microsoft’s Outlook.com webmail has a bug when utilizing non-URL textual content because the href worth of an <a> component. For instance, take into account the next code:

<a href="" type="colour:blue;">Get the app on iOS</a><br>
<a href="TBD" type="colour:inexperienced;">Get the app on Android</a>

That is reworked by Outlook.com into the next:

Get the app on iOS<br>
[TBD] Get the app on Android

The whole <a> component, together with its types, is eliminated. And the worth of the href attribute (if it’s not empty) is added between brackets earlier than the hyperlink textual content.

I’ve been caught by this bug greater than as soon as, often as a result of I didn’t have the hyperlinks to place there on the time I used to be coding. My go-to resolution now could be to at all times use the shopper’s area or https://instance.com as a brief hyperlink. Instance.com is one other helpful area that’s reserved by IANA “to be used in illustrative examples”.

Including an Empty <head>

Yahoo Mail on Android removes the <head> component of any electronic mail. That is very inconvenient, since which means that <type> tags, together with media queries, can’t work there. However it was discovered that the Yahoo Mail app will solely do that for the primary <head> of an electronic mail.

So which means that if we embody a dummy empty <head> first in our code, after which maintain our common <head> component, Yahoo Mail on Android will accurately maintain it and interpret it:

<!DOCTYPE html>
<html lang="en">
<head></head>
<head>
    <title>My Electronic mail</title>
    <type>
        @media (max-width: 600px) {
            …
        }
    </type>
</head>

The picture under reveals an example email (courtesy of Actually Good Emails) within the Yahoo Mail app on Android. With out the double <head>, the e-mail is robotically scaled by the shopper. With the repair, the e-mail renders media queries simply as anticipated.

Maintaining Electronic mail Sizes under 102KB

Gmail’s desktop webmail has a infamous threshold of 102KB, after which it would truncate an HTML electronic mail and present a “[Message clipped]” alert, together with a “View whole message” hyperlink. Whereas it’s unknown why this limitation exists and why it’s at such an odd quantity exactly, it’s been measured consistently across the years.

This 102KB limits solely accounts for the scale of the HTML of our electronic mail message. It doesn’t embody different components of an electronic mail (just like the plain textual content model, or the entire MIME header fields). It additionally doesn’t embody the burden of any distant asset like pictures or fonts. So if our HTML weighs 40KB with 500KB of pictures, we’re high quality.

We need to keep away from this threshold as a result of:

• Gmail will reduce our electronic mail at 102KB to insert its “[Message clipped]” alert, even when that is proper in the course of a <desk>. That is very more likely to break our electronic mail in sudden methods.
• Behind the “View whole message” hyperlink, Gmail will present inferior assist for HTML and CSS. For instance, any <type> tag (and thus media queries) will probably be eliminated on this view.

A primary technique to measure that is to take a look at the burden of our HTML file in our working system. On-line electronic mail instruments like Alter.email or Parcel additionally present an estimate of our code weight.

Understand that some electronic mail service suppliers may additionally course of components of our HTML in such a method that its weight will enhance. For instance, CSS inlining or hyperlink monitoring could be huge offenders in making our code obese.

Optimizing our HTML electronic mail code could be performed in a number of methods. Right here’s what I often take into account a very powerful steps:

• Minify your code. However don’t use a minifier constructed for the Internet! HTML Crush is an effective one constructed for emails (avoiding making traces of code longer than 500 characters, for instance). Simply by eradicating indentations, you possibly can diminish your HTML weight by a very good third.
• Take away unused code. In case your electronic mail is constructed from a generic template that features a number of types for various elements, you may find yourself with types you don’t truly use. On-line software Email Comb cleans up unused code properly.
• Be careful for CSS inlining. When you’ve got a CSS rule concentrating on the common selector (for instance, * { colour:#000; }), this will probably be utilized to each single HTML component in your code (together with <tr>, <br>, and loads of different ineffective locations). Make sure that your CSS inliner works as you anticipate and examine your code after inlining types.
• Use fewer tables. Tables are crucial for Outlook on Home windows, however they are often heavy. If we’re not utilizing padding, border, or a number of columns, it may be higher and lighter to easily have extra semantic bits of code stack on high of one another.

Gmail may show the “[Message clipped]” alert with out actually clipping your message. This may be brought on by the presence of particular characters like © anyplace in our message.

Yahoo and AOL purchasers have a specific bug with CSS comments. For instance, take into account the next code:

<type>
    
    .title {
        font-size: 32px;
    }
</type>

That is reworked by Yahoo and AOL into the next:

<type>
    #yiv1234567890
    #yiv1234567890 .yiv1234567890title {
        font-size: 32px;
    }
</type>

The e-mail shopper renames each class by including a customized prefix (yiv1234567890) and provides a prefix to each selector (#yiv1234567890). It is a quite common observe throughout electronic mail purchasers — particularly webmail variations — and is required to make sure that our electronic mail types can’t have an effect on the webmail shopper’s personal types, and vice versa.

The bug right here is that Yahoo additionally tries so as to add its prefix to the CSS remark. And since it solely provides it alone on a single line of code, this implies it applies to the CSS selector on the following line. Contemplate the next selector:

#yiv1234567890 .yiv1234567890title { }

This now will get interpreted as follows:

#yiv1234567890 #yiv1234567890 .yiv1234567890title { }

With twice the id prefix, it not matches something on the web page, and thus this makes the CSS rule void.

This bug doesn’t apply if we’ve bought CSS feedback inside a CSS rule (between the curly braces). However as a basic cautionary rule, it’s greatest to take away all CSS feedback earlier than sending an electronic mail.

Utilizing an HTML5 Doctype

Electronic mail purchasers by no means output your HTML electronic mail code simply as is. They apply numerous transformations, akin to filtering undesirable tags (like <script>), attributes and types. And webmail purchasers specifically don’t maintain your whole HTML.

A webmail electronic mail is displayed in an online web page that already has its personal doctype, <head> and <physique>, together with different meta parts. So a webmail shopper like Gmail seems for <type> tags in your head, compiles them right into a single one, and retains the content material of your <physique> component.

Which means that, in lots of instances, you’ll find yourself with the webmail’s doctype, not yours. And these days, most webmail purchasers use an HTML5 doctype:

<!DOCTYPE html>

One facet impact of the HTML5 doctype is that <img> parts have a line spacing under them. This turns into clearly obvious once you slice pictures.

The next picture demonstrates what occurs once you overlook to set show:block in your pictures in an HTML electronic mail (courtesy of @HTeuMeuleu on Twitter).

There are numerous options for getting round this. Listed here are three, by order of private choice:

• Add vertical-align:center in an inline type on the <img> component. (This may impression surrounding textual content if it’s good to align the textual content and picture in a different way.)
• Add show:block in an inline type on the <img> component. (This modifications the circulation of the content material and may impression sibling parts.)
• Add font-size:0 to the mum or dad component of the <img>. (This may impression various textual content rendering.)

Right here’s an instance of the primary resolution utilized to a picture with an inline type attribute:

<img src="brand.png" 
     alt="" 
     type="vertical-align:center;" />

Conclusion

Coping with electronic mail shopper quirks is a part of the job of an electronic mail developer. It’s a good suggestion to observe electronic mail developer communities to observe the most recent updates and practices. I like to recommend the #emailgeeks hashtag on Twitter and the #emailgeeks Slack channel.

It may be powerful to maintain updated with the brand new quirks and likewise transfer past the previous ones. In 2015, I launched a GitHub repository to track email bugs, a group of points with energetic discussions and potential options for all of the totally different electronic mail quirks and bugs. Over time, it has gathered over 100 points, 1 / 4 of which have since been mounted. This provides me good religion that by reporting what we see, electronic mail purchasers can enhance and repair their very own code. Whereas it’s a gradual course of, I do really feel like HTML emails are transferring in the direction of a greater future, with extra interoperability and requirements assist.

And that is nice information, as a result of this may open the best way for extra enjoyable and thrilling options — akin to interactivity! In the next part of this book, we’ll take a look at how we will make our emails extra interactive with simply CSS and HTML.