Hoewel onze templates ontworpen zijn om er goed uit te zien bij alle mailproviders, zijn er enkele problemen met het weergeven van campagnes die kunnen opduiken wanneer een contact een HTML e-mail in Outlook bekijkt. Vooral bij de versies van 2007, 2010 en 2013 komt dit vaak voor. Dit komt omdat deze 3 versies van Outlook, Microsoft Word gebruiken om e-mails weer te geven die beperkte ondersteuning bieden voor HTML en CSS.
In dit artikel zullen we de veel voorkomende weergave problemen bespreken die onze gebruikers soms ondervinden wanneer hun mails in Outlook worden geopend en zullen we wat tips geven om dit op te lossen.
Marges worden niet juist weergegeven
Alle versies van Outlook (behalve Outlook.com) en Gmail ondersteunen geen marges. In plaats daarvan raden we aan de 'Plaatshouder' widget te gebruiken:
Je kunt ook met de 'padding' gebruiken om ruimte te creëren rond je contentblokken. 'Padding' wordt ondersteund in elke Outlook en andere populaire mailproviders. Tevens kun je 'padding' aan een contentblok toevoegen door op het blok te klikken en vervolgens in het menu te scrollen naar 'padding'. Het is belangrijk om bij het instellen van de 'padding' mobiele weergaves in ook in acht te nemen.
De lijnhoogte wordt niet consistent ondersteund
Outlook 2007, 2010 en 2013 en Office 365 ondersteunen niet consistent de lijnhoogte. Sommige versies van Outlook ondersteunen de procentuele waarde van regelhoogte (bijvoorbeeld 140%), terwijl andere een 'heel' getal ondersteunen (bijvoorbeeld 4). Als je een volledig nieuwe campagne maakt en je eigen CSS schrijft, raden we aan om beide waarden op te geven. Als je het drag-en drop systeem gebruikt, wordt dit automatisch voor je ingesteld.
Tekst uitlijning
Outlook ondersteunt de tekst uitlijning 'Rechtvaardigen' niet. Helaas is er geen oplossing om Outlook deze uitlijning te ondersteunen.
Afbeeldingen lijken vervormd
Outlook verkleint afbeeldingen die 1.000 of meer pixels breed zijn niet. In plaats daarvan wordt de afbeeldingen op ware grootte weergegeven, waardoor de breedte van je template groter wordt en vervormd raakt. We raden aan om afbeeldingen te gebruiken die tussen de 400 en 650 pixels breed zijn.
GIF's worden weergegeven als afbeeldingen
In Outlook 2007, 2010 en 2013 worden geen animaties weergegeven. In plaats daarvan tonen ze alleen het eerste frame. Als je GIF een aanbieding, headline of 'call to action' heeft, zorg er dan voor dat deze in het frame is opgenomen. Wil je weten hoe je een GIF'je toevoegt aan je mail, klik dan hier.
Dubbele knoppen
Mailproviders zoals Gmail, Apple mail en Yahoo geven de stijl van knoppen weer met normale CSS en HTML. Aangezien Outlook dit niet doet, is er een oplossing bedacht door ActiveCampaign. Met de 'Rand', 'Verhouding van de rand' en 'Aangepaste breedte' van de knop, kun je ervoor zorgen dat deze correct wordt weergegeven.
Het is wel zo dat als de mail wordt doorgestuurd via de 'forward' knop of als de mail wordt omgeleid door een Windows- of Exchange-server, dan wordt deze correctie gelezen als een geldig HTML element wat resulteert is een dubbele knop.
Helaas is er momenteel geen oplossing om dit te voorkomen. Om dit te omzeilen zou je een afbeelding van een knop kunnen maken met behulp van een tool (zoals Da Button Factory) en die uploaden in de campagne, zoals je ook met een normale afbeelding doet. Vervolgens kun je een link toevoegen aan de afbeelding zodat je wordt omgeleid naar de gewenste URL als je op de afbeelding klikt.
Gebroken tekst in de knoppen
Knoppen met een gebroken test of een tekst die in een tweede regel is opgesplitst zijn te wijten aan een issue met de rendering van Outlook. Om dit probleem te voorkomen, kun je het beste de opvulling voor je knop vergroten tot meer dan de lettergrootte. Als het probleem zich voor blijft doen dan raden we aan een afbeelding van je knop te maken en die in plaats daarvan te gebruiken (zie de uitleg bij 'Dubbele knoppen').
Knoppen die een verkeerd lettertype weergeven
Het kan voorkomen dat Outlook een ander lettertype (Times New Roman) weergeeft dan waarvoor jij hebt gekozen. Dit wordt veroorzaakt doordat er aan het begin en/of eind van de knoptekst een spatie wordt toegevoegd. Om dit te voorkomen raden we aan de spatie te verwijderen. Als dat niet werkt dan kun je een nieuwe knop maken of een afbeelding van een knop maken en deze in je campagne plaatsen (zie de uitleg bij 'Dubbele knoppen').
Achtergrondafbeelding wordt niet weergegeven
Achtergrondafbeeldingen die niet worden weergegeven, is een probleem dat bij veel mailproviders voorkomt. We raden aan een reservekleur op te geven voor het geval je e-mail wordt weergegeven in een versie van Outlook die geen achtergrondafbeeldingen ondersteunt.
Dit is alleen van toepassing als je een e-mail opmaakt in HTML, het drag-en drop systeem ondersteunt geen achtergrondafbeeldingen.