Email HTML Limitations

Overview

We all want our emails to look great, however, there are some challenges when sending HTML emails because email clients do not support HTML in the same way and never don't support the full range of HTML styles. So while you have full access to HTML formatting in Finalsite Enrollment, not all email clients will render it the same.

Research by leading marketing companies, like Hubspot, have also found that highly formatted emails with lots of HTML, color, and images reduce engagement by 25% on average and click through rates of 51%. For more information, visit this blog post by Hubspot.

--

---

HTML Email rendering issues in Microsoft Outlook

Templates are designed to look great across all email clients. However, versions of Outlook from Outlook 2007 to present use Microsoft Word to render HTML email, which can cause problems with email display.

Microsoft Word is meant for documents and its attempts to render HTML rarely match web design standards.

Some common issues with rendering in Microsoft Outlook:

--

Image isn't the right size.

Outlook doesn't recognize the HTML that constrains images. This means that if you use HTML to resize an image uploaded to a campaign or template, it may display at the original size in Outlook. Be sure to resize your images before you upload them.

--

Image alignment is being ignored

Outlook doesn't recognize image alignment. You can work around this by adding a table and then inserting the image in the cell that is aligned to the left or right.

--

Image padding is off

Outlook will ignore set padding and margins around images. As a result, your wrapped text will be pushed against the image. To fix this, you may have to add padding within the image itself.

--

Excess white space

Because Outlook renders HTML using Microsoft Word, white space is sometimes inserted above an image. This occurs because Outlook renders email on a computer screen similarly to how print preview shows how the email will look on a printed page. If the image falls between what Outlook sees as two separate pages for that particular section, extra space is inserted above the image to force the image down to the next page. While email is a single, continuously scrolling page, Outlook renders portions of the email as though they are meant to be printed onto separate sheets of paper.

Eliminating the extra white space requires reorganizing your content.

When reorganizing your content, you ultimately want to determine where Outlook is marking the page break in your content. If there is an image below the white space, try to move the image to another area in your layout and send a test email to see if this fixed the issue. Continue reorganizing and testing your campaign until the white space is eliminated.

---

Email content v. Web HTML

The viewing technology of a typical email client isn’t the same as in most web-browsers. Web browsers display interactive and dynamic content. But interactive elements like Flash, JavaScript, or HTML forms won’t work in most email inboxes. Most email clients restrict HTML viewing to basic layout elements even when they are accessed via a web-browser (like Gmail or other services).

Safe to use

Widely supported by most email clients

• static, table-based layouts
• HTML tables and nested tables
• template width of 600px
• simple, inline CSS
• web-safe fonts

Use with caution

Limited support from most email clients

• background images
• custom web fonts
• wide layouts
• image maps
• embedded CSS

Do not use

Not supported by most email clients

• JavaScript
• Flash
• embedded audio
• embedded video
• forms
<div> layering

--

---

Use with Caution

Web Fonts

Our Email Editor allows you to use standard fonts and a select number of custom web fonts. If an email client doesn’t support a web font used in your campaign, the email client will fall back to its default font.

Wide Templates

Your subscribers often open campaigns on mobile devices or in the preview pane of desktop email clients. Email viewing panes are narrow, so they’ll cut off your message if it’s wider than 600-800px. Finalsite Enrollment automatically limits all emails to 600px wide.

---

Do Not Use

The elements below are blocked by nearly all major email clients. Support is either extremely limited, or nonexistent.

JavaScript

JavaScript is a programming language that makes web content interactive. It’s common in websites, but the vast majority of email clients block scripts since they can hide malicious content. Avoid all JavaScript.

Iframe Elements

An <iframe> (inline frame) is an HTML element that embeds content from one website into another. Inline frames are often used to insert advertisements, video, audio, or forms in other websites. Iframes often contain scripts, so most email clients block them.

Instead, link to the content you want to display in your campaign.

Flash

Flash displays animations and graphics on websites, but email clients will block it. Adobe has announced the end-of-life of Flash support so all Flash content on your websites should be migrated to open standards such as HTML5.

Instead, try gifs to make your content more engaging.

--
HTML Forms

Text fields, text inputs, radio buttons, and checkboxes are simple HTML form elements, but the submit button often requires Javascript. Some email clients will display forms, but unfortunately, subscribers won’t be able to submit them. Avoid HTML forms, and consider an alternative such as a link to a 3rd party solution like Survey Monkey.

--
Embedded media

Autoplay and click-to-play media won’t play in an inbox unless your subscriber’s email client supports HTML5 <video> and <audio> tags. Only one major email client, Apple Mail, supports these tags, so it’s best to avoid embedded media and consider an alternative.

Instead, insert a text link to your video or audio.