Een HTML-template voor je e-mailnieuwsbrief

Een e-mail in platte tekst werkt voor een kort berichtje, maar een nieuwsbrief, een aanbieding of een welkomstmail heeft meestal meer nodig: je logo, een afbeelding, een duidelijke knop. Dat is een HTML-e-mail. Hij lijkt op een kleine webpagina, maar wordt volgens heel andere regels gebouwd, omdat e-mailprogramma's veel strenger zijn dan browsers. Dit hoort in een goede template en zo bereid je er een voor.

Waarom een e-mail geen webpagina is

Gmail, Outlook, Apple Mail en apps op de telefoon tonen HTML elk net iets anders, en veel ervan negeren moderne webcode. Daarom worden e-mails op de ouderwetse manier gebouwd:

• Tabellen voor de opmaak, geen moderne weblay-outs.
• Stijlen op elk element zelf, omdat veel programma's stijlblokken verwijderen.
• Systeemlettertypen, want eigen weblettertypen laden vaak niet.
• Geen scripts, formulieren of video. E-mailprogramma's voeren die niet uit. Gebruik in plaats daarvan een afbeelding of een knop die naar je video of formulier leidt.

De onderdelen van een goede e-mail

• Voorvertoningsregel: de korte tekst naast de onderwerpregel in de inbox. Het is je tweede onderwerpregel, dus verspil hem niet aan "Bekijk in browser".
• Header: je logo, klein en gelinkt naar je site.
• Kop en hoofdafbeelding: in één oogopslag waar de e-mail over gaat.
• Korte tekst: hooguit twee of drie alinea's.
• Eén hoofdknop: "Bekijk de collectie", "Reserveer een tafel". Een knop die als link is gemaakt, werkt overal.
• Footer: bedrijfsnaam, adres, contactgegevens en de afmeldlink.

Breedte en telefoons

De standaardbreedte is ongeveer 600 pixels; dat past op een computerscherm en in het leesvenster van de meeste programma's. Op een telefoon moet de opmaak overgaan in één kolom, met tekst die groot genoeg is om te lezen en knoppen die groot genoeg zijn om op te tikken. Meer dan de helft van de e-mails wordt op een telefoon geopend, dus controleer eerst de telefoonversie.

Afbeeldingen en alt-tekst

Sommige programma's blokkeren afbeeldingen totdat de lezer ze toestaat. Schrijf een alt-tekst voor elke afbeelding, zodat de e-mail ook zonder afbeeldingen te begrijpen is, en zet belangrijke tekst nooit alleen in een afbeelding. Gebruik alleen afbeeldingen waarvoor je de rechten hebt. Afbeeldingen worden geüpload naar je mailingdienst of je site, en de e-mail verwijst naar hun adressen.

De afmeldlink

Mailingdiensten en de regels in veel landen vereisen in elke marketingmail een eenvoudige manier om je af te melden. Templates bevatten meestal een plaatshouder die je vervangt door de afmeldlink of -tag van je eigen dienst.

Zo bereid je de inhoud voor

• Waar de e-mail over gaat en wie hem krijgt.
• De feiten: prijzen, datums, kortingscodes, precies zoals ze zijn.
• Waar elke knop naartoe leidt: volledige paginaadressen.
• Gegevens voor de footer precies zoals ze moeten verschijnen.
• Kleuren en stijl, of een e-mail die je mooi vindt als voorbeeld.

Test voor verzending

Stuur de e-mail naar jezelf in Gmail, in Outlook en op een telefoon. Klik op elke link en knop, controleer de voorvertoningsregel en bekijk de e-mail met afbeeldingen uitgeschakeld.

Kort samengevat

Een goede HTML-e-mail gebruikt tabellen en inline stijlen, is ongeveer 600 pixels breed, wordt op een telefoon één kolom en heeft één duidelijke knop en een nette footer. Bouw je hem liever niet zelf, bestel dan een HTML-e-mail: je beschrijft de e-mail, het aanbod en waar de knoppen naartoe leiden, en krijgt een archief met de kant-en-klare HTML en de afbeeldingen die ervoor zijn getekend, om te importeren in Mailchimp, Brevo of een andere mailingdienst. De betaling wordt pas vrijgegeven nadat je het werk hebt goedgekeurd.