Email-clients en hun rendering-eigenaardigheden

Geen twee mailclients renderen HTML hetzelfde. Hier de meestvoorkomende gotchas.

Outlook desktop (Windows)

• Gebruikt Word's rendering engine (niet een browser-engine)
• Strippt CSS3-features (flexbox, grid, custom properties)
• Voegt automatisch witregels toe rond tabellen
• Blokkeert remote images standaard

Hoe MailManagers compenseert: tabel-gebaseerde layout, inline CSS, fallback-attributen op elk element.

Outlook web / 365

• Veel beter dan desktop — gebruikt een echte browser-engine
• Wel: forceert eigen font-stack soms
• Image-blocking optioneel (gebruiker beslist)

Apple Mail (macOS / iOS)

• Renderert HTML correct, dichtst bij browser-output
• Wel: schaalt afbeeldingen automatisch op Retina-displays — gebruik daarom 2× resolutie images voor logo's
• Op iOS: de "voorvertoning" toont vaak weinig, eerst openen voor volledige layout

Gmail (web / mobile)

• Goede HTML-ondersteuning
• Wel: knipt mails af na 102 KB ("Bekijk volledig bericht"-link). Hou je handtekening compact.
• Removes <style> tags — daarom inline CSS noodzakelijk

Algemene best practices in MailManagers

• Houd je handtekening onder 20 KB
• Gebruik veilige web-fonts (geen Google Fonts of custom fonts)
• Test in minstens 2 mailclients voor je hem op je domein gebruikt

Tools om te testen

• Litmus of Email on Acid voor professionele cross-client tests
• Mail-tester.com voor spam-score
• Of gewoon: stuur een testmail naar jezelf via verschillende clients