HTML templates

Met Marketing Suite kun je naast drag-and-drop-templates ook handmatig HTML templates aanmaken. Dit is een andere manier om mooie en werkende mailings te verwezenlijken. In vergelijking met de drag-and-drop-templates is de aanpak wat technischer en meer ingewikkeld, omdat kennis van HTML en CSS vereist is. De HTML templates hebben echter wel enkele functionaliteiten die in de drag-and-drop-templates niet bestaan, omdat de HTML templates al veel langer in ontwikkeling zijn. Ook zorgt de manier van werken, namelijk met HTML, voor meer vrijheid.

Werken met HTML templates templates

Bij HTML templates wordt een template-/documentstructuur gebruikt. Een template bevat de globale opmaak van de mail en de elementen die voor elke mailing vaststaan (zoals logo's en een afmeldlink). Verder bevat een template vooral blanco plekken die later kunnen worden ingevuld. Als je een mailing wilt samenstellen maak je op basis van een template een document aan, en kun je de blanco plekken vullen met teksten en afbeeldingen. Een document is dus eigenlijk een ingevulde template.

Vaak worden de templates gemaakt door webdesigners of programmeurs die handig zijn met HTML. Zij bepalen de opmaak van de mailing en wijzen de plaatsen aan waar teksten en afbeeldingen kunnen worden geplaatst (de layout). Als een template eenmaal is gebouwd, kan deze door bijvoorbeeld een marketeer worden voorzien van teksten en afbeeldingen. Zo kunnen er complete mailings mee worden verstuurd. Voor die tweede stap is geen kennis van HTML vereist.

In dit artikel gaan we dieper in op het ontwerpen van templates. Het is echter geen beginnerscursus HTML. We gaan er van uit dat je over voldoende kennis van HTML beschikt om in ieder geval een eenvoudige website te bouwen.

Een voorbeeld van een HTML template

Via Marketing Suite kun je templates maken. Als je voor de "e-mail-editor" optie in het hoofdmenu kiest en een nieuwe template aanmaakt, verschijnt aan de rechterkant van het scherm een groot formulier waar je de broncode van je template kunt invoeren. Hier kun je de HTML code van de template plaatsen. Maar let op: de HTML code die je invoert kun je het beste eenvoudig houden. Hoe eenvoudiger de broncode van de template, hoe groter de kans dat je e-mail door veel van je ontvangers kan worden gelezen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
    <p>
        [text name="example"]
    </p>
    </body>
</html>

Op documentniveau kan er nu een tekst worden geplaatst op de plek van de [text]-tag.

Contentblokken

Zoals gezegd bestaat een template uit HTML-code. Deze kun je zelf maken en je kunt er blanco plekken in opnemen die later op documentniveau worden voorzien van content. Je bepaalt hiermee waar later afbeeldingen en teksten mogen worden geplaatst. Deze blanco plekken noemen we contentblokken.

Er zijn drie tags waarmee je contentblokken maakt: [text], [image] en [loop]. Deze tags kun je in de broncode van de template opnemen om aan te geven dat daar op documentniveau content kan worden geplaatst. De werking van de [text] en [image] tags spreekt voor zich: op elke plek in de template waar je deze tags plaatst, kunnen later op documentniveau teksten en afbeeldingen worden geplaatst. De loop-tags behoeven wat meer uitleg, en stellen je in staat om op documentniveau herhalingen in te voeren. Als je bijvoorbeeld gebruikers in staat wilt stellen om mailings te maken met een variabel aantal paragrafen of een variabel aantal artikelen, dan kun en dit doen door loopblokken in de template op te nemen.

Lees voor meer informatie het artikel over contentblokken.

Let op met blokhaken!

Binnen een template hebben blokhaken ('[' en ']') een speciale betekenis. Deze tekens worden gebruikt om de hierboven beschreven contentblokken mee te markeren, en je kunt ze gebruiken voor [if] statements en templatevariabelen (een voorbeeld kun je zien in het artikel over [loop] tags). Doordat blokhaken een speciale betekenis hebben, moet je opletten als je ergens "gewone" blokhaken plaatst, zoals in de stylesheet bovenaan een template. Deze blokhaken worden namelijk door Copernica herkend als het begin van een speciaal onderdeel van de template en vaak resulteert dit in een fout. Er zijn twee trucs om dit te voorkomen: door gebruik te maken van [ldelim] en [rdelim], of door [literal] en [/literal] te gebruiken.

Als je een gewone blokhaak in een template wilt zetten kun je gebruik maken van [ldelim] en [rdelim]. De [ldelim] en [rdelim] tags worden door Copernica namelijk automatisch omgezet naar de echte '[' en ']' tekens. Dus als je ergens een blokhaak wilt zetten, maar niet wilt dat Copernica deze blokhaak als speciaal teken herkent, dan vervang je de blokhaken gewoon door [ldelim] en [rdelim]:

<style type="text/css">
    div[ldelim]class=x[rdelim] {
        font-weight: bold;
    }
</style>

Als je een heel groot stuk CSS-code hebt dat vol staat met blokhaken, en waar bovendien nergens gebruik wordt gemaakt van contentblokken (zodat alle blokhaken in dat stuk geen speciale template betekenis hebben), dan kun je ook [literal] en [/literal] gebruiken. Met deze tags kun je een deel van je broncode markeren waarbinnen alle blokhaken geen speciale betekenis hebben.

<style type="text/css">
     [literal]
         div[class=x] {
             font-weight: bold;
         }
     [/literal]
 </style>

Vaste afbeeldingen

Foto's en plaatjes worden meestal pas op documentniveau toegevoegd. Maar ook in de template kun je al afbeeldingen plaatsen, zoals het bedrijfslogo dat voor elke mailing immers hetzelfde is. Hier is niks moeilijks aan, en kun je met doodnormale HTML <img> tags doen. Maar let wel op dat de afbeelding waar je naar verwijst, ook aan het template is gekoppeld.

Via de toolbar kun je het schem "Bestanden en afbeeldingen" openen. In dit venster kun je alle afbeeldingen en bestanden beheren waarnaar in de template wordt verwezen. Als je hier een afbeelding uploadt, zoals plaatje.gif, dan kun je in de template de <img src="plaatje.gif"> tag plaatsen. Wij zorgen dat de afbeelding wordt gehost op de servers van Copernica zodat ontvangers van de e-mail de afbeelding krijgen te zien.

Je kunt natuurlijk ook zelf de afbeeldingen hosten, maar verstandig is dit niet. Als je de afbeelding uploadt naar Copernica, verzorgt Copernica de hosting en kunnen we de afbeelding gebruiken om kliks en opens te tracken.

Het scherm "Bestanden en afbeeldingen" kan ook worden gebruikt om bestanden te beheren. Dit is een nogal theoretische toepassing. HTML kent naast de <img> tag ook allerlei andere tags opnemen die verwijzen naar extern gehoste content. Bijvoorbeeld <object>, <embed>, <iframe> en <applet>. Als je dit soort tags gebruikt (wat we zeer sterk afraden), dan kun je het bestand waar naar wordt verwezen, gelijk een afbeelding, via dit dialoogvenster koppelen.

Houd het eenvoudig

E-mailberichten worden op allerlei soorten manieren gelezen: via mobiele devices zoals tablets (met best een groot scherm), telefoons (klein scherm) of horloges (piepklein!). Maar ook op gewone laptops en ouderwetse desktops met speciaal daarvoor ontwikkelde e-mailprogramma's als Outlook of Thunderbird, of met webmail omgevingen als Gmail of Hotmail. Bovendien gebruiken veel mensen verouderde software en filteren e-mailprogramma's en providers berichten en worden scripts en ingewikkelde CSS-code vaak uit mails verwijderd. Een template moet dus wel tegen een stootje kunnen. Een eenvoudige template is een stuk minder kwetsbaar dan een complexe template, en leidt tot minder problemen en daardoor tot een groter bereik.

Aanmaken templates/documenten

Klik linksboven op Aanmaken > HTML-template aanmaken om een nieuwe template aan te maken. In het volgende venster kan er een naam gegeven worden aan de template en kan de template eventueel met voorbeeldcode gevuld worden. In het venster rechts kan het template bekeken en aangepast worden. In het broncode template tabblad kan de HTML van de template aangepast worden. Hier dienen ook de bovengenoemde contentblokken aangemaakt worden. Om deze contentblokken te vullen moet er een document aangemaakt worden. Klik op Aanmaken > HTML-document aanmaken> om een document aan het template toe te voegen. Dit document is de uiteindelijk mailing en hierin is het mogelijk om de contentblokken te vullen.

Template-versies

Af en toe wordt er door Copernica wat veranderd aan het template-systeem. Er worden dan bijvoorbeeld nieuwe parameters toegevoegd aan de content-blokken. Omdat dit gevolgen kan hebben voor bestaande templates en lopende mailings, worden dergelijke wijzigingen per template uitgerold, en alleen als je daar als gebruiker zelf toestemming voor geeft. Dit doe je via de optie "Versiebeheer" in het configuratiescherm van een HTML template.

De volgende versies van het template-systeem zijn in omloop:

  • Versie 1: het oorspronkelijke systeem (fouten in content-blokken worden geaccepteerd)
  • Versie 2: templates met blokken met foutieve parameters geven een foutmelding
  • Versie 3: het [image] block ondersteunt ook style-attributen.

Alle nieuw aangemaakte templates worden aangemaakt volgens de laatste versie. Heb je nog templates die nog niet het nieuwe systeem ondersteunen, dan kun je deze via het configuratiescherm van templates handmatig omzetten.