E-mail marketing is hot and happening en alles behalve ouderwets. Sterker nog, de toekomst van e-mail marketing ziet er veelbelovend uit waarin we (nog) meer gebruik maken van personalisatie en segmentatie, automatisering en AI, integratie met andere toolings zoals een Customer Data Platform (CDP) en een portie interactie in je mailbox.
In deze blog delen we technische tips en tricks over hoe je je e-mailtemplate kunt optimaliseren voor een extra vleugje impact. Je e-mail, net als je website, fungeert als een visitekaartje. Laat zien dat jouw e-mail niet alleen goed wordt weergegeven, maar ook blijk geeft van aandacht voor de gebruikerservaring, naast een focus op innovatie en creativiteit in het ontwerp.
De voorbeelden die we laten zien zijn unieke voorbeelden uit een breed spectrum aan mogelijkheden om je e-mails te verrijken. Ze illustreren slechts een fractie van wat er technisch mogelijk is. Door slim gebruik te maken van technische mogelijkheden zoals dynamische content en interactieve elementen zoals formulieren of polls, kun je jouw e-mails niet alleen visueel aantrekkelijker maken, maar ook de betrokkenheid en conversies verhogen. Doe er je voordeel mee!
Het gebruik van een donkere modus in applicaties wordt steeds gebruikelijker, en dit geldt ook voor e-mail templates. Door je e-mail template te optimaliseren voor de donkere modus, zorg je ervoor dat deze automatisch overschakelt naar een donker kleurenschema wanneer de donkere modus op je apparaat of in je e-mailapplicatie is ingeschakeld. Dit zorgt voor een naadloze ervaring voor de gebruiker. Echter, het is belangrijk om te onthouden dat niet elke e-mailclient deze functie ondersteunt. In sommige gevallen kunnen e-mailclients zelf de kleuren aanpassen door lichte en donkere tinten te verwisselen.
Hieronder tref je de basiscode aan die je in de head van je e-mail template kunt integreren, waarmee je de benodigde classes op specifieke plekken binnen je template kunt activeren.
<!-- Plaats beide secties in de <head> van je e-mail. -->
<!-- Ondersteuning voor Donkere Modus Inschakelen -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark only">
<style type="text/css">
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
<!-- Gebruik deze media query om stijlen aan te passen voor Donkere Modus. -->
@media (prefers-color-scheme: dark) {
<!-- Richt je op elementen zoals gewoonlijk binnen de media query. -->
}
</style>
Op de site van Litmus vind je meer informatie, code snippets en wat de ondersteuning is per e-mail client https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers
Een van mijn favorieten, animaties. CSS animaties voegen een visueel aantrekkelijke laag toe aan e-mails, waardoor ze niet alleen leuker zijn om te ontvangen, maar ook de betrokkenheid verhogen. Door belangrijke elementen zoals call-to-action knoppen te benadrukken of andere elementen, kunnen ze de conversies aanzienlijk verbeteren. Bovendien zijn CSS animaties relatief lichtgewicht en compatibel met de meeste moderne e-mailclients, wat ze een efficiënte manier maakt om interactiviteit toe te voegen zonder de prestaties te beïnvloeden.
Een groot voordeel van het gebruik van CSS animaties in e-mails is dat, mocht de e-mailclient de animaties niet ondersteunen, je tekst of elementen alsnog zichtbaar zijn, zij het niet-geanimeerd. Dit zorgt ervoor dat de essentiële informatie altijd overkomt, ongeacht de technische mogelijkheden van de e-mailomgeving van de ontvanger. Dit maakt CSS animaties een uitstekende keuze om je e-mailcommunicatie meer dynamiek te geven, terwijl je tegelijkertijd de gebruikerservaring verbetert en zorgt voor een consistente weergave van je boodschap.
Veel e-mail service providers (ESP’s) maken gebruik van een template engine zoals Smarty of Twig. We leggen de focus voor nu op Smarty. Als marketeer ben je altijd op zoek naar manieren om je e-mailmarketing naar een hoger niveau te tillen. Personalisatie is daarbij cruciaal, maar wat als je ESP niet alle personalisatie-opties biedt die je nodig hebt? Hier komt Smarty als een redder in nood. Smarty is een programmeertaal die je direct in je e-mail templates kunt gebruiken, wat je in staat stelt om je e-mails op een meer geavanceerde manier te personaliseren, voorbij de standaard mogelijkheden van je ESP.
Met Smarty kun je dynamische content creëren, zoals het tonen van de naam van de ontvanger, het weergeven van producten die ze eerder hebben bekeken middels een productfeed, berekeningen maken a.d.v je data, datums formatteren en nog veel meer. Dit alles gebeurt automatisch, door slimme code in je e-mail templates te integreren. Het is alsof je een persoonlijke tovenaar hebt die elke e-mail aanpast aan de specifieke behoeften en interesses van de ontvanger, zelfs als je ESP die mogelijkheden niet direct biedt.
Hieronder een 2 tal voorbeelden hoe je een gepersonaliseerde aanhef kunt maken met Smarty:
{if $firstname != ''}
Beste {capitalize($firstname)},
{else}
Beste klant,
{/if}
{if $gender == 'M' and $lastname != ''}
Beste heer {$lastname|capitalize},
{elseif $gender == 'F' and $lastname != ''}
Beste mevrouw {$lastname|capitalize},
{elseif $lastname != ''}
Beste heer/mevrouw {$lastname|capitalize},
{else}
Beste heer/mevrouw,
{/if}
Laten we nog een mogelijkheid van Smarty bekijken. Als je e-mail template elementen bevat die je slechts af en toe inzet, kun je deze flexibeler maken door de inhoud met m.b.v. Smarty automatisch aan te passen aan verschillende seizoenen. Zo kun je een 'standaard' item gemakkelijk in je e-mail integreren, terwijl het toch naadloos aansluit bij het huidige seizoen.
In de code gebruiken we $smarty.now om de huidige tijd te krijgen, die we met date_format:'%m' omzetten naar de maand. Dit resultaat slaan we op in $date, die we dan gebruiken in een if-else statement om verschillende acties te bepalen op basis van de maand.
<!-- Verkrijg de huidige maand -->
{assign var='date' value=$smarty.now|date_format:'%m'}
<!-- Bepaal welke ‘winter’ content je wilt tonen. Als er niet wordt voldaan aan de ingestelde conditie dan tonen we de ‘zomer’ content -->
{if $date == '10' or $date == '11' or $date == '12' or $date == '01' or $date == '02' or $date == '03'}
Toon winter content
{else}
Toon zomer content
{/if}
Er zijn talloze manieren om je doelgroep te segmenteren binnen je ESP, zoals op basis van aankoopgeschiedenis, browsegedrag of zelf aangegeven interesses door je nieuwsbrieflezers. Helaas wordt er anno 2024 nog te weinig gebruikgemaakt van deze segmentatiemogelijkheden, terwijl het niet ingewikkeld hoeft te zijn. Je hoeft je abonnees niet te overladen met lange profielverrijking formulieren of enquêtes, wat vaak afschrikkend werkt.
Bekijk bijvoorbeeld het ingesloten formulier hieronder in een e-mail. Het grote voordeel hiervan?
Zo'n compact formulier kan je gemakkelijk in je bestaande content invoegen, waardoor het voor de ontvanger heel laagdrempelig wordt om zijn of haar interesses door te geven. Je wordt niet omgeleid naar een webbrowser, behalve voor de bedankpagina. Op deze manier wordt het voor je nieuwsbrieflezers zo eenvoudig mogelijk gemaakt om hun interesses te delen. Win win!
Let op: In sommige e-mail clients, zoals Outlook, werkt deze functionaliteit niet. Je kunt in je ESP instellen dat je het formulier uitsluit voor Outlook-adressen en adressen van andere niet-ondersteunde clients.
In het digitale tijdperk waarin we leven, speelt kunstmatige intelligentie (AI) een onmisbare rol. Hoewel veel ESP's AI-technologie nog niet volledig hebben geïntegreerd, is het mogelijk om via een alternatieve route, zoals het gebruik van innovatieve tools zoals Brainvine, toch de voordelen van AI te benutten. Dit fascinerende onderwerp is zo rijk en veelzijdig dat het zonder twijfel een eigen blog verdient. Blijf dus zeker op de hoogte voor een diepgaande verkenning hiervan in de nabije toekomst!
