De perfecte button in e-mailmarketing bestaat niet. Of toch wel?

E-mailmarketing: waarom de perfecte button niet bestaat

Vandaag een keer een wat technischer artikel over het coderen van de perfecte button voor in je e-mail templates. Zoals al eerder besproken in het artikel over de e-mailmarketing basiskennis, luistert het maken van een e-mail template nauw. Zoveel mensen, zoveel verschillende e-mail clients. En elke e-mail client gaat weer anders om met jouw e-mail template. Heb je een schitterend e-mail template gemaakt? Outlook maakt er makkelijk er een compleet potje van. Datzelfde geldt dus ook op detailniveau voor buttons.

Eigenschappen van de perfecte button

Voor een perfecte button in jouw e-mailmarketing campagne kijk je vooral naar het uiterlijk. Maar als ontwikkelaar van e-mailmarketing templates weet ik dat je een button ook klaar wilt zetten om herhaaldelijk te kunnen gebruiken. Je wilt een knop kunnen dupliceren om naast elkaar te kunnen plaatsen (bijvoorbeeld als je twee downloads aanbiedt in dezelfde nieuwsbrief of twee verschillende maar gelijkwaardige call to actions hebt). Ook wil je dat het mogelijk is om twee knoppen die niet gelijkwaardig zijn (één call to action en één secundaire aanvullende hyperlink) naast elkaar te zetten. Een beetje ruimte tussen de twee knoppen is dan wel prettig.

In de e-mailmarketing templates die ik maak, zet ik vaak alle mogelijkheden paraat. De gebruiker die het template vervolgens gaat gebruiken om inhoud te geven aan de e-mailcampagne (of ik dat nu ben of een andere marketingcommunicatie specialist) kan dan zelf bepalen welke onderdelen er blijven staan en welke er niet nodig zijn. Dat kan door een onderdeel te verbergen, zodat deze niet in de e-mailcampagne geplaatst wordt. Andersom werken kan natuurlijk ook: niks zichtbaar maken, maar toevoegen wat je nodig hebt. Zelf ben ik voorstander van de werkwijze om alles zichtbaar te maken, omdat het enorm kan inspireren hoe je jouw e-mailcampagne vormgeeft.

Een goede knop heeft bovendien de eigenschap dat hij minimaal 40 pixels hoog is: zo kunnen alle duimen op mobiele apparaten de knop goed aanklikken. Daarnaast wil je dat een goede knop een opvallende achtergrondkleur heeft en een goed contrasterende tekstkleur. En wil je het echt helemaal optimaliseren? Dan maak je een button met afgeronde hoeken. Dit voelt voor internetgebruikers intuïtiever aan als knop dan een knop met rechte hoeken.

De veilige manier: button als een tabel

Een repeterende button in een tabel-vorm is zeker mogelijk en het is een veilige optie. De meeste (zo niet alle) e-mailmarketing templates zijn opgebouwd uit tabellen en dus is een button in de vorm van een tabel ook een garantie voor succes. Laten we uitgaan van het scenario dat je de button links wilt uitlijnen. In dat geval kun je een tabel maken met twee kolommen en twee rijen. Alleen de eerste kolom op de eerste rij geef je een achtergrondkleur en de ruimte (spacing). Zichtbaar wordt dit de knop. De overige drie kolommen geef je dezelfde achtergrondkleur als het contentvlak waar de button in komt te staan – dit zorgt voor extra ruimte en geeft je de mogelijkheid de knop herhaaldelijk naast elkaar te zetten zonder dat de knoppen elkaar kunnen raken.

Deze kolom geef je een achtergrondkleur.
Bovenstaande tabel geeft aan welke kolommen er gebruikt worden voor een knop die gecodeerd wordt als tabel.

Zorg ervoor dat de randen van de knop (CSS-eigenschap border) uit staan, zodat het lijkt alsof de overige drie kolommen simpelweg niet bestaan. Eventueel kun je de kolom met achtergrondkleur ook nog verdelen in drie kolommen, zodat je ruimte links en rechts naast de buttontekst kunt toevoegen. Je komt dan op een HTML uit van ongeveer dit:

<table cellpadding="8" cellspacing="0" border="0" align="left" style="mso-table-lspace: 0; mso-table-rspace: 0;border-collapse: collapse;">
	<tbody>
		<tr>
			<td width="5" bgcolor="#2cc7c7" style="background-color:#2cc7c7;"><img src="https://gallery.mailchimp.com/88fd292becbd6e4687c2ea119/images/8c701bc5-9036-44c4-b8dc-487b33c9256c.png" alt="" width="5" height="5" style="border: 0;height: auto !important;outline: none;-ms-interpolation-mode: bicubic;display: block !important;"></td>
			<td bgcolor="#2cc7c7" style="background-color:#2cc7c7; font-size: 16px;line-height: 150%;mso-line-height-rule: exactly;"><a href="https://www.jouwwebsite.nl/" style="font-size: 16px;line-height: 150%;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: Helvetica,Calibri,Arial,Helvetica,sans-serif !important;color: #ffffff !important;text-decoration: none !important;">Bekijk het artikel</a></td>
			<td width="5" bgcolor="#2cc7c7" style="background-color:#2cc7c7;"><img src="https://gallery.mailchimp.com/88fd292becbd6e4687c2ea119/images/8c701bc5-9036-44c4-b8dc-487b33c9256c.png" alt="" width="5" height="5" style="border: 0;height: auto !important;outline: none;-ms-interpolation-mode: bicubic;display: block !important;"></td>
			<td width="5" bgcolor="#ffffff"><img src="https://gallery.mailchimp.com/88fd292becbd6e4687c2ea119/images/8c701bc5-9036-44c4-b8dc-487b33c9256c.png" alt="" width="5" height="5" style="border: 0;height: auto !important;outline: none;-ms-interpolation-mode: bicubic;display: block !important;"></td>
		</tr>
		<tr>
			<td colspan="4" height="1" bgcolor="#ffffff"><img src="https://gallery.mailchimp.com/88fd292becbd6e4687c2ea119/images/8c701bc5-9036-44c4-b8dc-487b33c9256c.png" alt="" width="1" height="1" style="border: 0;height: 1px !important;outline: none;-ms-interpolation-mode: bicubic;display: block !important;">
			</td>
		</tr>
	</tbody>
</table>

Merk op dat ik in de lege kolommen een afbeelding heb gezet. De oorspronkelijke afbeelding die ik hiervoor heb gemaakt is 1 pixel hoog en 1 pixel breed en volledig transparant. Je kunt hem dus overal inzetten en gebruiken voor het creëren van ruimte binnen je e-mailtemplate. Ook hier binnen de knop is het handig: de lege kolommen wil je wel vullen met ruimte en het loont bij bepaalde e-mailclients om dat te doen middels een afbeelding als deze. De hoogte en breedte van de afbeelding is altijd in dezelfde verhouding (want de oorsprong is 1 bij 1 pixel), maar je kunt naar wens op deze manier wél meer (of minder) ruimte maken.

Voordelen

  • De knop in tabel-vorm is een veilige vorm van HTML en rendeert in zo goed als alle browsers correct.
  • Je kunt door middel van de pixel extra ruimte creëren en zodoende de button ‘lucht’ geven, waardoor hij extra opvalt.
  • De button is in alle e-mailclients goed naast elkaar te gebruiken, vanwege de drie kolommen die voor extra witruimte zorgen.

Nadelen

  • In Outlook komt er nog meer extra witruimte bij (vooral in de tweede rij en daaronder).
  • De gehele button is niet aanklikbaar, alleen de hyperlink is aanklikbaar.
  • Het is niet mogelijk om de button met afgeronde hoeken te maken.

Bullet proof buttons met VML-constructie

Wanneer je buttons wilt coderen die ronde hoeken hebben, dan kom je eigenlijk direct uit bij een VML-constructie. Dit is de back-up die je nodig hebt om e-mailclient Outlook te pleasen. Gelukkig hoef je niet thuis te zijn in de VML-constructie om een goede knop te kunnen coderen. Via de website buttons.cm kun je eenvoudig een button naar keuze vormgeven en de code ervan ophalen.

Via de website buttons.cm kun je de button naar wens vormgeven en de code ophalen.
Via de website ‘Bullet Proof Buttons’ kun je een knop ontwerpen en direct de code bekijken.

De website laat je meerdere eigenschappen invullen, zoals de gewenste achtergrondafbeelding, de achtergrondkleur, de tekstkleur, de breedte van de button, de hoogte van de button, de kleur van de rand en de radius van de ronde hoek.

Er is alleen één probleem.

De website zegt ‘bullet proof’ knoppen aan je te kunnen leveren, maar dat is niet geheel waar. In Windows Mail – de app die standaard op alle Windows 10-apparaten staat en de opvolger is van Outlook Express – werkt het niet. Windows Mail blokkeert de achtergrondafbeeldingen namelijk. Een snelle zoekopdracht via Google levert al snel een resultaat op bij het Litmus forum, waarin hiervoor een oplossing wordt gepresenteerd. Het is een kleine aanpassing op de VML-constructie, waarbij er gebruik wordt gemaakt van meerdere lagen over elkaar heen die door middel van de z-index op de juiste volgorde boven elkaar komen te staan.

De oplossing werkt zowel voor Windows Mail als Outlook, dus voor écht kneitergoede buttons gebruik je deze constructie. De code komt er dan ongeveer zo uit te zien:

<!--[if mso]>
<table cellpadding="0" cellspacing="0" border="0" width="250" style="height:50px;display:inline-block;">
<tr>
<td>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" style="behavior: url(#default#VML); width: 226px; height: 43px; display: inline-block; position: relative; top: 0; left: 0; border: 0; z-index: 1; float:left;" src="{url van button als achtergrondafbeelding zonder tekst erin}" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 226px; height: 43px; display: inline-block; position: absolute; top: 0; left: 0; border: 0; z-index: 2;">
<v:fill opacity="0%" />
<div>
<center style="line-height:28px;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:none;">
<![endif]-->
<span style="font-size: 15px;line-height: 150%;font-family: Helvetica,Calibri,Arial,Helvetica,sans-serif !important;"><a href="https://www.jouwwebsite.nl/" style="font-size: 14px;line-height: 37px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: none;background-color: #2cc7c7;margin: 0 5px 5px 0;padding: 0 25px;border-radius: 10px;color: #ffffff;display: inline-block;border: 2px solid #2cc7c7;text-align: center;text-decoration: none;text-shadow: 0 0 8px #000;font-family: Helvetica,Calibri,Arial,Helvetica,sans-serif !important;">Bekijk het artikel</a></span>
<!--[if gte mso 9]>
</center>
</div>
</v:fill>
</v:rect>
</td>
</tr>
</table>
<br/>
<![endif]-->

Voordelen

  • Zowel op Outlook, Windows Mail als andere e-mailclients heb je een goed uitziende button.
  • In de meeste e-mailclients is de gehele button aanklikbaar en niet enkel de hyperlink.
  • In de meeste e-mailclients kun je de button herhaaldelijk toepassen en naast elkaar zetten.
  • Deze oplossing is geschikt om in sommige e-mailclients te werken met hover-effecten, zoals een veranderende achtergrondkleur of het vetgedrukt maken van de tekst in de knop.

Nadelen

  • In onder andere Outlook en Windows Mail is enkel de hyperlink aanklikbaar.
  • In onder andere Outlook en Windows Mail staat de button niet altijd naast elkaar, maar onder elkaar.
  • Voor de VML-constructie (die dus voor Outlook en Windows Mail is bedoeld) is een vaste breedte nodig. Dat betekent dat je ergens een gokje kunt doen over hoe breed de knop moet zijn (zoals in het voorbeeld, waarbij ik de breedte heb gezet op 226 pixels) om het altijd te kunnen gebruiken of dat je per e-mailcampagne en button de breedte moet aanpassen.
  • Om de VML-constructie heen heb ik een tabel gezet, zodat de volledige button ook qua positionering goed wordt getoond. Gebruik je enkel de VML-constructie? Dan heb je kans dat je button over andere elementen heen komt te staan.

Button als afbeelding

Een button als afbeelding is voor mij absoluut geen optie. Het betekent dat je het maken van een button altijd moet integreren bij het gehele proces en het wordt foutgevoelig. Bovendien zit je met het probleem dat niet altijd afbeeldingen worden gedownload en je dan helemaal niks zichtbaar hebt. Bovenstaande oplossingen hebben in ieder geval altijd tekst zichtbaar en zijn een stuk minder foutgevoelig.

Conclusie

De echt perfecte button bestaat eigenlijk niet, maar je kunt met de meeste oplossingen wél goed in de richting van perfectie komen. Je kunt soms ook voor bepaalde e-mailclients genoegen nemen met de mindere versie. Wil je een button met ronde hoeken, maar accepteert de e-mailclient dat niet? Pech – dan gebruiken we toch een rechthoekige knop? Of je gebruikt een andere fall back, bijvoorbeeld een button als afbeelding voor een specifieke e-mailclient. Afhankelijk van hoe nauw je met de huisstijlregels van jouw organisatie om moet gaan, kun je de oplossing gebruiken die voor jou het meest geschikt is.

Wil je me na het lezen van dit artikel laten weten of je het nuttig vond? Stuur me een berichtje via @briansandifort (Twitter, Instagram of Facebook) of mail mij! Ook aanvullingen op dit artikel zijn zeer welkom!

Foto door picjumbo.com via Pexels