Het zal je waarschijnlijk al eens overkomen zijn: Je hebt na uren werk een e-mail klaarstaan om verzonden te worden. Je loopt de content langs, checkt of de links werken en alles lijkt te werken zoals jij wilt dat het werkt. Totdat je jouw e-mail previewt. Ineens zie je dat je e-mail in de Gmail app wel goed werkt, maar in Outlook verspringen afbeeldingen of wordt je font vervangen. Er zijn tal van onderdelen in je e-mail die per inbox kunnen veranderen. Hoe je omgaat met deze rendering, leggen we je graag uit.

Waarom de ene inbox provider je e-mail anders toont dan de andere inbox provider, ligt aan de interpretatie van code door de betreffende provider. Er zijn grofweg vijf factoren die het verschil in vertoning veroorzaken:

  1. E-mail service providers
  2. Operating Systems
  3. App- en web-based e-mail clients
  4. Schermgroottes
  5. (Dynamische) elementen

De volgorde van dit rijtje oorzaken is niet gebaseerd op de impact ervan, maar op de volgorde waarin jouw e-mail zijn reis voltooit. Zo begint de reis van je e-mail bij je e-mailservice provider en is het eerste waar je e-mail mee in aanraking komt het Operating System (OS) van de ontvanger, in combinatie met de e-mail client. Voorbeeld: Je e‑mail wordt aangeboden bij  Outlook 2010 op een Windows 10 laptop. Vervolgens is het van belang hoe groot het scherm is. Pas na het openen vanuit de inbox rendert een email client de afbeeldingen, hyperlinks en andere (dynamische) elementen.

De invloed van je Email Service Provider (ESP)

Je verwacht wellicht dat een e-mail service provider (in zijn breedste betekenis) niet zoveel invloed uitoefent op de interpretatie van de ontvangende e-mail client. Toch heeft een ESP meer invloed dan je denkt. Zo worden bijvoorbeeld tracking pixels toegevoegd (als je dat toestaat, natuurlijk) om je informatie over opens en clicks te geven,of worden hyperlinks herschreven om te kunnen herleiden waar traffic vandaan komt. Daar valt natuurlijk mee te dealen wanneer je één provider gebruikt voor je e-mails, maar dat is vaak niet zo.

In 2017 deed Smart Insights onderzoek naar hoeveel ESP’s de gemiddelde (e-mail)marketeer gebruikt om e-mails te verzenden. Waar net iets meer dan de helft van de ondervraagden van slechts één ESP gebruik maakte, zet de andere helft 2, 3, of zelfs 4 verschillende ESPs in. Wanneer al deze systemen je e-mail behandelen, geven ze dus allemaal een eigen “laagje” mee. Hoewel dit gedeelte van het afleverproces vrij goed beheersbaar is, valt het natuurlijk niet mee om vier systemen bij te houden.

E-mails vanuit andere bronsystemen

Naast een ESP, gebruikt de gemiddelde organisatie véél meer systemen die ook e-mails kunnen verzenden. Een webshop bijvoorbeeld heeft naast een e-mailmarketing platform ook een CRM systeem, een boekhoudpakket en logistieke software die allemaal e-mails versturen in het bestelproces. Omdat e-mail ‘slechts’ een onderdeel van die pakketten is, kunnen ze wel e-mails versturen, maar zit er weinig tot geen intelligentie in. Hierdoor zijn e-mails uit een dergelijk systeem vaak niet responsive, kunnen e-mails niet in jouw huisstijl opgemaakt worden, of is deliverability niet goed ingeregeld. Met alleen die software kom je dus vaak niet ver in de professionalisering van je e-mails.

De minieme macht van Operating Systems (OS)

Van mindere invloed op het uiteindelijke resultaat, maar wel degelijk van invloed op de e-mail client, is het Operating System van de ontvanger. Het betreft hier dan kleine invloeden, die nét de output kunnen veranderen. Hoewel OSes niet van invloed zijn op de HTML en CSS in de client, gebruikt Windows bijvoorbeeld wel het zogeheten ClearType, dat teksten in Chrome optimaliseert. Wanneer een web browser niet zijn eigen rendering doet, kan een OS wel meer invloed uitoefenen: bijvoorbeeld op de vertoning van check boxes, drop-down menu’s, fonts en zooming.

Mobiele Operating Systems

De meeste mobiele telefoons gebruiken WebKit als render engine voor e-mails. Hierdoor zien e-mails op een Android telefoon er in theorie hetzelfde uit als op een iPhone. Toch kunnen er verschillen optreden, vergelijkbaar met het ClearType-voorbeeld. Dat komt door de kleine variaties die telefoonontwikkelaars kunnen aanbrengen in hun versie van WebKit. Hiermee ronden ze bijvoorbeeld letters anders af, passen ze padding aan of behandelen ze links anders. Er kunnen dus verschillen zitten in de manier waarop OSes jouw e-mail vertonen.

Het verschil tussen app- en web-based e-mail clients

De crux van e-mail rendering bevindt zich in het verschil tussen e-mail client applicaties en webgebaseerd e-mail client. Verschillende e-mail client (bijvoorbeeld Gmail en Outlook) hebben zowel een browser- als een applicatie-variant van hun e-mail client, voor zowel desktop, tablet als mobiele telefoon. Door het eindeloze aantal verschillende varianten, gebeurt het vrij snel dat een e-mail op de Gmail-app op een iPhone er anders uitziet dan in de browser van een Huawei. Gmail is een bekend voorbeeld van een e-mail client die voor elke browser een licht verschillende e-mail client heeft.

Welke e-mail clients gebruiken jouw klanten?

De cijfers over het daadwerkelijke marktaandeel van email clients verschillen per bron, maar voor een gemiddelde lijst met B2C e-mailadressen kun je van de volgende verhouding uitgaan:

  • 30-35% opent zijn e-mail op de app van Apple iPhone
  • 20-25% gebruikt Gmail (app- & web-based)
  • Outlook neemt ongeveer 10% van je lijst in beslag
  • Wat kleinere clients (Yahoo!, Google Android, Apple iPad) hebben een aandeel van maximaal 5%
  • De rest van de e-mail clients zijn elk goed voor minder dan 1% van je lijst. Daaronder vallen bijvoorbeeld Samsung Mail, Thunderbird, etc.

Wanneer je e-mails gaat testen, kun je het proces dus versnellen door je te focussen op de drie grootste spelers in de markt: Apple (iPhone, Mail en iPad), Gmail (app- & web-based) en Outlook (Outlook, Windows Mail, Hotmail). Door je op deze e-mail clients te focussen, zorg je dat jouw e-mails in de meeste inboxes gelijk zijn. Je hoeft je dus niet per sé druk te maken over de link die in Lotus Notes niet werkt zoals jij wilt.

Klein versus groot scherm

Hoe je ontvanger de e-mail die je hem stuurt ziet, is ook afhankelijk van zijn schermgrootte. Wordt jouw e-mail geopend op een 21-inch laptopscherm, een tablet of een telefoonschermpje? Op elke device kan je ontvanger dezelfde e-mail openen, maar een andere e-mail te zien krijgen. Natuurlijk is jouw e-mail op en top responsive, maar je zult toch rekening moeten houden met het feit dat er honderden verschillende schermgroottes beschikbaar zijn.

Je kunt voor het testen van je e-mail gemakshalve uitgaan van vier schermgroottes:

  • 27 inch monitorscherm
  • 15 inch laptopscherm
  • 10,5 inch tabletscherm
  • 6 inch telefoonscherm

Deze afmetingen zijn gebaseerd op de gemiddelde maten van de meest gebruikte devices: PC’s, laptops, tablets en telefoons. Naast deze devices zijn er enorm veel andere schermgroottes te bedenken (zoals ‘phablets’, of de populairder wordende curved monitor). Het is belangrijk om niet elke schermgrootte te testen, maar je te focussen op de meest populaire devices. Hoe jouw e-mail op bepaalde schermen wordt vertoond, ligt namelijk niet alleen aan jouw responsive code, maar vooral ook hoe verschillende e-mail clients hiermee omgaan.

Renderen van elementen

De laatste factor, maar zeker niet te verwaarlozen, is het renderen van verschillende elementen. Zo staat Gmail er bijvoorbeeld om bekend dat het hyperlinks standaard op blauw underlined vertoont, en heeft de Word-engine van Outlook soms problemen met de plaatsing van afbeeldingen.

Vooral afbeeldingen vallen vaak ten deel aan slechte rendering. Doordat veel ontvangers afbeeldingen standaard blokkeren, moet de inbox provider de afbeeldingen later ophalen en laden. Daardoor lijkt je e-mail op het eerste gezicht vaak ‘kapot’. Daarnaast zijn dynamische afbeeldingen daardoor lastig in te laden: data moet naderhand worden opgehaald en dat kan even duren. Een goede oplossing voor dit probleem is het werken met alt-tags: alternatieve tekst, wanneer je afbeelding niet getoond wordt.

De introductie van dark mode

Sinds de komst van dark mode is er een nieuwe uitdaging voor e-mail rendering ontstaan. Dark mode stelt de ontvanger in staat om van jouw e-mail een donkere variant te laten vertonen door zijn e-mail client. Kort gezegd zorgt het ervoor dat detecteerbare lichte en donkere kleuren (in je e-mail HTML of stylesheet) worden vervangen door de tegenovergestelde tint. Dat betekent ook dat wanneer je bijvoorbeeld je logo in een .jpeg-bestand hebt (met witte achtergrond), je header wel donker wordt, maar je logo een witte achtergrond behoudt.

Al met al is email rendering een complex verhaal. Kom jij er nou niet over uit waarom jouw e-mails niet getoond worden zoals jij wilt? Neem dan eens contact op met onze template-specialisten!