HTML richtlijnen marketing. part of the valley

Maat: px

Weergave met pagina beginnen:

Download "HTML richtlijnen e-mail marketing. part of the valley"

Quinten Cools
8 jaren geleden
Aantal bezoeken:

1 marketing

2 pagina 2/9 geschreven door Maarten van Benthem, front-end developer datum 1 oktober 2009 versie 1.0 Copyright Alle rechten voorbehouden. De inhoud van dit document blijft eigendom van Veritate. Niets uit deze uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand, of openbaar gemaakt, in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door print-outs, kopieën, of op welke andere manier dan ook, zonder voorafgaande schriftelijke toestemming van Veritate. 2009, Veritate

Niets uit deze uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand, of openbaar gemaakt, in

3 pagina 3/9 Inhoudsopgave 1 Inleiding Algemene richtlijnen Hoofdstructuur HTML-bestand Opbouw artikel Veel voorkomende fouten Tekstblokken URL s Padding Align op cel Images in tabellen Character encoding Vragen, tips & tricks?... 9

.. 6 5 Veel voorkomende fouten... 8 5.1 Tekstblokken... 8 5.2 URL s... 8 5.3 Padding.

4 pagina 4/9 1 Inleiding Dit document is bedoeld als richtlijn voor het maken van HTML-bestanden welke geschikt zijn voor het versturen via . Er leiden vele wegen naar Rome maar de beschrijvingen in dit document resulteren in een optimaal resultaat. 2 Algemene richtlijnen 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 ; - 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 e- mailprogramma s; - vraag ontvangers om het from-adres toe te voegen aan hun safesenderlist/adresboek/buddylist; - geen gebruik van Flash-elementen in ; - 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: <td style= font-family: Arial; color:# > Vivamus in <font style= color:# >ante</font> quis nulla </td>; - achtergrondplaatjes kunnen beter niet worden gebruikt. 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 client; - haal nooit externe content/scripts/css binnen in s na verzending (m.u.v. plaatjes).

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.

5 pagina 5/9 Gebruik standaard HTML incl. doctype en character set-definities. Voorbeeld: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <META http-equiv="content-type" content="text/html; charset=iso "> o Gebruik absolute URL s voor plaatjes en geef altijd de dimensies van de plaatjes aan en vul de alt tag in. Voorbeeld: <img src=" " alt="my logo" width=100 height=50> o Alt tags worden niet in iedere client getoond (o.a.outlook 2007) 3 Hoofdstructuur HTML-bestand Waar bij de opzet van het HTML-bestand rekening mee gehouden dient te worden is dat er voor gekozen moet worden voor een opzet in tables. Div s werken niet goed in de meeste e- mail 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.

Voorbeeld: <img src=" http://www.veritat

6 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.

en een plaatje (waar ook de url van het link-item omheen staat). Hoe bouwen we dit artikel het beste op in HTML?

7 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 2 e 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 3 e 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 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.

Ook heeft deze cel een padding bottom van 10 pixels om de witruimte onder de titel te creëren. In de 2 e rij hebben we een cel voor de bodytekst en het plaatje.

8 pagina 8/9 5 Veel voorkomende fouten 5.1 Tekstblokken Paragraven worden niet goed weergegeven in de meeste clients. Vaak worden er paragraaf tags (<p>) gebruikt om tekstblokken te creëren. Het is beter om 2 breaks (<br />) 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 en niet 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 <td> het beste kan (bv <a href= [url] target= _blank style= font-family Arial; font-size: 12px; color:#ee1c24; text-decoration:none >Link</a>) 5.3 Padding 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 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 (<img style= display:block />). Wanneer dit niet gedaan word ontstaat er in de Hotmail client een witte rand aan een van de zijkanten.

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.

9 pagina 9/9 6 Character encoding Om een correcte weergave van de content te realiseren in Tripolis en alle gangbare 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 "> of <META http-equiv="content-type" content="text/html; charset=utf-8">; - HTML document dient te worden voorzien van de correcte doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " - gebruik van xhtml wordt afgeraden; - Alle speciale karakters dienen als HTML entities te worden ingevoerd. (de meeste gangbare HTML- editors doen dit automatisch, bv Adobe Dreamweaver) Enkele voorbeelden: (euro) wordt: &eur; (copyright tekens) wordt: é wordt &eacute. 7 Vragen, tips & tricks? Voor verdere ondersteuning staat het Veritate team klaar. Onze contactgegevens zijn: support@veritate.nl