Meer tijd voor het belangrijkste: De perfecte sjabloon voor elke e-mail
We laten je zien welke elementen essentieel zijn in de e‑mailsjabloon en waar je op moet letten bij het ontwerpen van de ideale sjabloon!
Teksten schrijven, doelgroepen segmenteren, afbeeldingen selecteren, interne coördinatie en goedkeuringen, last-minute wijzigingen omdat een product is uitverkocht: In de dagelijkse praktijk hebben de meeste e-mailmarketingmanagers genoeg te maken met de inhoud van de e-mail, dat ze geen basisbeslissingen willen nemen over het ontwerp van de e-mail. Er is een standaardsjabloon nodig dat geschikt is voor de meeste communicatiemomenten: van nieuwsbriefsjablonen en uitnodigingen voor evenementen tot verjaardagsmails en annuleringscampagnes voor winkelmandjes, enz. Je zou eenmalig moeten investeren in zo’n sjabloon, zodat je dat achteraf niet meer hoeft te doen, maar je kunt wijden aan je eigenlijke werk. In CleverReach kun je de gratis sjablonen aanpassen aan je eigen huisstijl, of je kunt de sjabloontaal van CleverReach gebruiken om zelf – of via een dienstverlener – een sjabloon te maken met alle vereiste elementen in je eigen ontwerp. Dit brengt ons bij de vraag: Welke basiselementen heeft een e-mailtemplate nodig die gebruikt kan worden voor een grote verscheidenheid aan mailings?
Welke elementen heeft de ideale e-mailsjabloon nodig?
Om verschillende nieuwsbrieven en mailings te kunnen maken, moet je overwegen of je sjabloon de volgende elementen nodig heeft:
- Een menubalk. Omdat de menu-items in de mobiele weergave in meerdere regels worden gerangschikt, moet de tekst niet te lang zijn en ook in de mobiele herschikking nog steeds gemakkelijk aanklikbaar zijn. In plaats van het hele menu van je website weer te geven, kun je je beter concentreren op de 3 tot maximaal 6 hoofdcategorieën. Je kunt in CleverReach ook verschillende menubalken weergeven voor verschillende doelgroepen, bijvoorbeeld voor gebruikers die geïnteresseerd zijn in dames- of herenmode.
- Grote bannergebieden voor afbeeldingen. Als je tekst in de afbeeldingsbanners integreert, gebruik dan een activerende kop en link naar de afbeelding. Als de afbeelding “puur decoratie” is, moet deze minder ruimte innemen dan een afbeelding met een boodschap en een call-to-action. Combineer afbeeldingsbanners met tekstkoppen die ook worden weergegeven als de afbeeldingsweergave deactiveren.
- Blokken voor beeld en tekst: Wat lezers waarnemen als de “inhoud”. Hier loont het om te investeren in een goed sjabloon met de juiste stijldefinities: Denk aan prijslabels, stakingsprijzen, ruimte voor productinformatie (bijv. maten) en knoppen om op te roepen tot actie – dit bespaart je op de lange termijn veel werk. De afbeeldingen kunnen pictogrammen of producten zijn.
De tekst- en beeldelementen moeten op mobiele apparaten onder elkaar staan in plaats van naast elkaar, zodat ze goed zichtbaar en leesbaar blijven. Plan meerdere varianten voor verschillende afbeeldingsformaten: bijvoorbeeld ¼ afbeelding op ¾ tekst, 50/50 afbeelding en tekst, 2/3 afbeelding op 1/3 tekst en nog veel meer.
- In B2B-mailings moet je meer ruimte vrijmaken voor tekst en afbeeldingen gebruiken als aanvulling (bijvoorbeeld goed leesbare samenvattingen van artikelen met productafbeeldingen, stockfoto’s of diagrammen). Redactionele artikelen met plaatshouders voor een (staande) foto en handtekening van de afzender worden ook vaak gebruikt in zakelijke e-mails.
- Markeer elementen: Gebruik gekleurde – eventueel gecentreerde – tekstelementen met of zonder call-to-action. Dit maakt het ontwerp losser, trekt de aandacht naar belangrijke inhoud en werkt zelfs als afbeeldingen worden geblokkeerd door het mailprogramma.
- Meerkolomselementen: Twee-, drie- en vierkolomselementen voor tekst en afbeeldingen met kleuraccenten of kaders zijn een bijzonder nuttige module. Hier kunnen verschillende items naast elkaar worden geplaatst zoals in een kleine tabel.
- In de B2B-context zijn tabelelementen vaak nodig om bijvoorbeeld informatie over evenementen of downloads van documenten overzichtelijk weer te geven, die ook op mobiele apparaten onder elkaar kunnen worden gesorteerd.
- Aandachttrekkende knoppen die ook gemakkelijk te typen zijn op mobiele apparaten. Aanbeveling: links uitgelijnd of gecentreerd.
Natuurlijk zijn er ook structurele elementen die voor alle mailings even belangrijk zijn:
- Pre-header (de eerste karakters tekst die worden weergegeven in de inbox), vaak met een link naar de online versie (web preview)
- Social media balken met gekoppelde iconen van de actieve kanalen
- Ruimte voor service- en interactielinks
- Een onmisbaar en wettelijk verplicht element is ook de link om je af te melden voor de nieuwsbrief (opt-out). Deze wordt vaak in de footer geplaatst, samen met informatie over de afzender.
Waar moet je op letten bij het ontwerpen van de sjabloon?
Je hebt altijd minder controle over de lay-out in e-mails dan op het web en in drukwerk. Wat er goed uitziet in je test e-mails in Outlook kan er heel anders uitzien in Gmail of de GMX app. Voor de volgende elementen moet je misschien compromissen sluiten in het ontwerp:
- Meerdere kolommen: Inhoud die in meerdere kolommen naast elkaar staat, wordt niet automatisch gelijk van lengte. Achtergrondkleuren eindigen meestal met het einde van de tekst. En hoe de tekst loopt en breekt voor de lezer hangt sterk af van het gekozen lettertype, de letterstijl en het eindapparaat. Oplossing: accepteer een zekere mate van “fladderen” of doe moeite om het aantal tekens en woordlengtes in alle kolommen van elke e-mail te optimaliseren.
- Tekst met blokmarkering werkt niet in e-mailclients, vooral omdat er geen automatische afbreekfunctie is. Links uitgelijnde tekst wordt aanbevolen.
- Afgeronde hoeken op knoppen zien er misschien stijlvol uit, maar worden vooral in Outlook niet aanbevolen. Outlook geeft alleen “afgeronde hoeken” weer als de hele knop een afbeelding is – ontvangers die geen afbeeldingen weergeven, zien de knop echter helemaal niet. Bedenk dus goed hoe belangrijk “zachte hoeken” voor je zijn.
- Achtergrondafbeeldingen en afbeeldingen waarop tekst staat in het algemeen: jarenlang werd dit afgeraden, maar nu werken ze in de meeste e-mailclients. Wanneer je dergelijke elementen gebruikt, moet je ervoor zorgen dat de tekst op de afbeeldingen precies past. Test voor verzending op verschillende eindapparaten en e-mailclients of het lettertype en de lettergrootte overal naar wens worden weergegeven en of de afmetingen van de afbeelding en tekst niet worden “opgeblazen” in de mobiele versie. Dit kan zo tijdrovend zijn dat je er misschien de voorkeur aan geeft om de tekst samen met de afbeelding op te slaan.
Speciale functies voor de sjabloon
Je moet bij het ontwerpen ook rekening houden met de donkere modus:
- Maak afbeeldingselementen, afstandhouders en knoppen met een transparante achtergrond, dan ziet de mail er ook goed uit als de kleuren “omgekeerd” zijn.
- Zwarte pictogrammen of logo’s op een witte/transparante achtergrond kunnen worden voorzien van een “gloed”, zodat je mooie logo niet “zwart op zwart” verschijnt in de donkere modus.
- Als er kleurrijke vakken worden gebruikt om inhoud te benadrukken, moet er ook rekening worden gehouden met hun kleurverandering in de donkere modus. Hier geldt hetzelfde: het is beter om iets meer tijd te investeren in het maken van de sjabloon en dan tijd, geld en zenuwen te besparen voor alle toekomstige e-mails
De volgende elementen werken slechts in een paar e-mailclients, dus denk goed na of het de moeite waard is.
- Inhoudsopgave (met “anker” links): sommige webclients ondersteunen deze functie niet.
- Eigen (marketing) lettertypen. Hoewel eigen lettertypen en weblettertypen kunnen worden ingesloten in e-mails, worden ze verschillend weergegeven in verschillende clients. Ze worden niet weergegeven in Gmail en Outlook. Je zit altijd aan de veilige kant met zogenaamde “e-mailveilige lettertypen”, met deze lettertypen behoud je de controle over je ontwerp.
- Tabellen met veel kolommen: Een betegelde achtergrond met 5 x 5 producten ziet er geweldig uit op een pc-monitor. Op mobiele apparaten wordt de inhoud echter geschaald – en is dan nauwelijks herkenbaar – of ze worden onder elkaar gezet – dat zijn 25 rijen! 4 kolommen is het maximum voor de meeste resoluties (afhankelijk van het motief). En als het ontwerp belangrijk voor je is, waarom verplaats je de tegelachtergrond dan niet naar een landingspagina?
Wie moet er met de sjabloon werken?
Bedenk voordat je een sjabloon kiest wie de nieuwsbrief later gaat vullen met inhoud. Vooral met zelf geprogrammeerde sjablonen kunnen veel speciale functies worden geïntegreerd – het kan echter goed zijn dat deze niet gemakkelijk kunnen worden ingevuld in de CleverReach editor of dat opmaak onbedoeld wordt gekopieerd en geplakt door gebruikers in gebieden die het ontwerp beïnvloeden. Het kan daarom de moeite waard zijn om bepaalde gebieden uit te sluiten van bewerken tijdens het programmeren van het sjabloon of om bijvoorbeeld sommige velden alleen met tekst te vullen maar opmaak niet toe te staan. Hoewel dit de maker van de e-mail dagelijks enigszins beperkt, zorgt het er ook voor dat alle ontvangers consistent goede e-mails ontvangen.
Onze conclusie
Sjablonen zijn een prachtige manier om een zeer flexibel sjabloon naar eigen ontwerp te maken – dat vervolgens steeds opnieuw kan worden gebruikt. Ze hebben ook een doorslaggevend voordeel voor de organisatie: als je een sjabloon kiest, kunnen jij en je team veel fundamentele beslissingen één keer nemen, waardoor onduidelijkheden en coördinatie-inspanningen in de toekomst worden verminderd. Als je hier nog geen ervaring mee hebt, kun je direct beginnen met de gratis CleverReach ontwerpsjablonen – voor meer geavanceerde eisen helpen gespecialiseerde bureaus met het maken en optimaliseren van sjabloonreeksen. Op de lange termijn is de inspanning zeker de moeite waard!
Over de auteur
Marion Krohn is Hoofd Consulting en Business Development bij CleverReach partnerbureau Publicare Marketing Communications GmbH.
