Skip to main content

HTML Best Practices for Email Templates

Srikanth Chinnammagari
Organization

Overview

This article outlines best practices for creating email templates for campaigns on Convey products. It is intended to help customers design reliable, high-performing email communications.

Purpose

The guidelines in this document are based on widely accepted HTML email industry standards. In addition, they incorporate common use cases and recurring issues that customers have encountered, along with recommended approaches to address them.

What You’ll Learn

  • Best practices for building email templates compatible across clients and devices
  • Standard HTML guidelines for email development
  • Solutions to common issues observed in customer implementations
  • Practical recommendations to improve deliverability and rendering consistency

Who Should Use This Article

This article is intended for customers, developers, and internal teams who are responsible for creating or managing email templates within Convey products.

Below are some of the common customer use cases highlighting common mistakes while creating HTML based templates:

Common customer use cases:

1. Highlighting Inconsistency
Highlighting is not system‑generated. It is introduced during copy‑paste from external tools (e.g., Word), where background formatting is embedded directly into the HTML.

Several email templates use inline HTML styling for highlighting

<span style="background:yellow">

instead of the standardized system-supported marker

<span class="marker">

This leads to inconsistent rendering across email clients.

Our recommendation:  Do not use inline HTML styles, especially: <span style="background:yellow">. Always paste content as plain text first, then format inside the system.

2. Unintended Italic Formatting
Italic text appears unintentionally when content is pasted with hidden or residual formatting from external editors (Word, Google Docs, rich text emails). This formatting is preserved in HTML and affects rendering.

Our recommendation: Do not copy‑paste content directly from Word, Google Docs, or emails. In case you want to change formatting to Italics, Use <em> instead of <i> for italic emphasis.

3. Case Sensitivity in HTML Tags and Variables
HTML tags, attributes, CSS classes, IDs, JavaScript variables, and template placeholders can behave differently depending on case usage. Inconsistent capitalization may cause styling, scripting, or dynamic content rendering issues.

<!-- Correct -->
<p>Welcome, <%CustomerName%></p>
<!-- Incorrect -->
<p>Welcome, <%customername%></p>

Our recommendation: Maintain consistent casing across all HTML tags, attributes, CSS classes, IDs, and variables. Use lowercase for HTML tags and attributes as a best practice, and ensure variables/placeholders match the exact case defined in the source code or template configuration

4. Extra Vertical Spacing in Emails
Extra spacing is caused by invalid or unnecessary HTML elements inside templates, specifically:

Empty paragraph tags: <p>&nbsp;</p>
Non‑standard / invalid tags: <xbr>, <xp>

While browsers ignore these tags, email clients (Outlook, Gmail, Apple Mail) render them as visible spacing.

Note:
Older templates (pre‑digital transition) already contained these patterns. Recent changes in email client rendering engines, especially Outlook now expose spacing issues that were previously not visible. No recent template changes triggered this.

Our recommendation: Do not insert empty paragraphs such as: <p>&nbsp;</p>

Recommended Best Practices

  • Always proofread your templates before you send it to the customers.
  • Test the final view of the email by sending it to an internal seed list before sending it to the customers.
  • Always make sure you close all tags properly.
  • Paste content as plain text first, then format inside the system.
  • Use system approved styles. (e.g., <span class="marker">)
  • Do not use non‑standard or deprecated HTML tags. (e.g. <xbr>, <xp>, <font>, <center>, <marquee>)
  • Use <table> for layout only when necessary, and ensure all rows and cells are properly closed.
  • Use Absolute URLs to embed Images and Links instead of relative paths.
  • Keep HTML clean, minimal, and compliant to Standards.

Recommended HTML Validation & Viewing Tools

HTML Validators

HTML Viewers

Comments

0 comments

Please sign in to leave a comment.

Powered by Zendesk