Email HTML Best Practices

Topics Covered

• Overview
• Do's and Don't of HTML in Email
• Use with Caution
  • Animated Gifs
  • Background Images
  • Background Images
  • Web Fonts
  • Wide Templates
• Do Not Use
  • JavaScript
  • Iframe Elements
  • Flash
  • HTML Forms
  • Embedded Media

Overview

The majority of email clients don't support every type of HTML content you see on the web. Web browsers are able to display scripts, animations, and complex navigation menus, while your typical email inbox isn't built to handle this type of content.

In this article, you'll learn about content types to avoid in your email designs, and what to use instead.

Do's and Don't of HTML in Email

Email clients typically have their own design constraints as compared to a web browser. Interactive elements like Flash, JavaScript, or HTML forms won't work in most email inboxes.

Refer to this table to learn more:

Use with Caution

You can include certain elements, like background images and custom fonts, in your Configio emails. Not all email clients support these elements, so we recommend that you thoroughly preview and test your campaigns before you send them to your entire audience.

Animated Gifs

Some email clients don't support animated GIFs, but if you would like to include a GIF in your campaign, you can insert one into your campaign directly from Giphy.

Background Images

Configio supports background images in the preheader, header, body, column, and footer sections of our drag-and-drop templates. If you use a custom HTML template, you can add a background image with our template builder. Background images don't render in every email client, and may appear differently in mobile clients, so it's important to thoroughly preview and test your campaigns before you send them to your audience.

Web Fonts

Configio's Editor toolbar 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, we'll replace it with a standard font instead.

Take a look at this table to find out which email clients do and do not support web fonts.

Wide Templates

Your contacts 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.

Do Not Use

The following elements are blocked by nearly all major email clients.

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.

Try gifs to make your content more engaging.

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 most email clients block it.

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, contacts won't be able to submit them. Avoid HTML forms, and consider an alternative.

Embedded Media

Autoplay and click-to-play media won't play in an inbox unless your contact'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.

This knowledge article provides information on specific Configio features. To ensure continuity with documentation and product functionality, Configio reserves the right to amend or update this knowledge article as needed. For more information, reach out to Configio Support.