Hoe kan ik mijn campagne het beste vormgeven door middel van HTML opmaaktaal?

In dit artikel bieden we een complete handleiding om het ontwerpen van jouw HTML-campagne/e-mail zo gemakkelijk mogelijk te maken. 

Je bent er wellicht al van op de hoogte hoe je een moderne en toegankelijke website kunt maken. Je kent de regels, de nieuwste opties etc. Maar kun je al die kennis ook in de praktijk toepassen om daarmee ook een e-mail op te stellen? Het korte antwoord op deze vraag is vaak nee. Vanwege de verscheidenheid aan e-mailproviders en de beperkte ondersteuning van CSS, zijn er enkele zeer specifieke regels en do's en dont's waar je aan moet voldoen bij het vormgeven van jouw campagne. 

In dit artikel staat meer uitleg waar jij op moet letten wanneer je jouw eigen HTML-mail gaat opstellen, zodat deze ook echt wordt weergegeven zoals jij in gedachte had. 

Als eerste is het belangrijk om te weten dat e-mailontwerp niet hetzelfde in zijn werk gaat als webontwerp. Ben je bekend met W3C-ontwerpen en gebruik je de nieuwste CSS al? Dan is het belangrijk te realiseren dat je het ontwerpen van een e-mail heel anders benaderd. In principe gaan we hiervoor denkbeeldig terug naar het jaar 2000, om te begrijpen hoe dit in z'n werk gaat. 

Layout

Een ontwerp breedte van 650px of minder
De algemene regel voor e-mailgrootte is om deze qua breedte 650px of minder te houden. Hierdoor kan deze in het algemeen correct worden weergegeven bij het gros van jouw contacten/bij de meeste weergave configuraties. Eenvoudige lay-outs werken hierbij nog altijd het beste. 

Eenvoudige lay-outs 
Bij het ontwerpen van een e-mail geldt hoe eenvoudiger, hoe beter. Maak je een ingewikkeld ontwerp dan zul je veel problemen ervaren tijdens het testen en zullen jouw contacten waarschijnlijk veel bugs ondervinden.
Wil je wel graag een relatief geavanceerd ontwerp van jouw campagne? Bereid je dan voor op het gebruik van veel tabellen. Daarbij is het belangrijk het ontwerp meermaals te testen voordat deze definitief wordt verzonden. 

Basis HTML-tabellen gebruiken
Om de algehele lay-out van jouw campagne juist te ontwerpen dien je gebruik te maken van standaard HTML-tabellen. CSS-floating en andere lay-outtechnieken worden niet in alle e-mailproviders juist weergegeven.

Kijk uit met tabelcelopvulling
E-mailproviders als Outlook halen de opvulling uit elke cel in een rij en past deze toe op alle andere cellen in de tabel. Dit kan resulteren in enkele visuele veranderingen die niet gewenst zijn. Probeer hierbij dezelfde opvulling toe te passen voor alle cellen in de rij OF een binnen-div of tabel (met opvulling) in de cel te plaatsen die je opgevuld wilt hebben. 

Vermijd het gebruik van colspans="" in tabellen
Sommige e-mailproviders ondersteunen deze colspans namelijk niet volledig. Daarbij kan het voorkomen dat er weergaveproblemen ontstaan bij andere cellen wanneer je een colspan toepast.

CSS

Gebruik geen externe stylesheet 
Bij veel e-mailproviders zullen deze niet werken. Je zult hierdoor al jouw CSS moeten opnemen met inline CSS om dit vervolgens in je HTML te plaatsen. 

Gebruik geen CSS-klassen - gebruik altijd inline CSS
De kans is groot dat jouw CSS-klassen niet worden ondersteund. In plaats van CSS-klassen, kun je beter inline CSS gebruiken. Een voorbeeld hiervan is: <div style="color:#cccccc;">content</div> in plaats van <div class="cssclassa">content</div>.

Gebruik geen CSS-snelkoppelingen
Met CSS kun je normaliter eigenschappen in groepen instellen. Zoals bijvoorbeeld: style="font: 12px, Arial". In plaats van dergelijke attributen te groeperen, moet je elk onderdeel afzonderlijk instellen. Zoals bijvoorbeeld op deze manier: style="font-size:12px; font-family:Arial".

Vermijd het gebruik van CSS float of positie opties
Het komt vaak voor dat zowel de float als de positie opties worden genegeerd. Probeer in plaats daarvan tabellen te gebruiken. 

Afbeeldingen en video's 

Gebruik absolute afbeeldingsbron-URL's 
In plaats van een afbeelding zoals: (<img src="img.gif">) op te nemen, kun je beter de absolute URL in het bestand opnemen zoals bij dit voorbeeld: (<img src="http://site.com/img.gif">).

Gebruik altijd alt-tags (<img src="http://site.com/img.gif" alt="Bedrijf ABC">)
De meeste e-mailproviders schakelen afbeeldingen standaard uit. Tenzij je alt-tags gebruikt, zien jouw contacten alleen een leeg vak. Met een alt-tag zien abonnees de tekst die je in de tag hebt geplaatst.

Sluit geen video's of Flash items in
Het is geen goed idee om video's rechtstreeks in te sluiten en/of te flashen in jouw e-mail. Veel van deze dergelijke codes worden namelijk niet ondersteund, waardoor jouw campagnes als spam wordt gemarkeerd door spam- en virusdetectieprogramma's. In plaats van jouw video/flash in de campagne in te sluiten, kun je een screenshot maken van hoe de video van Flash Player er uit ziet om dit vervolgens in te sluiten. Wanneer men op deze afbeelding klikt kun je instellen dat de video of flash geopend wordt in een nieuwe browser. 

Geanimeerde GIF's worden niet volledig ondersteund
Vraag jezelf af of je echt een animatie in je e-mail nodig hebt. Hoewel de meeste e-mailproviders geanimeerde GIF's wel ondersteunen, doet Outlook 2007 dit bijvoorbeeld niet. Wanneer geanimeerde GIF's niet worden ondersteund, zal waarschijnlijk het eerste frame van de animatiereeks worden weergegeven. 

Wees voorzichtig met gesplitste afbeeldingen
Als je een grotere afbeelding hebt gesplitst en die in jouw HTML plaatst met behulp van tabelcellen of img-tags naast elkaar, zul je deze uitgebreid moeten testen. Het komt geregeld voor dat er extra ruimte tussen de afbeeldingen wordt toegevoegd, dit kan er voor zorgen dat het geheel er niet meer mooi uitziet. 

Vermijd het gebruik van afbeeldingen om je te helpen met de lay-out
Soms worden er afbeeldingen gebruikt om jouw lay-out te kunnen verbeteren. Hierbij worden afbeeldingen van 1 of 2 pixels gebruikt om items in de lay-out uit te lijnen. Diverse e-mailproviders zullen deze afbeeldingen als mogelijke gelezen/geopende trackingafbeeldingen zien, wat nadelige gevolgen heeft.  

Test jouw campagne met uitgeschakelde afbeeldingen
Bij veel contacten zal het weergeven van afbeeldingen standaard zijn uitgeschakeld. Het is erg belangrijk dat je controleert hoe de e-mail eruitziet wanneer dit het geval is. 

Let op de grootte van bestanden
Net als bij regulier webdesign wil je op de hoogte zijn van de grootte van afbeeldingsbestanden die in jouw campagne worden weergegeven. Probeer de grootte van deze bestanden zo klein mogelijk te houden om ervoor te zorgen dat ze snel worden gedownload. 

Achtergrond

Achtergrondafbeeldingen worden niet volledig ondersteund 
Als je een achtergrondafbeelding gebruikt, houd er dan rekening mee dat sommige e-mailproviders deze niet zullen tonen. Wil je toch een achtergrondafbeelding gebruiken, gebruik dan de HTML-achtergrondopties in plaats van CSS om een achtergrond mee te creëren. 

Volledige achtergrondkleuren
Veel e-mailproviders (zoals Gmail) tonen geen achtergrondkleur die je instelt voor de hoofdtekst (<body>tag). We raden je aan, wanneer je een achtergrondkleur in de body-tag instelt, ook een inpak-div te genereren met een achtergrondkleur die de inhoud omringt. Op die manier krijg je, ook wanneer de achtergrondkleur niet geheel wordt ondersteund, toch iets vergelijkbaars te zien. 

Diversen

Plaats niets boven de openingstag (<body>)
Alles wat boven deze tag geplaatst wordt, wordt waarschijnlijk verwijderd en niet gebruikt. 

Neem geen javascript op in de campagne
Neem je toch javascript op in de e-mail, dan is de kans groot dat het wordt verwijderd en veel spamfilters deze inhoud als 'spam' zullen markeren. 

Vermijd Microsoft Office 
Gebruik je dit toch, is het bijna zeker dat dit voor problemen zal zorgen. Daarbij, wanneer je vanuit Office kopieert en plakt, plak je de opmaak van Office in de campagne. Dit zal ook bijna zeker voor ontwerpproblemen zorgen. 

 

 

Was dit artikel nuttig?
Aantal gebruikers dat dit nuttig vond: 0 van 0