1 marketing2 pagina 2/9 geschreven door Maarten van Benthem, front-end developer datum 1 oktober 2009 versie 1.0 Copyright Alle rechten voorbehouden. ...
Dit document is bedoeld als richtlijn voor het maken van HTML-bestanden welke geschikt zijn voor het versturen via e-mail. Er leiden vele wegen naar Rome maar de beschrijvingen in dit document resulteren in een optimaal resultaat.
2
Algemene richtlijnen
E-mail clients kennen over het algemeen meer beperkingen dan web browsers en volgen de algemene W3C-standaard voor HTML en CSS vaak niet volledig. Om verschillen in weergave zo veel mogelijk te voorkomen moet de HTML uniform en volgens de standaard worden opgesteld: -
neem bovenaan de nieuwsbrief altijd een link op naar de webversie van de e-mail;
-
vermijd gebruik van plaatjes voor belangrijke content zoals koppen, links en call‟s for action;
-
positioneer de belangrijkste/ meest aantrekkelijke content bovenaan en bij voorkeur aan de linkerkant;
-
test je ontwerp in de preview pane, full screen, met plaatjes aan/uit in verschillende emailprogramma‟s;
-
vraag ontvangers om het from-adres toe te voegen aan hun safesenderlist/adresboek/buddylist;
-
geen gebruik van Flash-elementen in e-mail;
-
gebruik CSS style sheets spaarzaam. Gebruik geen externe style sheets;
-
gebruik voor tekst opmaak een inline style op de cel. Bij meerdere opmaken is het ook mogelijk een inline style op een font tag te gebruiken:
Vivamus in ante quis nulla
;
-
achtergrondplaatjes kunnen beter niet worden gebruikt. E-mail clients als outlook 2007 geven deze plaatjes niet weer;
-
alleen .jpg en .gif plaatjes worden volledig ondersteund (gebruik dus geen .png of .sfw);
-
definieer achtergrondplaatjes nooit in CSS maar gebruik de HTML tag „background‟;
-
kies bij het gebruik van achtergrondplaatjes ook een passende achtergrondkleur die contrasteert met eventuele tekst erop (dus geen witte tekst op witte achtergrond);
-
gebruik geen verstuurde mail uit de mailbox als bronbestand, deze bevat gepersonaliseerde tellers en links en de HTML kan veranderd zijn door de e-mail client;
-
haal nooit externe content/scripts/css binnen in e-mails na verzending (m.u.v. plaatjes).
part of the valley
HTML richtlijnen pagina 5/9
Gebruik standaard HTML incl. doctype en character set-definities. Voorbeeld: <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> o
Gebruik absolute URL‟s voor plaatjes en geef altijd de dimensies van de plaatjes aan en vul de alt tag in.
Voorbeeld: o
3
Alt tags worden niet in iedere e-mail client getoond (o.a.Outlook 2007)
Hoofdstructuur HTML-bestand
Waar bij de opzet van het HTML-bestand rekening mee gehouden dient te worden is dat er voor e-mail gekozen moet worden voor een opzet in “tables”. “Div‟s” werken niet goed in de meeste email clients. Deze tabellen opzet moet zo eenvoudig mogelijk gehouden worden. Dus voorkom col- en rowspans. Gebruik daarvoor nested tabellen. Er zullen dus veel tabellen in tabellen komen te staan. Begin met een hoofdtabel waarin de basisstructuur van de nieuwsbrief wordt bepaald. Deze hoofdtabel bepaalt ook de breedte van de nieuwsbrief. Veritate houdt als standaard aan dat een nieuwsbrief niet breder mag zijn dan 650px. In de eerste plaats om ervoor te zorgen dat de nieuwsbrief printbaar blijft. In de tweede plaats om ervoor te zorgen dat de nieuwsbrief bij iedereen goed op het scherm past. Binnen deze globale structuur kan het ontwerp nu verder worden uitgewerkt. Hierbij is het belangrijk dat contentblokken in eigen tabellen geplaatst moeten worden. Onderstaande afbeeldingen geven een foute en een goede tabellenstructuur weer. Wanneer er gebruik wordt gemaakt van nested tabellen is de kans dat er bepaalde cellen uit elkaar worden getrokken veel minder. Ook is het gemakkelijker delen opnieuw te gebruiken wanneer er bijvoorbeeld een cms-template van de HTML gemaakt dient te worden. In afbeelding 1 zien we één tabel met een aantal rijen en kolommen. Deze opzet is niet gewenst. In afbeelding 2 zien we een opzet met in totaal drie tabellen (omlijnd met rood, blauw en groen). De hoofdtabel heeft een linker en een rechter cel. In de rechter cel staan 2 tabellen die onder elkaar worden weergegeven. Dit is een juiste opbouw.
part of the valley
HTML richtlijnen pagina 6/9
4
Opbouw artikel
Een artikel omvat in dit geval een verzameling van informatie. Laten we vaststellen dat een artikel bestaat uit een titel, een bodytekst, een link item (een url met een linktekst) en een plaatje (waar ook de url van het link-item omheen staat).
Hoe bouwen we dit artikel het beste op in HTML? Het design is aangeleverd zoals in afbeelding 3. In afbeelding 4 zien we wat een goede HTML technische oplossing is om dit artikel op te bouwen.
part of the valley
HTML richtlijnen pagina 7/9
Zoals te zien is in het voorbeeld gebruiken we voor dit artikel een tabel met 3 rijen. In de 1 e rij wordt de titel opgenomen. Hoe de titel wordt weergegeven staat in de inline style van die cel. Om de titel bold te krijgen gebruiken we de strong tag. Ook heeft deze cel een padding bottom van 10 pixels om de witruimte onder de titel te creëren. In de 2e rij hebben we een cel voor de bodytekst en het plaatje. De opmaak van de tekst wordt wederom op cel niveau gedefinieerd in de inline style. Verder is er in deze cel een tabel aangemaakt voor het plaatje. Deze tabel heeft als property align=left. Hierdoor zal de tekst die na deze tabel volgt om de tabel heen lopen. Er zijn hier ook andere manieren voor maar deze oplossing blijkt overal goed te werken. De 3e rij is gemaakt voor de “Lees meer” link. De vormgeving van deze link is gedefinieerd in de linktag zelf door middel van een inline style. Zo ziet de link er overal uit zoals is bedoeld. Wil men bij een link een zogenaamde hover effect dan kan men bij uitzondering dit definiëren in een stylesheet in de head van het HTML document. Dit zal echter niet in alle e-mail clients werken! Beperk de properties van deze style dan enkel tot de gewenste veranderende properties. Wil men bijvoorbeeld de links standaard wit en bij hover rood, geef dan alleen de kleur aan in de stylesheet en de rest van de font properties in de inline style.
part of the valley
HTML richtlijnen pagina 8/9
5 5.1
Veel voorkomende fouten Tekstblokken
Paragraven worden niet goed weergegeven in de meeste e-mail clients. Vaak worden er paragraaf tags (
) gebruikt om tekstblokken te creëren. Het is beter om 2 breaks ( ) hiervoor te gebruiken of de tekst op te maken in een tabel met meerdere rijen.
5.2
URL’s
Gebruik altijd een volledige url (bv http://www.google.nl en niet www.google.nl) Zet ook altijd de target van een link tag op “_blank” Om te zorgen dat een link overal de opmaak krijgt die bedoeld is zal de link zelf ook gestyled moeten worden. Dit kan door een inline style op de link te zetten zoals dat ook op een
Bij het gebruik van padding is het belangrijk goed op te letten. Heb je bijvoorbeeld een tabel met 2 cellen naast elkaar waarbij 1 van de cellen een padding-top heeft zal in bepaalde e-mail clients deze padding ook op de andere cel toegepast worden.
5.4
Align op cel
Wat vaak wordt gedaan is dat wanneer er iets rechts uitgelijnd dient te worden er op de cel align=”right”. Wat er vervolgens gebeurd is dat alle cellen in tabellen binnen deze cel deze property overnemen (o.a. Outlook 2007). Wil je niet dat in de nested tabellen de alignment op rechts staat dien je op iedere cel de alignment op “left” te zetten.
5.5
Images in tabellen
Het komt vaak voor dat een mailing voornamelijk bestaat uit visuals. Heeft de mail een opbouw met een tabel met een aantal cellen waarin plaatjes zitten die op elkaar moeten aansluiten is het belangrijk dat je door middel van een inline style de property display op block zet (). Wanneer dit niet gedaan word ontstaat er in de Hotmail e-mail client een witte rand aan een van de zijkanten.
part of the valley
HTML richtlijnen pagina 9/9
6
Character encoding
Om een correcte weergave van de content te realiseren in Tripolis en alle gangbare e-mail clients hebben we aantal tips op een rijtje gezet: -
HTML document dient in ISO latin 1 encoding te worden opgeslagen;
-
HTML document dient te worden voorzien van META tag met de CHARset: <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> of <META http-equiv="Content-Type" content="text/html; charset=UTF-8">;
-
HTML document dient te worden voorzien van de correcte doctype: ;
o