Effectief gebruik van telefoonnummers in e-mail

Zoals inmiddels tot iedereen is doorgedrongen wordt een aanzienlijk deel van een mailing geopend op een mobiele telefoon. En bijna elke mailing vraagt om een reactie van de ontvanger (CTA). Maar mobiel internet is vaak traag en kostbaar. Dus waarom geef je jouw klanten niet de mogelijkheid om telefonisch te reageren op je mailing? Ik leg graag uit hoe je dat het beste kunt doen.

Telefoonnummerherkenning

Veel telefoons kunnen een telefoonnummer in een e-mail redelijk goed herkennen waardoor, als men met de vinger op het nummer tikt, deze direct kan worden gebruikt om te bellen. Maar dat gaat niet altijd goed. Er zijn twee problemen:

  1. Er staat een ander type nummer in de tekst (bijv. een polisnummer) welke door de e-mailclient voor telefoonnummer wordt aangezien waardoor er automatisch een link van wordt gemaakt.
  2. Een telefoonnummer bevat spaties waardoor maar een deel van het nummer wordt gebruikt om te bellen. Hoe goed een telefoon een nummer herkent is per type telefoon verschillend.

Voor beide problemen is een oplossing.

Automatische telefoonnummer-herkenning voorkomen

Om te voorkomen dat van elk willekeurig nummer automatisch een link wordt gemaakt is een meta-tag beschikbaar:

<meta name="format-detection" content="telephone=no">

Deze meta-tag zorgt ervoor dat automatische telefoonnummer-herkenning wordt uitgeschakeld.

Telefoonnummer bruikbaar maken

Nu er van geen enkel nummer meer een link wordt gemaakt kan je zelf bepalen welk nummer wel gebruikt mag worden om te bellen. Dit doe je door er een link van te maken.

<a href="tel:+31553456789">055 – 34 567 89</a>

Zo eenvoudig is het.

Technische werking verbeteren

Nu het telefoonnummer een link is kan het direct worden gebruikt om te bellen. Maar de e-mail zal niet alleen worden geopend op mobiele telefoons. We moeten nu niet de PC's vergeten. Als de lezer op een PC het telefoonnummer aanklikt dan zal hij een foutmelding in zijn browser zien. Dat is natuurlijk niet zo netjes. Er zijn twee dingen die je kunt doen om te voorkomen dat iemand op het telefoonnummer klikt:

  1. Verbergen van de link:Door de link te stylen met CSS kan de link onzichtbaar worden gemaakt. Dit betekent dat de link dezelfde kleur krijgt als de rest van de tekst, de onderlijning wordt weggehaald én het uiterlijk van de cursor wordt geen wijsvingertje. <a href="tel:+31553456789" style="color:#000001; text-decoration:none; cursor:text;">055 – 34 567 89</a>
  2. Klikfunctie van de muis uitschakelen Met behulp van de CSS-property 'pointer-events' is het mogelijk om de klik-functie van de muis voor de betreffende link uit te schakelen. <a href="tel:+31553456789" style="color:#000001; text-decoration:none; cursor:text; pointer-events:none;">055 – 34 567 89</a>Het gebruik van deze CSS-property kent echter wel wat haken en ogen. Volgens de W3C-specificaties zijn pointer-evens alleen van toepassing op 'svg' elementen. Om die reden ondersteunt Internet Exporer deze property niet op het 'a' element. Daarnaast zorgt het ervoor dat Chrome en Firefox de cursor:text; declaratie negeert en deze property de waarde 'default' geeft. Met andere woorden: in Internet Exporer blijft de cursor netjes een text-cursor, maar is de link nog wel klikbaar. In Chrome en Firefox daarentegen wordt de cursor een pijltje, maar is de link niet klikbaar.

Baat het niet, schaadt het niet

En het gaat nog verder. Outlook 2007 ondersteunt bijvoorbeeld zowel het attribuut cursor:text; als pointer-events:none; niet. Misschien vraag je je af wat dan nog het nut is van deze CSS-properties? Ik ben van mening: baat het niet, dan schaadt het niet. Want waar de CSS-properties niet werken kunnen ze ook geen kwaad. Waar ze wel werken zijn er twee mogelijkheden:

  1. De link is niet klikbaar, maar de cursor wordt, boven de link, een pijltje.
  2. of

  3. De link is optimaal verborgen zodat zelfs de cursor niet meer verandert in een wijsvingertje. Het is echter nog wel mogelijk om op de link te klikken.

Om dit te verduidelijken is hier een overzichtje:

Cursor

Aan jou dus de keuze welke uitwerking jij het belangrijkste vindt. Moet de link overal zo goed mogelijk worden verborgen of moet de klikfunctie zo veel mogelijk worden uitgeschakeld?

Telefoonnummer bruikbaar maken voor mobiel

Het telefoonnummer moet natuurlijk wel bruikbaar zijn voor de mobiele lezers. Je wil immers dat de lezer jou gaat bellen. Om dat te doen maak je gebruik van media queries. Daarmee kan je de CSS die je inline hebt gedefinieerd overschrijven wanneer de content wordt weergegeven op een mobile telefoon. En je kan natuurlijk nieuwe styles toevoegen. Bekijk dit voorbeeld maar eens om een idee te krijgen hoe dit er uit kan zien:

Mail Outlook

Mail Telefoon

In de praktijk

Om dit te realiseren moet als eerste een class worden toegevoegd aan de telefoonnummer-link.

<a class="phone" href="tel:+31553456789" style="color:#000001; text-decoration:none; cursor:text; pointer-events:none;">055 – 34 567 89</a>

Vervolgens zet je in de head van de HTML-code, binnen een media query, de CSS die moet worden toegepast op de betreffende class.

<head> ... <style type="text/css"> @media only screen and (max-width: 420px) { [class=phone] { color:#ffffff !important; pointer-events:auto !important; display:block !important; padding:5px 10px !important; font-size:20px !important; line-height:20px !important; background-color:#008613 !important; width:170px !important; } } </style> </head>

Op deze manier is het telefoonnummer een duidelijke call-to-action geworden. De lezer hoeft nu niet meer te wachten tot hij thuis is om zijn wifi te gebruiken en zo kosten te besparen. Hij kan direct reageren en bellen! Simpel en snel. Zowel voor jou als marketeer bij het implementeren van deze oplossing als voor jouw mobiele lezers om te gebruiken.

Clang & telefoonnummers

Als je Clang gebruikt voor het versturen van e-mailings dan moet je de clickthrough van het telefoonnummer uitzetten. Als je dat niet doet maakt Clang namelijk een http-link van de waarde in het href-attribuut (href="tel:+31553456789"). Dat doet Clang om clicks te kunnen meten ten behoeve van de statistieken. Maar in dit geval zorgt dat er voor dat wanneer de mobiele lezer het telefoonnummer aantikt, eerst de browser wordt geopend voordat de belfunctie van de telefoon wordt geactiveerd.

Wil je meer weten? Schrijf een reactie via onderstaand formulier of je kunt me bereiken via de LinkedIn-groep "E-mailmarketing Nederland". Join the discussion!

  • Innovatie


Ja, natuurlijk wil ik dit artikel delen:




Reageer op dit artikel


Best bekeken blogs


Vraag aan e-Village?

Wist je dat...

Wist je dat...

...e-Village een deliverability ratio (afleverpercentage) heeft van 99,72%?

Meer weetjes? Schrijf je in voor de nieuwsbrief en blijf altijd op de hoogte