E-mailmarketing: Achtergrond­afbeeldingen in je e-mailtemplate

Met de uitstraling van jouw e-mail wil je zorgen voor herkenbaarheid bij jouw ontvanger. De ontvanger van jouw e-mail moet in één oogopslag kunnen zien van wie de e-mail afkomstig is. Met een mooie opmaak van jouw e-mailtemplate kun je jouw herkenbare huisstijl tonen en wordt het de ontvanger direct duidelijk.

Soms wil je in je e-mailtemplate een afbeelding toevoegen waarin een ander element is verwerkt. Denk hierbij aan een tekst of een klikbare button. Een afbeelding is immers vaak erg aantrekkelijk voor de ontvanger en om het dan aanklikbaar te maken, zorgt voor een snellere klik van de ontvanger naar jouw website of webshop toe.

Zichtbaarheid van afbeeldingen in je e-mailtemplate

Het ‘probleem’ van het toevoegen van afbeeldingen aan je e-mailtemplate is, zoals je in de E-mailmarketing basics ook al hebt kunnen lezen, dat afbeeldingen niet in elke e-mailclient standaard worden gedownload. En dan zit je met je leuke idee. Want pas als de ontvanger jouw afbeeldingen downloadt, wordt jouw visueel aantrekkelijke content zichtbaar en is duidelijk dat de afbeelding die erin staat eigenlijk ook een extra functie heeft: als button.

Om dit ‘probleem’ op te lossen, dien je dus je belangrijkste content – de actieknop en de context – zichtbaar te maken voor mensen die de afbeeldingen niet downloaden.

E-mailtemplate voor Het Rode Kruis met een (achtergrond)afbeelding met aanklikbaar element (een button) en een tekst over de (achtergrond)afbeelding heen.

In deze situatie is internet je beste vriend: er is een heel gemakkelijke tool om een achtergrondafbeelding te implementeren en daar direct de goede HTML uit te krijgen. Je selecteert in deze tool één achtergrond­afbeelding en daarbij wordt óók de fallback-afbeelding ingesteld. De tool Bulletproof background images neemt je dus voor een groot gedeelte de codering uit handen.

Fallback voor achtergrond­afbeelding met klikbaar element

Een achtergrondafbeelding in de HTML kan in veel e-mailclients alleen via de HTML-code

background="https://www.website.com/"

Bovengenoemde tool zorgt er met een VML voor dat ook in andere e-mailclients een afbeelding kan worden getoond. Naast een fallback in de codering om je afbeelding goed te tonen, is er ook nog een alternatieve fallback voor wanneer er überhaupt geen afbeeldingen kunnen worden gedownload. In zo’n geval wordt er een achtergrondkleur meegegeven. Hiermee maak je het toch nog enigszins visueel aantrekkelijk voor de ontvanger van de e-mail, zelfs als er geen afbeeldingen worden gedownload.

Je kunt er voor kiezen om de fallback-afbeelding in de VML-structuur te veranderen en op die manier andere afbeeldingen tonen voor andere e-mailclients. Denk aan een (langzaam) bewegende afbeelding met een klikbaar element in de ene e-mailclient (bijvoorbeeld Gmail) en een stilstaande afbeelding met een klikbaar element in de ander (bijvoorbeeld Outlook). Zo kun je de boodschap van je e-mailcampagne afleveren bij de ontvangers en wordt de inhoud dus eigenlijk getoond aan twee segmenten. Ontzettend handig als je ziet dat het gebruik van bepaalde e-mailclients (die technisch anders handelen) ook bij je doelgroep leidt tot andere acties.

Het enige wat je zelf nog hoeft te coderen is het toevoegen van een button en een tekst (in de afbeelding).

Welke voorbeelden van klikbare elementen in afbeeldingen zijn jou opgevallen?

Geef een reactie