Welcome — onboarding email series
A three-email welcome series built in MJML. Built for Outlook, Gmail and Apple Mail, and it holds up in dark mode.
- MJML 4.15
- Tables + VML
- Dark mode
- 600 px
How it renders
What actually happens in each client, and why the markup is built the way it is.
Outlook 2019
What matters here
Outlook renders mail through the Word engine. The layout is nested tables with conditional comments, so the structure holds and nothing collapses — but the dark theme is ignored and it stays light, which is intentional.
Gmail
What matters here
Gmail strips part of the media queries and clips messages over 102 KB. Each email here is well under that, and the mobile layout works even where the media queries are dropped.
Apple Mail
What matters here
Full support, including the dark theme. Backgrounds and text stay contrasty rather than being auto-inverted into mush.
Built for
- Outlook 2016
- Outlook 2019
- Outlook 365
- Outlook.com
- Gmail web
- Gmail iOS
- Apple Mail
- Yahoo Mail
- Thunderbird
Light and dark inbox
Dark mode is handled with prefers-color-scheme plus
[data-ogsc] fallbacks for Outlook.com, which rewrites
colours instead of reading media queries.
Desktop and mobile
Client support
| Client | Light | Dark |
|---|---|---|
| Outlook 2016 / 2019 / 365 (Windows) | ✓ | — |
| Outlook.com | ✓ | ✓ |
| Gmail web | ✓ | ✓ |
| Gmail iOS and Android | ✓ | partial |
| Apple Mail | ✓ | ✓ |
| Yahoo Mail | ✓ | ✓ |
| Thunderbird | ✓ | ✓ |
“partial” means the client applies its own colour inversion rather than reading the palette in the source. Nothing breaks — it simply is not identical to the design.
Free version
Everything you need to publish. A credit link stays in the footer.
- Compiled HTML
- yes
- MJML source
- yes
- Credit link in footer
- required
- Extra emails in the series
- no
- Updates and support
- no
Pro
No attribution, plus the source files and 12 months of updates and email support.
- Compiled HTML
- yes
- MJML source
- yes
- Credit link in footer
- not required
- Extra emails in the series
- 4 more
- Updates and support
- 12 months, email
Licence
Use it in unlimited personal and commercial projects, including client work.
Do not resell the template itself, alone or in a bundle.
Why this is harder than it looks
Outlook renders email with the Word engine. Anything that behaves in a browser falls apart there: flexbox does nothing, margins collapse unpredictably, and background images are ignored outright.
These emails are built on tables with conditional comments for Outlook, and they were checked in real clients rather than in an email service’s preview pane — which renders them very differently from the actual inbox.
What “partial” means in the table
Gmail on iOS and Android honours the dark theme by inverting colours itself rather than
reading prefers-color-scheme. The result is readable and contrasty, but it is Gmail’s
inversion, not the palette in the source. Nothing breaks; it simply is not identical.
What you will need to replace
Merge tags use the common {{variable}} syntax — {{first_name}}, {{cta_url}},
{{unsubscribe_url}}. Most providers accept it directly. The sender name, address block
and unsubscribe link are placeholders and must be replaced: an unsubscribe link is a legal
requirement in most markets.
What's in the archive
- src/*.mjml · 3 files
- src/_theme.mjml · shared styling
- dist/*.html · compiled
- index.html · preview page
- README.md
- LICENCE.txt
Version history
- 1.0.0 2026-09-10
First release
- 12 KBheaviest email
- 19MSO conditionals
- 0flex or grid rules
- 9clients targeted