Op deze pagina vind je 10 tips bij het maken van een goed werkende HTML e-mail. Voor de mensen die niet weten waar ik het over heb, wees niet getreurd. Er komen ook tutorial blogs met ‘niet-geek’ onderwerpen. Heb je vragen of opmerkingen over de onderstaande tips? Laat dan een reactie achter.
-
Gebruik tabellen i.p.v. divs
Bij de meeste developers gaan de nekharen overeind staan bij de woordencombinatie lay-out en tabellen, maar voor een html e-mail is het nog steeds aan te raden om voor je lay-out tabellen te gebruiken.
-
Maak gebruik van inline css
Gebruik inline css voor de volgende eigenschappen: background-color, border, color, font-family, font-size, font-style, font-variant, font-weight, letter-spacing, line-height, margin,padding, text-align, text-decoration, text-transform.
-
Voorkom het nesten van tabellen
Probeer tabellen niet te nesten. Zet inplaats daarvan de tabellen onder elkaar, hiermee voorkom je een hoop lay-out problemen.
-
Gebruik afbeeldingen op correcte wijze
Afbeeldingen kunnen je e-mails mooier en beter maken, maar pas op: gebruik afbeeldingen niet in je css als background-image. Plaats afbeeldingen met de
tag. Persoonlijk raad ik background images af, als je dit toch wilt doen, plaats dan de achtergrond afbeeldingen in de attribuut van de table / td. Helaas ondersteunen niet alle e-mail webservices deze oplossing
-
Gebruik altijd alt teksten
Een alt-tekst is een alternatief voor een afbeelding. Afbeeldingen kunnen namelijk uit staan bij gebruikers.
-
Zorg ervoor dat de line-height kleiner is dan de font-size
Hotmail en AOL op Macs voegen extra line-height toe aan plaatjes wanneer je dit niet doet. Gebruik dus bij een font-size van 12px een line-height van bijvoorbeeld 8px.
-
Gebruik paddings i.p.v. margins
Sommige mail services negeren margins.
-
Gebruik pixels i.p.v. percentages
Doe dit voor zowel line-height als font-size. Percentages worden soms genegeerd
-
Test je HTML e-mail
Controleer je e-mail altijd voordat je hem opstuurd. Test je e-mail ook door alle styles en images uit met de Firefox Web Developer Toolbar
-
Maak gebruik van handige websites
Download MailChimp’s voorbeeld templates om van te leren. Ook van deze gids heb ik veel geleerd. Wil je je html e-mail testen? Maak dan dankbaar gebruik van de Premailer website.