AUTEUR:
Foeke Zeilstra | Design
Activation | Door Foeke Zeilstra | Leestijd 4 minuten | 16-01-2019
Welke code werkt in HTML e-mails?
Het komt ons allemaal zo bekend voor: we hebben een prachtige nieuwsbrief gemaakt. Plaatje, praatje, linkje naar de website en dat alles in een prachtige lay-out. En dan blijkt dat de CSS-beschrijvingen bij de ene ontvanger anders werken dan bij de andere. En dat Lotus Notes en Pegasus Mail de nieuwsbrief al helemaal niet fatsoenlijk tonen. Om dan nog maar te zwijgen over Microsoft Outlook en Gmail.
Voor bovenstaande problemen zijn talloze vergelijkingstabellen gemaakt waarin je kunt zien wat in welk mailpakket wel en niet werkt. Laten we het daar maar eens niet over hebben, maar laten we het hebben over fundamentele principes van HTML e-mail.
Wil je een HTML e-mail maken, dan bouw je een HTML-pagina ‘from scratch’. Zonder hulp van WYSIWYG editors, zoals Front Page of Dreamweaver. Kun je geen HTML-pagina’s bouwen, dan zijn er voldoende ingebouwde templates van nieuwsbriefservices als MailChimp of de nieuwsbriefmodule van Frappant. De gegenereerde HTML-code van deze services is geschikt voor de meeste e-mailprogramma’s.
HTML e-mail in een notendop
Een HTML e-mail is een webpagina. Niet meer en niet minder. Alleen wordt de pagina gebouwd alsof het nog 1995 is.HTML e-mail, wat lever je af?
Het maken van HTML e-mail is niet het ontwerpen en het coderen, maar het leveren. Je kunt niet zomaar een HTML-bestand met afbeeldingen versturen. Als de ontvanger het bestand opent zullen de afbeeldingen niet zichtbaar zijn, omdat het e-mailprogramma ze ergens in een tijdelijke map bewaard. Mocht de HTML uiteindelijk goed tonen, dan is het nog steeds mogelijk dat een deel van de ontvangers de mail niet kan lezen, omdat ze geen HTML kunnen of willen zien. Je kunt er voor kiezen om ook een alternatieve tekstversie mee te sturen.MIME
Hoe kun je een HTML e-mail en tevens een tekstversie versturen? Dat kan in Multipart/Alternative MIME formaat. MIME legt de structuur en codering van e-mailberichten vast. Het wordt ook gebruikt voor andere manieren van communiceren via het internet. De programma’s herkennen de MIME beschrijving en zullen de berichten op de juiste manier tonen. Natuurlijk is dit allemaal te technisch als je van plan bent ‘alleen maar een nieuwsbrief’ te maken. We laten dit deel dan ook over aan de programmeurs.Het coderen van HTML e-mails
Zoals eerder gezegd lijkt het coderen van een HTML e-mail alsof we terug in de tijd gaan. Alsof we weer met het oude Netscape werken. Enkele handvatten:- Houd het eenvoudig. Dit geldt voor het ontwerp en voor de techniek. Richt je voornamelijk op de boodschap.
- Zet de gebruikte afbeeldingen op een publieke server. Om de pagina intact te houden kun je het beste de hoogte en breedte van de afbeeldingen hard coderen.
- Vergeet DIV’s, gebruik tabellen! E-mailprogramma’s zijn geen volwaardige browsers en renderen (het tonen van HTML-code) de HTML op verschillende manieren. Sommige gebruiken Internet Explorer, Firefox, Chrome of Outlook 2007 met Microsoft Word. In enkele gevallen komen we e-mailprogramma’s tegen die een eigen rendering hebben (bijvoorbeeld Lotus).
- Maak de e-mail niet te breed. Veel gebruikers bekijken de mail in een smalle voorvertoning. Je houdt het niet voor mogelijk, maar er zijn nog steeds mensen die de mail printen. Ook dan is het voor hen prettig als de mail op een A4 past. Hoe breed? Houd rekening met alles. Wordt de mail op een mobiel getoond?
- Webmail stript je code! Hoe frustrerend. Heb je eindelijk een prachtige layout en dan blijkt dat Gmail en Hotmail de code strippen. DOCTYPE, BODY en HEAD tags worden zomaar vervangen en ook CSS styles worden verwijderd. Toch maar naar die vervelende vergelijkingstabellen waarin wordt getoond wat wel en niet werkt in welke mailpakketten?
- 99% van de CSS werkt niet. Klopt, in 1995 was er immers nog geen CSS 😉 Is opmaak in CSS toch nodig? Zet deze dan inline. Onthoud wel dat een aantal mailprogramma’s ook deze CSS stript.
- Test de mail. Verstuur naar jezelf en kijk wat er gebeurt. Probeer zoveel mogelijk mailpakketten. Denk aan de verschillende versies van Outlook, Outlook Express, Thunderbird, Apple Mail, Eudora, Pegasus Mail, Gmail, Lotus, Hotmail, Live Mail etc. Je zult al gauw de verschillen zien en tot de ontdekking komen dat het ondoenlijk is om de HTML in alle pakketten op dezelfde manier te tonen.
- Denk als een spamfilter. Wat is ongewenste mail? Zorg ervoor dat jouw mail dat in ieder geval niet is.
- Geef een onderwerp mee.
- Gebruik, indien mogelijk, een persoonlijke aanhef. Dus niet alleen ‘Geachte heer/mevrouw’ of erger nog ‘Beste’
- Schrijf correct (taal- en stijlfouten komen ook niet geloofwaardig over).
- Maak zo min mogelijk op. Laat de tekst dus het liefst zwart met een standaard grootte, zodat deze bij de meeste ontvangers goed te lezen is.
- Gebruik een nieuwsbriefmodule of een goed mailpakket (mail dus geen Microsoft Word teksten).
- Wordt er een afbeelding meegestuurd, houd deze dan klein (niet te klein).
- Vermijd woorden die door spammers worden gebruikt (niet alles in HOOFDLETTERS, geen s p a t i ë r i n g in het onderwerp!)
- Vermeld je contactgegevens in de e-mail.
- Link altijd naar je website.
Hoe kun je meten?
Nadat de mail is verstuurd wil je natuurlijk weten hoeveel mensen de mail hebben gelezen en hoeveel hebben doorgeklikt naar de site. Je hebt waarschijnlijk weleens gehoord dat er wordt gemeten met een afbeelding van 1 x 1 pixel. Dat klopt, maar dat is natuurlijk niet echt betrouwbaar. De afbeelding moet wel eerst worden geladen en dat gebeurt niet altijd, omdat de ontvanger dit niet wil of omdat dit geblokkeerd wordt door de omgeving (netwerk) van de ontvanger. Daarbij werkt het alleen in HTML-mails. Wat werkt dan wel? Stel dat je links in jouw mail hebt verwerkt en dat de ontvanger hierop moet klikken om het vervolg van het artikel op jouw site te kunnen lezen. Deze klik is goed te volgen. Door het meten van de kliks op deze links (click tracking) kunnen we meten hoe vaak op welke link wordt geklikt en zelfs wie er op deze link heeft geklikt. De nieuwsbriefmodule van Frappant houdt dit ook overzichtelijk voor je bij.Stel jezelf regelmatig de volgende vragen:
- Hoe ga ik verder om met mijn nieuwsbrieven?
- Hoe voorkom ik dat ik op de blacklist van ISP’s kom te staan?
- Hoe blijf ik interessant voor de ontvangers?
Bijhouden adressen hoofdzaak
- Stuur alleen naar ontvangers die toestemming hebben gegeven
- Houd goed bij welke ontvangers zich uitschrijven (liefst automatiseren)
- Houd je maillijst schoon. Verwijder dubbele adressen, onjuiste adressen en adressen die meer dan twee keer terugkomen (bouncen)
Heeft HTML e-mail toekomst?
Het lijkt er op dat het de afzender van HTML-berichten steeds moeilijker wordt gemaakt. Blacklists, anti-virusprogramma’s, strakke spamfilters, e-mailprogramma’s die van alles blokkeren etc. Maar HTML e-mail is een blijvertje als jij je maar focust op de boodschap. Een kijkje vooruit: – Steeds meer mensen gebruiken online e-mailservices als Hotmail en Gmail. Deze services laten de HTML en CSS steeds beter zien. Ook zijn er steeds meer diensten die in staat zijn grote hoeveelheid mails (tegen betaling) te versturen. – Meer mensen gebruiken mobiele apparaten om hun e-mail te lezen. We moeten er wel rekening mee houden dat deze mobiele apparaten de HTML deels strippen. Apple iPhone daarentegen laat de HTML e-mails wel mooi zien. Zelfs het inzoomen werkt prettig. Steeds meer fabrikanten volgen dit voorbeeld.