HTML e-mail tips: wat moet je weten?

HTML design voor e-mail. Voor de één ware magie en voor de ander als het tellen tot tien. Als je geluk hebt dan heb je de beschikking over een in-house HTML designer of een ervaren partner. Je hoeft je dan geen zorgen te maken over het coderen van e-mail templates. Je plakt simpelweg de HTML in je tool en start met het opmaken van je maandelijkse nieuwsbrief.

Toch is het niet zo simpel. Zo zijn er veel HTML en CSS coderingen die vaak gebruikt worden in webdesign, maar zich vervolgens niet goed vertalen voor e-mail. E-mailprogramma’s als Outlook hebben zo de grootste moeite om de e-mail zoals gewenst te tonen. Er zijn echter een aantal e-mail HTML best practices die de meeste kwesties voorkomen. In dit blog geef ik 3 HTML e-mail tips voor maken van een e-mail template.

HTML e-mail template best practices

Laten we beginnen met het coderen van HTML.

E-mail HTML codering:

• Gebruik tabellen voor de lay-out en het ontwerp van je e-mail. Zorg dat alle <table> tags correct worden geopend en gesloten. Wij adviseren daarnaast een maximale tabel breedte van 600-650 pixels. Onthoud dat het e-mailvenster een stuk smaller is dan de webbrowser.
• Vermijd het gebruik van afkortingen. Dus geen: <p style = “font: italic 14px Verdana; color: # 000 “> </ p>, maar <p style =” font-style: italic; font-size: 14px; font-family: Verdana; color: # 000000 “> </ p>.
• Voorkom complexe colspans en rowspans, omdat deze een nachtmerrie zijn als je een template later wilt hergebruiken.
• Gebruik tot slot geen Java script, Flash of andere dynamische scripts. De meeste e-mailclients staan de functionering ervan niet toe.
• Zorg dat alle tags juist worden afgesloten. </table>, </td>, </tr/> etc.

E-mail font tips:

• Gebruik bij voorkeur de meest gangbare fonts zoals Verdana, Times New Roman, Arial, Sans-Serif, etc. Hiermee heb je de grootste kans dat ze ook op de computer van de ontvanger staan.
• Hanteer een fontgrootte van minimaal 10 pixels, zodat de tekst goed leesbaar blijft.

Tot slot zijn er ook voor afbeeldingen in e-mail een aantal handige best practices.

HTML afbeeldingen in e-mail:

• Gebruik altijd afbeeldingen in GIF of JPG formaat. PNG wordt immers niet door alle e-mailprogramma’s ondersteund.
• Voeg alt-text (alternatieve tekst) toe aan afbeeldingen. In veel e-mailclients worden afbeeldingen niet standaard getoond. Hiervoor moet je als ontvanger eerst toestemming geven. Met behulp van een alternatieve tekst geef je de lezer een idee van wat er zou moeten staan. Daarnaast wordt deze bij veel e-mailprogramma’s getoond als de plaatjes uitstaan.
• Vermijd achtergrond afbeeldingen in e-mails. Programma’s zoals Outlook strippen deze namelijk uit de e-mail. Kies bij voorkeur voor een lichte achtergrondkleur. Dit komt de leesbaarheid ten goede. Hoewel ik adviseer achtergrondafbeeldingen te vermijden kun je natuurlijk wel een achtergrondafbeelding inzetten. Realiseer je echter wel dat dit bewerkelijk is.

Gaat het dan alleen om HTML waardoor de e-mail zich netjes gedraagt?

E-mail tekstversie: een waar vergeet-me-nietje

Voor sommigen misschien een no-brainer, maar zeker niet onbelangrijk: de tekstversie. Je kunt nog zo’n goede HTML hebben, maar ook de platte tekstversie mag niet ontbreken. Als je alleen een opgemaakte HTML versie verstuurt, dan zullen sommige anti-spam filters je bericht tegenhouden. De e-mail komt hierdoor niet, of in kale vorm in de inbox terecht.

Een vraag die we vaak horen over de tekstversie: “Wat plaats ik dan in de tekstversie?”
Ons advies is om in ieder geval een link op te nemen naar de online versie van je e-mail zodat een lezer altijd de opgemaakte versie kan openen. Verder hoef je zeker niet de volledige tekst over te nemen uit de mail. Houd het kort en bondig zodat de ontvanger snel klikt op de link naar de online versie.

Je zou het haast denken, maar het maken van e-mail HTML is zeker geen magie. Met behulp van deze e-mail HTML tips heb je in ieder geval een goed kijkje achter de schermen gekregen. Wees je ervan bewust dat het belangrijk blijft om je e-mail te testen. Hoe toont je e-mail op de verschillende clients? Een tool als Litmus of Email on Acid is hier uitermate geschikt voor.

Nadat je daar de broncode van je nieuwsbrief in hebt geüpload krijg je een overzicht met screenshots. Daarin zie je hoe je e-mail oogt binnen alle verschillende e-mail clients.