Why this matters before you Send#
Every email client renders HTML with its own engine, with its own quirks. The same campaign that looks pristine in Gmail web can have collapsed columns in Outlook 2016, an inverted logo in Apple Mail dark mode, and stripped link styling in Yahoo. You don't need to memorize every quirk — you need a verification routine that catches breakage before the campaign launches.
This article walks the three checks AcelleMail's UI surfaces for you.
Check 1: AcelleMail's built-in Preview#
Open any campaign → Preview button. The Preview pane renders the email with AcelleMail's own engine and your merge-tag substitutions:
Toggle to mobile:
What Preview tells you:
- Layout integrity at 600px desktop and 320px mobile
- Merge-tag computed values using a sample subscriber from the list
- Image loading at the URLs you've used (won't catch hotlink-block at the recipient's firewall, but catches dead public URLs)
What Preview can NOT tell you:
- How Outlook 2016 desktop renders this specific HTML (different engine entirely — Word's rendering engine)
- How Apple Mail's dark mode inverts your colors
- How Gmail's clipping behaviour ("[Message clipped]") behaves at 102KB
For those, use Check 2 + 3.
Check 2: Send-test to real client accounts#
Every campaign settings panel has a Send test button. Send to addresses you control across multiple clients:
- One Gmail address (open in browser AND in the Gmail mobile app)
- One Outlook.com address (open in browser AND in the Windows Outlook app if available)
- One iCloud/Apple Mail address (open on iPhone or in macOS Mail with dark mode toggled)
- One Yahoo address (browser)
Take ~5 minutes to open each one. Note what's different from what Preview showed. The most common surprises:
| Client |
Common surprise |
Fix |
| Outlook desktop (2007-2019) |
Multi-column blocks collapse to single column; rounded corners drop; some shadows missing |
Use tables for layout (AcelleMail builder does this); accept that some visual polish drops in Outlook |
| Gmail mobile app |
<style> blocks in <head> removed |
AcelleMail inlines critical styles automatically — for hand-coded HTML, run an inliner |
| Apple Mail iOS dark mode |
Logo on transparent background inverts to white-on-dark, looks broken |
Use solid-background PNG, or version-specific <picture> with dark-mode variant |
| Gmail web (long emails) |
"Message clipped" cut-off above ~102KB |
Keep total HTML under 100KB; reduce inline image data-URIs |
| Yahoo Mail |
Some <style> rules silently stripped |
Inline styles on every block (AcelleMail builder defaults to this) |
Check 3: A/B test the riskiest variant#
If you're launching a campaign with a layout you're unsure about (new template, heavy redesign), use AcelleMail's A/B testing to ship the conservative version to 80% and the experimental version to 20% — verify engagement metrics across both before committing:
For purely-visual A/B (vs. subject-line A/B), the open rate won't differ — but the click-through rate will, and that's the signal you want. If the experimental variant has materially lower CTR, the rendering broke in some client and recipients couldn't or didn't engage.
The post-send A/B report shows the delta:
Common UI patterns that survive everywhere#
| Goal |
Survives-everywhere pattern |
| Two columns of content |
Use AcelleMail's 2-col block — auto-stacks on mobile |
| Rounded buttons |
Solid-color rectangular buttons; rounded shows in most, not Outlook desktop — acceptable degrade |
| Custom font |
System font stack fallback first; web font second — font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif |
| Dark-mode safe logo |
Solid-background PNG, OR <picture> with prefers-color-scheme source |
| Bold callout box |
Background-color on a table cell with padding; works everywhere |
| Embedded video |
Use a video poster image + linked play button → goes to a landing page (NEVER embed HTML5 <video> in email — only ~30% of clients render it) |
Common UI signals + fixes#
| Symptom from test send |
Likely cause |
UI fix in AcelleMail |
| Columns side-by-side on mobile (Outlook iOS) |
Hard-coded fixed widths in HTML |
Use the builder's 2-col block (responsive by default) — don't paste raw HTML with width="300" columns |
| Plain text version reads " Click here" garbage |
Auto-extracted from HTML, no manual plain-text |
Builder → toggle Plain text version → write a real plain version |
| Email is clipped in Gmail |
Total HTML > 102KB |
Builder → check size in Code view footer; reduce inline images (host externally) |
| Logo background turns navy in dark mode |
Transparent PNG against light bg |
Re-export PNG with solid white background |
| Some recipients see broken layout, others fine |
Multiple Outlook versions render differently |
Test send to an Outlook 2016 + Outlook 365 web — confirm both; if 2016 breaks but 365 is fine, accept the degrade (declining install base) |
| Tracking pixel doesn't fire |
Recipient client blocks images (common in corporate) |
Open rate underreports; focus on click-rate as the real engagement signal |
Advanced: rendering engines, MSO conditional comments, CSS support matrix
The reason email rendering varies so much is that every major client uses a different engine:
| Client |
Rendering engine |
Notable quirks |
| Apple Mail (macOS / iOS) |
WebKit |
Best CSS support, full dark mode inversion |
| Gmail web |
WebKit-based Blink + Gmail rewriter |
Strips <style> in <head> if size > limit; removes position; rewrites image URLs through googleusercontent CDN |
| Gmail mobile app |
Same engine, stricter rewriting |
Often inlines <style> differently than web |
| Outlook desktop 2007-2019 |
Microsoft Word's rendering engine |
No CSS3, no border-radius, no background-image on most elements |
| Outlook 365 web / desktop new |
Edge / Chromium |
Modern, similar to web rendering |
| Outlook.com web |
Webkit + Microsoft rewriter |
Modern, with quirks |
| Yahoo Mail |
Custom Yahoo engine |
Strips some <style> rules silently |
MSO conditional comments target Outlook desktop specifically:
<!--[if mso]>
<table role="presentation" width="600" cellpadding="0" cellspacing="0">
<tr><td>
<![endif]-->
<!-- Modern clients render this; Outlook desktop renders the MSO block above + below -->
<div style="max-width: 600px;">Your content</div>
<!--[if mso]>
</td></tr>
</table>
<![endif]-->
This pattern wraps modern responsive markup with Outlook-only table fallback. The AcelleMail builder generates this pattern automatically for column blocks.
CSS property support matrix (from caniemail.com, summarized):
| Property |
Apple Mail |
Gmail web |
Gmail iOS |
Outlook desktop |
Yahoo |
display: flex |
✅ |
✅ |
Partial |
❌ |
Partial |
border-radius |
✅ |
✅ |
✅ |
❌ |
✅ |
box-shadow |
✅ |
✅ |
✅ |
❌ |
✅ |
background-image (on body) |
✅ |
✅ |
✅ |
Partial |
Partial |
@media queries |
✅ |
✅ |
✅ |
❌ (uses MSO) |
✅ |
prefers-color-scheme (dark mode) |
✅ |
Limited |
✅ |
❌ |
❌ |
| Web fonts |
✅ |
✅ |
✅ |
❌ |
Limited |
Litmus / Email on Acid for paid client testing. Both offer:
- 90+ real client/device screenshots in 30-60 seconds
- Spam filter testing across Gmail/Outlook/Yahoo
- Code analyzer flagging known anti-patterns
- API + Slack integration for CI
For high-volume senders the cost (~$80-$200/month) typically pays back within one campaign — catching a layout break across 100k recipients before send saves more than the subscription.
MJML compiler outputs Outlook-safe HTML automatically. If you're maintaining a hand-coded email template library, switching to MJML eliminates ~80% of cross-client breakage:
mjml my-template.mjml -o compiled.html
# compiled.html is ready for AcelleMail Source mode
ESP-side rendering — AcelleMail's PHP send pipeline doesn't transform your HTML beyond merge-tag substitution + DKIM signing. The HTML that arrives at the receiver is the HTML you authored. Any rendering surprise is the receiving client's engine, not AcelleMail's transmission.
Related articles#
