Veel voorkomende mailweergave problemen met Outlook

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 'spacer/tussenruimte' widget te gebruiken:

mceclip0.png

Je kunt ook met de 'vulling' gebruiken om ruimte te creëren rond je contentblokken. 'Vulling wordt ondersteund in elke Outlook en andere populaire mailproviders. Tevens kun je 'vulling' aan een contentblok toevoegen door het contentblok te selecteren in het drag & drop systeem en op het tabblad 'opties' aan de rechterkant van het scherm te klikken. Het is wel belangrijk dat 'vulling' ervoor kan zorgen dat je inhoud smal lijkt wanneer de mail op een mobiel apparaat wordt bekeken.

mceclip1.png

 

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 & drop systeem, wordt dit automatisch voor je ingesteld.

 

Tekst uitlijning

Outlook ondersteunt de tekst uitlijning 'rechtvaardigen' niet.

mceclip2.png

Helaas is er geen fix om Outlook deze uitlijning te ondersteunen.

 

Afbeeldingen lijken vervormd

Outlook verkleint afbeeldingen die 1000 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 waardoor de randradius, opvulling en randen rond de knop correct weergeeft.

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')

 

Links die niet klikbaar zijn

Als het gaat om de uitlijning van afbeeldingen dan zal niet elke versie van Outlook die afbeeldingen op dezelfde manier weergeven. Als je een afbeelding in een tekstblok hebt staan met links op dezelfde regel als je afbeelding dan kunnen de links niet worden aangeklikt in Outlook 2007 en 2013.

Voorbeeld: Onderstaande tekst met een hyperlink kan bijvoorbeeld niet worden aangeklikt door de lezer als ze een van de Outlook versies gebruiken

Om dit te voorkomen raden we aan om de afbeelding uit het tekstblok te verwijderen en in plaats daarvan een afbeelding blok te gebruiken.

 

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 & drop systeem ondersteunt geen achtergrondafbeeldingen.

 

 

 

 

 

 

Was dit artikel nuttig?
Aantal gebruikers dat dit nuttig vond: 0 van 0