Opmaak nieuwsbrief tips - HTML email nieuwsbrieven

In dit artkel gaan we verder in op de opmaak van nieuwsbrieven. Handige tips voor de opmaak van HTML email nieuwsbrieven op het gebied van de codering en wat wel te doen en wat niet te doen om uw email campagne tot een succes te maken.

HTML codering voor email nieuwsbrieven is veel gecompliceerder dan voor websites. Waar voor het internet gecodeerd wordt voor bijvoorbeeld Internet Explorer, Mozilla, Firefox etc. wordt voor email gebruikt gemaakt van talloze email clients (Outlook, Gmail, Hotmail, Horde, Squirrel etc.) die op hun beurt de HTML code weer op hun eigen manier rendert. Alleen al de manier van rendering in Outlook 2002 ten opzichte van Outlook 2007 en Outlook 2010 (bèta versie) is ingrijpend gewijzigd.

HTML email nieuwsbrieven, Outlook 2007 & Outlook 2010

Vóór Outlook 2007 maakte Outlook gebruik van IE om te renderen. Vanaf Outlook 2007 wordt gebruik gemaakt van de beperkte HTML support van Word 2007. Het gebruik van bijvoorbeeld background images in HTML email nieuwsbrieven behoren sindsdien tot het verleden. De nieuwe Outlook 2010 kampt met dezelfde beperkingen, althans in de bèta versie. Verbeteringen echter hoeven we niet te verwachten.

Voorbeelden email clients

Desktop email clients: Apple Mail, Lotus Notes, Microsoft Outlook, Outlook Express, Thunderbird
Web-based email clients: AOL Mail, Gmail, live Hotmail, Mail.com, Mobile Me, Yahoo! Mail, horde, Squirell

Tips voor een goede opmaak van nieuwsbrieven

Correcte HTML zorgt voor een attractief en bruikbaar bericht dat een hogere conversierate oplevert dan "gewone" tekstberichten. Slecht gecodeerde HTML levert onleesbare en niet correct functionerendenieuwsbrieven op, en erger nog, ertoe kan leiden dat uwnieuwsbrief door email blocks en filters als spamworden geïnterpreteerd met alle gevolgen van dien.

Met die gedachte volgen hier enkele algemene HTML codering tips voor email nieuwsbrieven:

Codeer HTML emailnieuwsbrievennet als een webpagina met de basis <HTML>, <HEAD>, <TITLE>, en <BODY> tags
Zorg ervoor dat alle tags de juiste closing tags hebben.
De meest voorkomende fout is de afwezigheid van een closing tag zoals </td></tr></span> etc.
Test de HTML code met een HTML validator conform de W3C standaard
Gebruik geen atributen in de <BODY> tag, deze kunnen door spamfilters worden aangemerkt als spam met een block als gevolg
Zorg ervoor dat uw boodschap duidelijk omschreven staat in uw email-onderwerp
Creëer tevens een tekstversie voor de ontvangers die geen HTML nieuwsbrieven kunnen ontvangen
Breng een link aan met een webversie van uw email nieuwsbriefzodat, mocht onverhoopt uw HTML email nieuwsbrief toch niet goed gerendered worden, de ontvanger middels deze link toch de boodschap kan lezen

Style Sheets (CSS)

Webdesigners gebruiken Cascade Style Sheets (CSS) om een constante style toe te passen op hun website. Echter kan dat problemen veroorzaken aangezien email clients verschillend met style sheets omgaan. Opmaak nieuwsbrief tips html email

Email-clients	Hotmail	Yahoo	GMail	Outlook
linked style sheet	nee stripped	nee	nee	ja
embedded tussen <HEAD> tags	nee stripped	nee	nee stripped	ja
embedded tussen <BODY> tags	nee stripped	nee	nee stripped	ja
Onder voorbehoud van gebruikte versie

Indien u gebruik wilt maken van CSS, plaats het <STYLE> element dan tussen de <BODY> tags en niet tussen de <HEAD> tags. De meeste email-clients verwijderen het <STYLE> element tussen de <HEAD> tags
Beter is om het style element aan te brengen in de <TABLE><TD><SPAN> of <FONT> tags.
Bijvoorbeeld <TD style="font-size:12px;">
Gebruik geen CSS voor het positioneren van elementen.
Het zal de lay-out in de meeste email clients ernstig in de war brengen.

Lay-out

De meeste HTML email nieuwsbrieven zijn tussen de 500 en 650 pixels breed. De meeste Web-based email clients zijn daarop gebaseerd (afhankelijk van uw schermresolutie). Hou die breedte dan ook aan om horizontale scrolling te voorkomen. Vermijd dit omdat dit als irritant door de ontvanger ervaren wordt en derhalve ten koste kan gaan voor uw conversie ratio. Om een horizontale scroll te voorkomen bij gebruik van een schermresolutie van 1024 pixels bij 768 pixels is in het geval van Gmail een maximale breedte van 550 pixels aan te bevelen. Hotmail / Livemail daarentegen een maximale breedte van 650 pixels bij dezelfde resolutie.
Gebruik in tegenstelling tot uw website waar het gebruik van semantisch html en css codering gewenst is HTML tables voor het ontwerp
Vermijd krapte tussen de elementen (tekst, images etc.) in uw lay-out. Als uw elementen genoeg ruimte hebben is de kans kleiner dat uw lay-out verstoord wordt door de talloze email clients.
Probeer nested tables te vermijden (tabels in tabels), deze kunnen door sommige email clients niet goed gerenderd worden
Codeer de HTML handmatig. WYSIWYG editors (Frontpage e.d.) hebben de neiging extra code toe te voegen die door de verschillende email clients weer tot weergaveproblemen kan leiden. Indien u toch een editor wilt gebruiken maak dan gebruik van editors die dat niet doen zoals Dreamweaver.
Indien de ontvangers van uw emailing bekend zijn met uw website gebruik dan zoveel mogelijk de lay-out van uw website. Dit bevordert de herkenbaarheid en zal zorgen voor eengroter gevoel van betrouwbaarheid door de ontvanger.

Kleurgebruik

Kleurgebruik is heel belangrijk. Het kan echter ook problemen op leveren. Gebruik geen donkere achtergrondkleur, het zal de leesbaarheid van uw tekst en call to action doen afnemen.

Divers internet Poll-onderzoek heeft als resultaat opgeleverd (lees meer):
Vrouwelijke top 3 favoriete kleuren zijn: blauw, paars, groen (koele kleuren)
Vrouwelijke top 3 minst favoriete kleuren zijn: oranje, bruin, grijs (warme en neutrale kleuren)
Mannelijke top 3 favoriete kleuren zijn: blauw, groen, zwart ( 2 koele en 1 neutrale kleur)
Mannelijke top 3 minst favoriete kleuren zijn: bruin, oranje, paars (neutrale warme en gemengde kleuren)
Van de favoriete kleuren neemt de voorkeur voor groen af naarmate de leeftijd hoger wordt (beide geslachten)
Van de favoriete kleuren neemt de voorkeur voor paars toe naarmate de leeftijd hoger wordt (beide geslachten)
Van de minst favoriete kleuren neemt de afkeer van oranje verder toe naarmate de leeftijd hoger wordt (beide geslachten)

Background color

Gebruik een witte of in ieder geval een lichte achtergrond kleur met een donkere font kleur om de leesbaarheid te vergroten. Maak gebruik van background atributen van zoals <TABLE> en <TD> en niet in de <BODY> tag. Sommige web-based email clients zoals Hotmail verwijderen de inhoud van body tag. Wilt u een achtergondkleur op de gehele pagina hebben maak dan een extra tabel aan waarin u uw nieuwsbrief plaatst en geef die de achtergrond kleur mee die u wenst.

Font

Vermijd het gebruik van fonts die naar alle waarschijnlijkheid niet op een ieders computer staat. Gebruik daarentegen de gangbare fonts zoals Arial, Verdana, Times New Roman e.d.
Maak de font grootte minimaal 10 pixels, 10 points
Gebruik absolute font groottes, dus in pixels of points en niet bijvoorbeeld font size="2" aangezien, afhankelijk van de computer instellingen van de ontvangende partij, deze niet consistent weergegeven zullen worden.
Gebruik alleen ASCII karakters

Font colors

Vermijd witte fonts. Het lijkt aardig op een donkere achtergrond maar komt de leesbaarheid niet ten goede. Een nog veel groter probleem is dat spamfilters het gebruik van wit (#FFFFFF) in een <FONT> tag zien als spam. Spammers gebruiken dit om onzichtbare informatie in een email te plaatsen door witte tekst te gebruiken op een witte achtergrond.

Background images - achtergrondplaatjes

Het gebruik van achtergrondplaatjes is in zijn geheel af te raden. Zo goed als alle nieuwe versies van desktop email clients en web-based email clients ondersteunen het HTML attribute background niet. Dat geldt ook voor het inline style attribuut background-image. Een uitzondering is overigens Outlook 2007. Daar werkthet inline style attribuut background-image wel, echter uitsluitend in de body-tag. Net als de rest van de images wordt deze zichtbaar indien er toestemming gegeven wordt plaatjes te downloaden. U moet wel rekening houden met het feit dat het doorgaans bijbehorende background-repeat attribuut weer niet werkt met als gevolg dat uw plaatje over de hele pagina zowel verticaal als horizontaal herhaald zal worden.In dat geval doet u er raadzaam aan het plaatje in ieder geval hoger te maken dan de nieuwsbrief zelf, tenzij de herhaling uiteraard de bedoeling is.

Images

Indien u gebruik maakt van images, laat deze verwijzen naar de server waar de images staan en embed ze niet in uw email. Sommige ISP's blocken email berichtenmet embedded images
Aangezien in de meeste email clients images in eerste instantie geblocked worden is het raadzaam ervoor te zorgen dat de tekst in de email direct duidelijk maakt waar de email over gaat. Als de ontvanger niet de boodschap direct begrijpt is de kans groter dat de email de prullebak in verdwijnt. Vermijd dus tekst in images
Zorg ervoor dat u uw images de hoogte en breedte atributen meegeeft. Indien u dat niet doet loopt u het risico dat de images gestretched worden en daardoor de rest van uw content incorrect gerenderd wordt
Gebruik het ALT atribute om het plaatje een naam mee te geven zodat de ontvanger die ziet voordat de email-clients de images downloaden.
Vergeet niet de image tag <img> goed af te sluiten conform de laatste (X)HTML standaard, dus <img src="/" /> en niet <img src="/">. Outlook 2007 heeft anders de neiging extra ruimte aan de onderkant van de image toe te voegen indien er een link geplaats is op de image. Hou daar dus rekening mee met uw ontwerp en in het geval u splitted images gebruikt

Padding en Margin attributen

Indien u extra ruimte wilt tussen bepaalde elementen binnen uw nieuwsbrief voorkom dan het gebruik van de attributen padding en margin. Deze worden niet consistent gerenderd door de verschillende email clients. In plaats van padding en margin is het aan te raden extra cellen te plaatsen binnen uw tabellen of gebruik te maken van cellspacing en cellpadding.

Buttons (call to action)

Knoppen en andere supporting images moeten de aandacht trekken van de ontvanger. Zorg dat de tekst erin goed opvalt en goed leesbaar is. Nog belangrijker is dat de ontvanger de call to action goed begrijpt. Beter is nog om de knop in HTML te maken. Dit in verband met het blocken van images in eerste instantie door de meeste email clients. Indien u toch een image gebruikt is het raadzaam de link van de call to action ook tekstueel in uw ontwerp te plaatsen.

Formulieren

Gebruik geen formulieren in uw email nieuwsbrief. Bijvoorbeeld, Hotmail laat wel het formulier zien maar verwijdert alle waarden hetgeen uw formulier zinloos maakt. Zorg er dus voor dat uw formulieren opuw landingpages staan en niet in de email.

Scripts

Vermijd scripts zoals Javascript en VBscript vanwege beperkte support. Daar komt bij dat veiligheids risico's de laatste jaren toegenomen zijn waardoor de meeste email-clients ze uit uw email strippen.

Eindconclusie

Ondanks de bovenstaande tips blijft het belangrijk om uw HTML email nieuwsbrievente blijven testen op de gangbare email clients die uw ontvangers gebruiken. Trek daar genoeg tijd voor uit. De kosten van uitvoerig testen weegt immers niet op tegen het verlies aan ROI van uw email campagnes indien uw emails niet leesbaar zijn. Een 100% compatibiliteit is moeilijk haalbaar voor ingewikkelde ontwerpen aangezien de email clients zicht voortdurend blijven ontwikkelen. Streef in ieder geval naar het beste compromis. Als u echter bovenstaande tips hanteert moet u een eind kunnen komen.