Best Practices for Using Email Templates

Overview

The Gainsight Email Template Builder offers a flexible, component-based editor for designing responsive, accessible, and client-compatible email templates. This guide outlines best practices for formatting, copy-pasting, and importing custom HTML to ensure consistent rendering and optimal performance. Following these recommendations helps maintain design integrity across all email clients.

Best Practices for Creating Email Templates

Click the View best practices link in Email Templates to explore best practices for using the Email Template Builder. 

Here are some additional best practices that can help you maintain consistent formatting, performance, and compatibility across email clients:

• Text & Fonts
  • Only web-safe fonts are supported during copy-paste operations.
Custom fonts are not supported because many email clients do not render them correctly.

  • If you notice differences in text formatting, headers, or lists after pasting, select the section and reapply the formatting. Once corrected, the issue will not reoccur. For more information on copy-paste guidelines, refer to the Email Template Builder article.
    
    
• Copy & Paste
  • When adding text to your email template, use a clean and consistent source for best results.
  • Use Google Docs or Microsoft Word (Offline version) as your content source. Pasting content from MS Word (Online version) may not produce the best results. 
  • Avoid copying directly from web pages or other tools, as they may include unsupported or inconsistent HTML.
• Layouts
  • Build emails using blocks and containers instead of inserting text elements directly.
    
    
     
  • Apply padding and borders at the block or container level to maintain consistency, responsiveness, and cleaner rendering. 
    
    
     
  • Use the Email Content Area style settings in the Elements tab to apply global design adjustments such as font, spacing, and padding across the entire template.
    
    
     
  • If your template feels slow or laggy, turn on the Template Optimization Mode toggle under Advanced Settings to enhance performance.
    
    
     
• General
  • Images: Upload images using the Web Address (URL) option for optimal rendering and include alternate text (Alt Text) to ensure accessibility and understand broken visuals if the image fails to load.
    
    
     
  • List: If the font size doesn’t update consistently across a list, reselect all list items including their bullets or numbering and then reapply the desired font size.
    
    
     
• Outlook-Specific Recommendations
  • Outlook for Windows (2007–2019 and Office 365 Desktop) has limited support for certain design elements. Unsupported elements include:
    • Border radius and borders on text or elements are not supported.
    • Borders on images or videos are not supported.
  • Apply padding, borders, and background colors at the container or email content area level instead of on text elements.
    
    

Best Practices for Importing Email HTML

Follow these best practices to ensure compatibility, consistent rendering, and optimal performance when importing external HTML into the Email Template Builder:

• Complete Styling before Importing HTML: Before importing external HTML or custom code into Email Template Builder, finalize all styling in your external editor. The Email Template Builder Design Mode does not guarantee full support for correcting or modifying complex styles.
  Complete and verify all design elements in your external editor:
  • Layout styles
  • Typography
  • Spacing
  • Colors
  • Component-level formatting before importing, as Email Template Builder may not preserve or reliably correct these styles after import.
• Write Semantic and Clean HTML: 
  • Use semantic elements such as <header>, <section>, <article>, and <footer>. Avoid deprecated or non-standard tags to ensure consistent cross-platform rendering. 
  • Keep the HTML structure simple and optimized. Avoid unnecessary nesting, which may affect rendering speed and stability.
  • Unused inline styles can slow template loading. Clean them before import. 
• Use <div> with Semantic Tags: Use <div> elements with semantic tags for better readability and reduced conflicts.
• Avoid Excessive Whitespace: Remove unnecessary whitespace to prevent rendering glitches.
• Line Break Scenarios: 
  • Line-break logic may fail when <br> tags appear alongside text nodes in complex structures. To fix, remove and re-add line breaks in Design mode.
  • After formatting the template, add required line breaks inside content blocks. 
• Use <ul>/<ol> with <li> Tags: Always use semantic list tags to create proper list behavior.
• Do Not Nest <div> Inside <font> or <span>: As per W3C standards, block elements should not be placed inside inline elements.
• Font Tag Conversion to <span>: Deprecated <font> tags are converted to <span> tags. Font sizes are mapped as follows: 1 → 10px, 2 → 13px, 3 → 16px, 4 → 18px, 5 → 24px, 6 → 32px, 7 → 48px. Styling may appear slightly different after conversion. Reapply formatting as needed.
• Use Clear Formatting if Styles Behave Unexpectedly: If styles do not apply correctly, use the "Clear Formatting" option and reapply the styles.
• Blockquote Conversion: <blockquote> elements are automatically converted to <div> tags upon save. Default left margin styling from <blockquote> is removed. Add a manual indent if you wish to maintain the original blockquote appearance.
• Auto-Correction of Improper HTML: If imported HTML is not semantically correct (example, <ol>/<ul> containing elements other than <li>), Email Template Builder automatically corrects the structure when you click within the content area. This may alter the design, requiring users to fix their template manually.
• Avoid using white-space: pre/pre-wrap in HTML emails: Using white-space: pre or pre-wrap in email HTML is generally not recommended. These styles force email clients to preserve all spaces, tabs, new lines and spacing that would typically collapse in standard rendering.
  In email builders, users may unintentionally insert extra spaces. When white-space: pre is applied, those artifacts are preserved, which can cause layout issues and break the email design.