Waarom je e-mail op Outlook breekt (en hoe je het oplost)

Outlook breekt e-mails omdat Outlook 2016/2019 (en 365 voor Windows, tot 2024) Microsoft Word gebruikt als rendering-engine in plaats van een browser. Word ondersteunt geen moderne CSS, geen flexbox, geen background-images via CSS, en geen webfonts. De oplossing: tabel-gebaseerde layouts, inline CSS, mso-conditionals voor Outlook-specifieke fallbacks, en bulletproof buttons. Sinds 2024 gebruikt Outlook 365 voor Windows wel een moderne engine — maar je grootste zakelijke doelgroep zit vaak nog op Outlook 2016/2019.

Waarom Outlook anders is dan elke andere e-mailclient

Gmail, Apple Mail, iOS Mail, Outlook.com en Yahoo Mail gebruiken allemaal een browser-engine (WebKit, Chrome of vergelijkbaar) om e-mails te renderen. Outlook desktop voor Windows gebruikt echter Microsoft Word's rendering engine — dezelfde die in Office Word zit. Word is gemaakt voor documenten, niet voor moderne HTML/CSS.

Gevolg: ~30% van CSS-properties werkt niet of werkt anders. Background-images, flexbox, gradients, animaties, webfonts, custom-spacing via margin — allemaal beperkt of compleet stuk. Voor zakelijke verzendlijsten in Nederland zit nog steeds 20-40% op Outlook desktop, dus je móét hiermee rekening houden.

De 5 meest voorkomende Outlook-problemen

1. Gebroken layout door margin/padding. Outlook ignoreert vaak margin op block-elementen. Oplossing: gebruik tabel-cellen met cellpadding/cellspacing, of expliciete tabel-rijen voor spacing.
2. Buttons als blauwe gestreepte links. Outlook negeert background-color op links zonder mso-fallback. Oplossing: bulletproof buttons met VML voor Outlook + reguliere HTML voor de rest.
3. Webfonts vallen terug naar Times New Roman. Outlook ondersteunt geen Google Fonts. Oplossing: kies een goede system-font fallback (Arial, Helvetica, Segoe UI) en accepteer dat Outlook-lezers een andere typografie krijgen.
4. Background-images verdwijnen. CSS background-image werkt niet in Outlook. Oplossing: VML-fallback met <v:rect> voor hero-banners.
5. Buttons of CTA's verschuiven 100px naar rechts. Klassiek Outlook-bug. Oplossing: zet mso-table-lspace: 0pt; mso-table-rspace: 0pt; op je tabellen.

Wat je vandaag kunt fixen

Drie concrete acties die je deze week kunt doen aan een bestaande HubSpot-template:

Test in Email on Acid of Litmus. Beide tools geven screenshots in 80+ clients incl. Outlook 2016, 2019 en 365. ~$99/maand voor Litmus, $74/maand voor Email on Acid. Eén bug vinden bespaart je een no-show-campagne.
Vervang alle <button>-tags door bulletproof button-code. Een online-generator (buttons.cm) maakt de code in 1 minuut. Plak dat in je CTA-modules.
Voeg een Outlook-mso-reset toe. Bovenaan je <head>: . Lost in één regel veel layout-shift op.

Veelgemaakte fouten

Alleen testen in Gmail of Apple Mail. Beide werken nagenoeg perfect met moderne CSS — geeft een vals gevoel van zekerheid.
Outlook negeren omdat "niemand het meer gebruikt". Onwaar voor B2B in Nederland. Office 365 desktop is in zakelijke omgevingen nog dominant.
Webfonts dwingend opleggen. Doe het niet — accepteer dat Outlook een fallback-font toont. Forceren breekt vaak meer dan het oplost.
Background-images zonder VML-fallback gebruiken. Je hero met "boodschap-op-foto" wordt in Outlook gewoon witte tekst op witte achtergrond.

Veelgestelde vragen

Werkt Outlook 365 voor Mac hetzelfde als Windows?

Nee. Outlook voor Mac gebruikt WebKit-based rendering, vergelijkbaar met Apple Mail. Moderne CSS werkt grotendeels. Het rendering-probleem speelt vooral bij Outlook desktop voor Windows (2016/2019) en Outlook 365 voor Windows tot juli 2024.

Sinds wanneer is Outlook 365 op Windows verbeterd?

Microsoft rolt sinds 2024 een Chromium-based rendering engine uit voor de nieuwe Outlook 365 voor Windows. Maar veel zakelijke organisaties draaien nog Outlook 2019 of 2016 (perpetual licenses), waar Word de engine blijft.

Hoe weet ik welke Outlook-versie mijn lezers gebruiken?

Litmus en Email on Acid hebben analytics die de client-distributie van je verzending tonen. Verwacht ergens tussen de 20-40% Outlook voor B2B-Nederland, afhankelijk van je doelgroep.

Kan HubSpot bulletproof buttons automatisch genereren?

De drag-and-drop button-module van HubSpot doet dit voor 80% goed, maar in mijn ervaring sneuvelen complexe varianten (icon naast tekst, custom borders) in Outlook. Voor robuuste resultaten: bouw je button als een custom HUBL-module met VML-fallback erin.

Wat als ik dark mode op Outlook gebruik?

Outlook ondersteunt dark mode sinds 2020, maar de implementatie verschilt per versie. Test expliciet — Outlook past soms kleur-inverse toe op je hele e-mail, soms alleen op witte achtergronden.

Is het de moeite waard om Outlook-specifieke versies te bouwen?

Vrijwel nooit. Een goed gebouwde template die op alle clients "goed genoeg" werkt, is altijd beter dan twee versies onderhouden. Mik op een single template met mso-fallbacks waar nodig.

Klaar om te beginnen?

Lees onze aanpak voor een HubSpot e-mail template laten bouwen, of plan een korte kennismaking — we kijken vrijblijvend mee en geven een eerlijke inschatting van scope, kosten en doorlooptijd.