HTML die werkt in je e-mail template
Een mooi opgemaakte e-mail is tegenwoordig vanzelfsprekend. Terecht, want we zijn verwend en eisen het beste. Toch is het voor veel marketeers onduidelijk hoe je ervoor zorgt dat de e-mail ook goed overkomt in alle e-mailprogramma’s. Een e-mail kan in verschillende inboxen net op een andere manier verschijnen. Goed gebruik van HTML is een voorwaarde om deze vervorming de baas te zijn en een hoogstaande e-mail HTML template te maken.
In dit artikel neem ik je mee in de wereld van technische details die bepalen of je e-mail beter of juist slechter leesbaar is.
HTML voor e-mail wijkt sterk af van html voor webpagina’s
Hier schuilt de essentie van het probleem. In e-mail maken we gebruik van technieken van 10 jaar geleden. We hebben namelijk te maken met e-mail programma’s die nieuwe HTML-standaards niet ondersteunen. Dat betekent dat pagina’s c.q. html-code die wel in je webbrowser werken, niet goed weergeven in e-mail.
Het is daarnaast niet gemakkelijk om een goede e-mail template te ontwikkelen. Hoewel een e-mail template simpele html bevat, zijn er drie strenge voorwaarden waar een geslaagde e-mail template aan moet voldoen:
- Uitstraling: Moet er mooi uitzien
- Portabiliteit: Door zoveel mogelijk e-mail programma’s goed worden weergegeven
- Afleverbaarheid: Niet blijven hangen in spamfilters
Om hieraan te voldoen moet een html-programmeur een grote balanceer act uitvoeren. Hij moet de balans zoeken tussen uitstraling, portabiliteit en afleverbaarheid.
Maar hoe toets je of een html template ontwikkelaar wel geschikt is om een echte e-mail template te ontwikkelen? Een goede test is door te vragen of hij 10 verschillen kan noemen tussen html voor een (internet)browser en e-mail html. Kan hij dat niet top-of-mind, dan weet je bijna zeker dat je een deel van je lezers verliest. De e-mail zal immers vervormd of helemaal niet doorkomen.
HTML-code voor e-mail handmatig opbouwen
Bouwers van e-mail templates zijn tabel-kunstenaars. Kunstenaars die op bijna ambachtelijke wijze de html-code opbouwen. Ze weten maar al te goed dat ze slechts een beperkte set html-tags kunnen gebruiken. De term die wij voor deze manier van bouwen gebruiken is “defensief”. De defensieve HTML zorgt ervoor dat zoveel mogelijk e-mailprogramma’s (e-mail cliënts) de boodschap goed weergeven.
Soms lijkt het of we 8-10 jaar terug zijn in de tijd. CSS kun je alleen zeer beperkt gebruiken. Selectors en cascading stylesheets zijn in principe uit den boze. De HTML die je mag gebruiken is echter niet moeilijk. Je hoeft geen zwaargewicht HTML programmeur te zijn om een complexe template te maken.
Precisie en geduld zijn de belangrijkste eigenschappen. Precisie, omdat kleine foutjes grote consequenties kunnen hebben en geduld, omdat je veel moet testen. Luie web-programmeurs die graag met Dreamweaver of andere HTML-editors werken zijn kansloos. Moderne webpagina’s zijn tabelloos en daarmee onbruikbaar voor e-mail. Op zich zijn tools als Dreamweaver prima bruikbaar, mits je een goede tabel-structuur inbouwt.
De belangrijkste knelpunten bij HTML e-mail ontwikkelen
De belangrijkste en meest voorkomende knelpunten die opspelen bij het ontwikkelen van HTML voor e-mail zijn:
IMG-TAG voor plaatjes aangepast
In e-mail is het plaatjes-uit fenomeen een belangrijk aandachtspunt. Niet alleen omdat je in je design er rekening mee moet houden dat je ontvanger de plaatjes uit heeft staan, maar ook omdat je beter altijd de alt-tag moet invullen. Zet borders dan ook altijd op nul en gebruik geen .png plaatjes in e-mail. Google, Outlook.com en Hotmail laten e-mail plaatjes verspringen als er geen block-element aan wordt toegevoegd. Zoals bekend houden designers ervan om afbeeldingen achter een tekst te plaatsen. Helaas werkt dit niet in e-mail. Background images worden door Outlook 2007 en 2010 niet ondersteund.
Inline-styles lossen de meeste problemen met opmaak op
Lettertype, grootte en line-spacing zijn goed te sturen. Zoals gezegd, niet met CSS, maar met inline-styles zijn de meeste attributen in te zetten. Jammer genoeg zijn niet alle eigenschappen te gebruiken. Veel positioning elementen weigeren in verschillende e-mail clients. Float en clear moet je al helemaal niet willen gebruiken. Gelukkig zijn er goede lijstjes waarop overzichtelijk staat welke elementen wel werken met inline-styles.
Voor mobiel gebruik toch CSS in je e-mail template
Met name voor iPhone en iPad kun je “responsive” design goed toepassen via CSS. Het geeft je de mogelijkheid te spelen met tabel-kolommen die je automatisch onder elkaar, in plaats van naast elkaar laat tonen. Je kunt letters en plaatjes naar keuze groter c.q. kleiner weergeven of zelfs weglaten in de mobiele versie. Video in e-mail is nog lastig. Voor de moderne mobiele platformen gaat het al heel goed, maar bijvoorbeeld Outlook wil nog niet meewerken.
Conclusie: html maken voor e-mail template is een vak
Zoals voor veel dingen geldt: als je het goed wilt doen is enig vakmanschap vereist. Je hebt geen wetenschappelijke opleiding nodig, maar je moet wel leren dat er beperkingen zijn. Wanneer je bedreven raakt met HTML e-mail bouwen dan kom je tot een defensieve HTML die in de inboxen aankomt zoals jij dat voor ogen hebt. Ervaring helpt om een goede keuze te maken tussen uitstraling, portabiliteit en afleverbaarheid.
Hoe zorg jij dat je e-mailings altijd goed leesbaar zijn bij jouw doelgroep? Waar vind jij dat de balans moet liggen tussen defensief en een goed design? Laat het me weten door een reactie achter te laten.
Blijf op de hoogte van de laatste updates voor e-mailmarketing en ontvang uitnodigingen voor seminars en webinars in je mailbox. Schrijf je in voor onze nieuwsbrief!
Een extra check van een e-mail expert is altijd fijn voordat je op de verzendknop drukt. Laat je e-mailcampagne vrijblijvend beoordelen.
Deel dit bericht
