Waarom ziet e-mail er op iedere e-mailclient anders uit?

Het ontwikkelen van een universele e-mailtemplate is complex. Iedere client verwerkt de HTML en CSS op een iets andere manier. Wat er geweldig uitziet in één e-mailclient, kan er in een andere client volledig anders uitzien.

Hoewel ontwerpers en ontwikkelaars van e-mail hun code zorgvuldig - en met de nodige correcties voor specifieke clients - hebben samengesteld, zullen e-mailclients HTML en CSS aanpassen tijdens het verwerken ervan. Dit kan ertoe leiden dat de e-mailclient code verwijdert, wijzigt of zelfs toevoegt aan de originele HTML en CSS. Met alle gevolgen van dien.

E-mail: what you see is not what you got

Wanneer een e-mail via de ESP (Email Service Provider) naar de inbox van de ontvanger reist, doorloopt deze verschillende fasen waarin automatisch wijzigingen in de code kunnen worden aangebracht. Het resultaat, de code die zichtbaar wordt voor de ontvanger, noemen we ‘verwerkte code’.

Het proces van pre-processing van e-mail

Voordat de HTML van een e-mail in de inbox van de beoogde ontvanger komt, geeft de client de HTML door aan een zogenaamde pre-processor. Deze: verwijdert alle code die gevaar kan opleveren en converteer zo de originele e-mailcode naar een HTML-versie die veilig kan worden weergegeven. De pre-processor verwijdert bijvoorbeeld (een groot deel van de) javascript, onjuiste of niet-herkende tags en externe referenties. In sommige gevallen worden er zelfs tags of codefragmenten toevoegen om de e-mailcode klaar te maken voor de volgende stap: de rendering-engine.

Rendering engine vertaalt code in een visuele e-mail

De rendering engine vertaalt de verwerkte HTML in een visuele en interactieve weergave, oftewel de e-mail die de ontvanger op het scherm ziet. Hier bevindt zich de tweede oorzaak waarom e-mail er op verschillende clients anders uitziet. Er is namelijk een zeer breed scala aan rendering engines beschikbaar. De ene biedt een uitstekende ondersteuning voor alle hedendaagse webstandaarden (zoals WebKit, gebruikt door o.a. Apple Mail, Outlook for Mac en Android), terwijl een andere engine enkel beperkte HTML- en CSS-ondersteuning biedt (Microsoft Word wordt als engine gebruikt door de meest Windows Outlook-clients). Je ziet dat voor bijvoorbeeld Outlook verschillende engines gebruikt worden, gebaseerd op het besturingssysteem. En binnen de rendering engines zijn er natuurlijk nog verschillende versies met ieder hun mogelijkheden en beperkingen.

De verwerkte HTML kan er dus op iedere e-mailclient totaal anders uitzien. Het resultaat: de met zorg ontworpen e-mailtemplate ziet er anders uit op iedere e-mailclient. Omdat dit voor iedereen een zeer ongewenst resultaat is, groeien de e-mailclients wel steeds meer naar elkaar toe. Maar met name de oudere (Outlook) clients vormen een ware uitdaging voor de hedendaagse ontwikkelaar.

In deze E-mail CheatSheet staat een overzicht van de meestvoorkomende problemen met e-mail, en de oplossingen.

(bron: Litmus)