Skip to main content
compares the designer with code.
When the visual designer’s blocks are not enough, edit a template’s email HTML directly and format it to render across Gmail, Outlook, and Apple Mail.

​
Prerequisites

  • Your HTML email markup

​
Import and format the HTML

1

Open the HTML editor

Open the email template in the designer and click the code icon (</>) in the toolbar, then Start editing. Courier converts the current blocks to HTML and shows it in the editor.
Editing HTML is one-directional.
Enabling code editing creates a new version, and switching back to the visual designer discards your HTML changes. Keep a copy of your HTML, or use version history to revert.
2

Paste and format your HTML

Paste your markup into the editor. It auto-formats on paste, highlights syntax, and wraps long lines. The email subject is edited separately in the subject field above the editor, so it is safe from your body changes.
3

Add variables and logic

Use Handlebars in the HTML to personalize each send. Reference the data payload ({{order_id}}), profile fields ({{profile.email}}), and use the full for logic and formatting:
The preview panel renders your HTML with test data so you can check it before publishing.
4

Make the HTML email-safe

Email clients vary widely in their HTML and CSS support. When porting web HTML to email, work through this checklist:
  • Replace flexbox/grid with tables. Use <table>/<tr>/<td> for layout, with role="presentation" on layout tables for accessibility.
  • Move all CSS inline. External stylesheets and most <style> blocks are stripped (Gmail is the exception: it supports <style> in the <head>).
  • Replace div containers with table cells. Outlook 2019 ignores max-width on <div>.
  • Set explicit pixel widths. Percentages are unreliable in nested tables. Use a 600px max-width outer container and keep every section the same width.
  • Use !important on class-based styles. Courier’s MJML compiler generates inline styles that win by default, so your custom CSS classes need !important to override them (see ).
  • Host images externally. Use absolute URLs. Courier does not host images for src paths (the exception is ).
  • Add MSO conditionals for Outlook. Outlook uses Word’s rendering engine and needs Outlook-specific table markup.
5

Add Outlook compatibility

Outlook 2019 and earlier ignore most CSS beyond basic font, color, margin, padding, and border. Wrap Outlook-specific table structure in MSO conditional comments:
For a brand’s MJML footer that needs Outlook support, inject the raw table with <mj-raw>. If MJML minification is enabled on your workspace, it can strip MSO comments from the compiled output. If your Outlook layout disappears after sending, contact support to check whether minification is on for your workspace.
6

Avoid unsupported CSS

Modern CSS is unsupported or inconsistent in email. Avoid these without a tested fallback: animation/transition (use GIFs), position: absolute/fixed, flex/grid (use tables), box-shadow and border-radius (no Outlook), opacity, calc(), filter, pseudo-elements (:hover, :before), and object-fit. Design mobile-first at a 600px max width, since @media support is partial.
7

Preview across clients

Use the preview to check rendering with test data, then send a test and confirm the layout holds in Gmail, Outlook, and Apple Mail. Cross-client tools like Litmus or Email on Acid help catch client-specific issues.