HTML-mail maken met AI: zo werkt hij ook in Outlook

Een HTML-mail maken met AI kost een paar minuten: ChatGPT, Claude of de AI-functie van je mailtool schrijft de code, en in je browser ziet het er prima uit. Maar mailprogramma's zijn geen browsers. Het klassieke Outlook voor Windows, donkere modus, geblokkeerde afbeeldingen en schermlezers maken van nette AI-code vaak een rommelige mail. Geef AI de regels van e-mailcode mee, test elke mail in de programma's van je lezers en kies voor een gewone nieuwsbrief liever een template in de editor.

Waarom AI-HTML in je browser werkt en in je inbox niet

Vraag ChatGPT of Claude om een nieuwsbrief in HTML en je krijgt binnen een minuut iets wat er goed uitziet. Open je het bestand in je browser, dan staat alles netjes. Het probleem begint pas als die code in een mailprogramma terechtkomt.

Taalmodellen hebben vooral geleerd van websitecode. Die gebruikt technieken als flexbox, grid, losse blokken met marges, webfonts en soms JavaScript. Browsers ondersteunen dat allemaal. Mailprogramma's hebben elk hun eigen regels, en een deel daarvan loopt jaren achter:

• Het klassieke Outlook voor Windows bouwt HTML-mail op met de weergave van Microsoft Word. Flexbox en grid werken daar niet, achtergrondafbeeldingen vaak ook niet, en marges rond blokken worden genegeerd of anders getoond.
• Het nieuwe Outlook voor Windows is volgens Microsoft gebaseerd op Outlook op het web en gedraagt zich meer als een browser. Er bestaan dus twee Outlooks voor Windows naast elkaar, en op veel zakelijke computers draait nog het klassieke.
• Gmail ondersteunt een deel van de opmaak, haalt andere delen weg en knipt mails af waarvan de code te groot is, in de praktijk rond de 102 kB.
• Apple Mail is het meest ruimhartig, maar heeft weer een eigen manier van omgaan met donkere modus.

Een website laten maken door AI heeft andere valkuilen: daar gaat het om vindbaarheid, snelheid en of je de site kunt meenemen. Dat lees je in website laten maken door AI. Bij e-mailcode is de vraag simpeler en strenger: ziet je mail er bij elke lezer goed uit?

Wat AI goed doet, en waar jij nodig bent

AI is een snelle bouwer van e-mailcode, mits je de regels meegeeft. Het testen in echte mailprogramma's kan hij niet voor je doen.

Zo vraag je AI om e-mailcode die werkt

Het verschil tussen bruikbare en onbruikbare AI-code zit grotendeels in de prompt. Zet de regels van e-mailcode er expliciet in:

Maak een HTML-nieuwsbrief die werkt in het klassieke Outlook voor Windows, Gmail en Apple Mail. Regels: opbouw met tabellen met role="presentation", geen flexbox, grid of position. Maximale breedte 600 pixels, op mobiel één kolom. Zet alle CSS inline in de elementen; gebruik een style-blok alleen voor media queries. Geen JavaScript, geen formulieren en geen video. Lettertype Arial met Helvetica en sans-serif als terugval. Knoppen als gekleurde tabelcel met een tekstlink, niet als afbeelding. Elke afbeelding krijgt een breedte, een hoogte en een alt-tekst; decoratieve afbeeldingen een lege alt. Zet lang="nl" op het html-element. Geef elk tekstblok een eigen achtergrondkleur. Voeg een verborgen preheader toe. Gebruik {{AFMELDLINK}} en {{WEBVERSIE}} als plaatshouders. Houd de code zo compact mogelijk.

Zet daaronder je inhoud: de tekst, de links, je kleuren en het adres van je logo. De tekst schrijf je bij voorkeur eerst los. Hoe je dat doet zonder dat hij klinkt als die van iedereen, lees je in nieuwsbrief maken met AI.

Laat de AI daarna zijn eigen werk nalezen:

Controleer de code op de regels hierboven. Noem elke plek waar je ervan afwijkt en pas het aan. Hoeveel kB is de code ongeveer?

De plaatshouders vervang je in je mailtool door de juiste variabelen. Elke mailtool heeft een eigen code voor de afmeldlink, en een afmeldlink is in elke marketingmail verplicht. Laat AI die code niet raden: zoek hem op in de hulppagina's van je eigen tool.

De AI-functie van MailerLite: een HTML-mail uit een beschrijving

MailerLite heeft er een eigen functie voor, met een bèta-label: AI-generated HTML emails. Volgens het helpartikel van MailerLite zit die in de abonnementen Comfort en Power, niet in het gratis abonnement (stand oktober 2026). Je vindt hem in de Custom HTML editor: je maakt daar een nieuwe campagne aan en kiest Generate email. Je beschrijft in gewone taal wat je wilt, of laat de AI-agent een bestaande code aanpassen, en verfijnt het resultaat met vervolgopdrachten.

Drie dingen om te weten:

• Vraag om Nederlands. Ga er niet van uit dat de tekst vanzelf in het Nederlands komt, en zet het in je opdracht.
• Niet alles kan. Quizzen, afteltimers, socialfeeds en enquêtes ondersteunt de agent nog niet.
• Het is een begin. MailerLite raadt zelf aan om het resultaat als startpunt te zien, niet als kant-en-klare campagne.

Het voordeel boven een losse chat: de code komt direct in je mailtool terecht. De testronde hieronder blijft precies hetzelfde. Wat de andere AI-functies van MailerLite doen, staat in MailerLite AI.

De testronde voordat de mail naar je lijst gaat

Dit is het deel dat een mens doet. Bij een nieuwe opmaak ben je er al snel een uur mee bezig. Gebruik je dezelfde opmaak daarna als vaste template, dan gaat het elke volgende keer sneller.

In je mailtool

• Bekijk het voorbeeld op desktop en mobiel.
• Klik elke link aan. Controleer of je UTM-tags erop staan, zodat je in GA4 ziet wat de mail opleverde.
• Controleer de afmeldlink, de link naar de webversie en de preheader.
• Kijk in je rapporten welke mailprogramma's je lezers het meest gebruiken. Daar test je als eerste op.

Testmails naar echte programma's

Stuur testmails naar adressen in die programma's. Voor de meeste Nederlandse lijsten zijn dat Gmail in de browser en in de app, Apple Mail op een iPhone, Outlook.com en het klassieke Outlook op een Windows-computer. Heb je zelf geen Windows-computer met het klassieke Outlook, vraag dan een collega of een vaste klant om mee te kijken. Verstuur je regelmatig eigen HTML, dan laten betaalde tools zoals Litmus of Email on Acid in één keer zien hoe je mail er in tientallen programma's uitziet.

Donkere modus

Zet je telefoon in donkere modus en bekijk de mail opnieuw. Let op je logo: een zwart logo op een doorzichtige achtergrond verdwijnt op een donkere achtergrond. Let ook op tekst die zijn kleur behoudt terwijl de achtergrond omdraait, en op knoppen en randen die wegvallen.

Afbeeldingen uit

In Outlook worden afbeeldingen van onbekende afzenders vaak niet automatisch geladen. Zet afbeeldingen uit en lees je mail opnieuw. Snap je nog wat de boodschap is en waar je moet klikken? Staat er belangrijke tekst in een afbeelding, zet die dan in de tekst.

Schermlezer

Laat je mail voorlezen met VoiceOver op een iPhone of Verteller in Windows. Wordt de mail in een logische volgorde voorgelezen? Leest de schermlezer de opmaaktabellen voor als gegevenstabel, dan mist er role="presentation". Zeggen de alt-teksten iets, of hoor je bestandsnamen?

Grootte en bezorging

Controleer de grootte van je code. Een mail die in Gmail wordt afgeknipt, verliest vaak zijn afmeldlink onderaan. Stuur ook nooit een mail die uit één grote afbeelding bestaat: schermlezers kunnen er niets mee, en spamfilters vertrouwen het minder. Hoe je verder zorgt dat je mail in de inbox komt, lees je in nieuwsbrief komt in spam.

Veelgemaakte fouten in AI-code voor e-mail

Dit zie je het vaakst terug in AI-code die niet met de regels hierboven is gemaakt:

• Flexbox of grid voor kolommen. In het klassieke Outlook staan de kolommen dan onder elkaar of door elkaar.
• Tekst op een achtergrondafbeelding. Outlook toont de afbeelding niet, en dan staat er witte tekst op een witte achtergrond.
• Knoppen als afbeelding. Met afbeeldingen uit is er geen knop meer, en een schermlezer weet niet wat hij moet voorlezen.
• Webfonts zonder terugval. Waar het lettertype niet laadt, kiest het mailprogramma zelf, vaak Times New Roman.
• Opmaak alleen in een style-blok. Niet elk mailprogramma leest dat blok in elke situatie. Inline opmaak is veiliger.
• Lege of nietszeggende alt-teksten. 'afbeelding1.png' helpt niemand.
• Te veel code. Dezelfde opmaak bij elk element herhalen maakt je mail onnodig groot.

Wanneer een gewoon template in de editor slimmer is

Eerlijk advies: voor de meeste nieuwsbrieven heb je geen eigen HTML nodig. De drag-and-drop-editors van MailerLite en ActiveCampaign maken code die is gebouwd om in de gangbare mailprogramma's te werken, ook in het klassieke Outlook. Een testmail blijft verstandig, maar de kans op verrassingen is veel kleiner. Je collega's kunnen de tekst aanpassen zonder code aan te raken, en je mail ziet er elke keer hetzelfde uit. In hoe vaak een nieuwsbrief versturen raad ik daarom een vaste template in je mailtool aan.

Eigen HTML met AI is zinvol als:

• je een ontwerp wilt dat de editor niet kan maken, en je het daarna als vaste template hergebruikt;
• een ontwikkelaar de template beheert en elke wijziging test;
• het om een eenmalige campagne gaat waar je de tijd voor de testronde echt voor neemt.

Een tussenweg werkt vaak het best: laat AI de tekst, de opbouw en de knopteksten maken, en zet de mail daarna in elkaar in de editor van je mailtool. Dan krijg je de snelheid van AI en de geteste code van de editor.

Conclusie: AI bouwt, jij test

Een HTML-mail maken met AI gaat snel, maar een mailprogramma is geen browser. Geef de AI de regels van e-mailcode mee: tabellen, inline opmaak, 600 pixels, tekstknoppen en alt-teksten. Test daarna elke nieuwe opmaak in het klassieke Outlook, Gmail en Apple Mail, in donkere modus, met afbeeldingen uit en met een schermlezer. En kies voor een gewone nieuwsbrief liever een template in de editor.

Kies je nog een mailtool voor je webshop, lees dan Klaviyo vs MailerLite: beide hebben een editor met templates, en de verschillen zitten vooral in prijs en flows. Wil je weten wat het kost als ik je e-mailmarketing inricht, met templates die in elk mailprogramma werken? Download de prijslijst.