> ## Documentation Index
> Fetch the complete documentation index at: https://docs.migma.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Email Client Compatibility

> How Migma renders designs for Outlook, webmail, and mobile

Every Migma email is stored as an editable email and rendered by Migma's email engine for real inboxes. Chat, visual edits, Figma import, HTML import, and Claude design import all use the same rendering path. You get one predictable HTML output, not a one-off paste from a browser layout.

Email clients are not browsers. CSS support is partial. **Desktop Outlook renders with Microsoft Word**, not Chromium or WebKit. That is why flex layouts, modern CSS, and div-based email templates often break in Outlook while they look fine in a browser preview.

Migma's email engine is built around that constraint from the ground up.

***

## How Migma renders your email

Migma emits **table-based HTML** with **inlined styles**. That matches what Gmail, Yahoo, Apple Mail, and Outlook actually support.

What that means in practice:

* **Layout uses tables**, not flexbox or grid, so columns and sections stay stable in Outlook.
* **Styles are inlined** on elements clients will honor. Relying on large `<style>` blocks alone fails in many inboxes.
* **Outlook gets dedicated output**: extra table structure for width, conditional blocks Word understands, and fallbacks for rounded buttons and backgrounds where Outlook cannot paint them like a browser.
* **Responsive behavior** uses patterns that degrade safely on small screens instead of assuming every client runs your media queries the same way.
* **Dark mode**: Migma can emit `color-scheme` metadata and safe light/dark color choices, and you can lock brand colors so clients do not invert logos or CTAs unpredictably.

You edit in Migma. Migma produces the HTML you export, preflight, and send. You do not hand-maintain Outlook conditionals in the editor.

***

## Why Outlook breaks other emails

Outlook desktop (Windows and Mac) uses Word to lay out HTML. Common failures:

* **Margins and padding** behave differently than in webmail.
* **Flexbox, grid, and positioning** are unreliable or ignored.
* **Background images and border radius** need fallbacks Word can render.
* **Nested div layouts** collapse or stack incorrectly.

Templates built for a browser or exported from design tools without email-specific rendering often work in Gmail and fail in Outlook. Migma targets both: webmail and mobile first, with Outlook-specific output so you are not maintaining two templates.

***

## Webmail, desktop, and mobile

<Tabs>
  <Tab title="Webmail">
    Gmail, Outlook on the web, Yahoo, AOL, iCloud, and similar web clients.
  </Tab>

  <Tab title="Desktop">
    Apple Mail, Outlook for Windows and Mac, Thunderbird, and other desktop apps.
  </Tab>

  <Tab title="Mobile">
    Apple Mail on iOS, Gmail and Outlook apps, Samsung Mail, and other mobile clients.
  </Tab>
</Tabs>

[Email Preflight](/email-editor/email-preflight) shows rendered previews and pass, warning, or fail status for major clients. Use it before export or send.

<img src="https://mintcdn.com/migmaai/fdDb3jxHlHiKoBGd/images/compat-preflight-clients.png?fit=max&auto=format&n=fdDb3jxHlHiKoBGd&q=85&s=a3e925c5dcedbc146f3999e98f8281bb" alt="Email Preflight grid with client previews and status tags" title="Preflight client previews" className="mx-auto" width="800" data-path="images/compat-preflight-clients.png" />

***

## Dark mode and light mode

Clients may force dark backgrounds or invert colors. Without planning, text, buttons, and logos can disappear.

Migma can:

* Emit `color-scheme` and `supported-color-schemes` metadata
* Use color choices that survive inversion in common clients
* **Lock brand colors** when you need logos and CTAs to stay on-brand in dark and light presentations

<img src="https://mintcdn.com/migmaai/fdDb3jxHlHiKoBGd/images/compat-dark-light.png?fit=max&auto=format&n=fdDb3jxHlHiKoBGd&q=85&s=4631114552351f1d24faebcaa7bceaa1" alt="Same email in light mode and dark mode" title="Light mode vs dark mode" className="mx-auto" width="800" data-path="images/compat-dark-light.png" />

For research on dark mode and engagement, see the [dark mode case study](/case-studies/dark-mode-deliverability).

***

## Why the same email still looks slightly different

<AccordionGroup>
  <Accordion title="Limited CSS" icon="code">
    Many properties never worked in email HTML. Migma emits patterns known to work, not browser-only layout.
  </Accordion>

  <Accordion title="Image blocking" icon="image">
    Some clients hide images by default. Use alt text and readable HTML text for anything important.
  </Accordion>

  <Accordion title="Dark mode overrides" icon="moon">
    Clients may recolor your message. Design and preflight for light and dark.
  </Accordion>

  <Accordion title="Web fonts" icon="font">
    Custom fonts work in some clients and fall back elsewhere. Migma applies safe fallbacks when needed.
  </Accordion>
</AccordionGroup>

We optimize for reliable rendering and readable content, not pixel-identical screenshots in every client.

***

## Verify before you send

<Steps>
  <Step title="Generate or edit your email">
    Use design chat or the visual editor until the layout matches your brand.
  </Step>

  <Step title="Run Email Preflight">
    Review client previews, CSS compatibility, links, and deliverability signals.
  </Step>

  <Step title="Fix issues">
    Edit in Migma or use **Fix with AI** on flagged items, then run Preflight again.
  </Step>

  <Step title="Send a test">
    Send to your own Gmail, Outlook, and Apple Mail inboxes for a final check.
  </Step>
</Steps>

***

## Related pages

<CardGroup cols={2}>
  <Card title="Email Preflight" icon="check-double" href="/email-editor/email-preflight">
    Client previews and compatibility checks before send.
  </Card>

  <Card title="HTML import" icon="file-code" href="/creating-emails/html-import">
    Rebuild broken legacy HTML through Migma.
  </Card>

  <Card title="Export options" icon="download" href="/email-editor/export-options">
    Export production HTML to your ESP.
  </Card>

  <Card title="Outlook without domain setup" icon="envelope-open-text" href="/email-editor/outlook-export">
    Paste production HTML into Outlook when domain setup is blocked.
  </Card>
</CardGroup>