Niet iedereen heeft zijn e-mailclient zo ingesteld, dat afbeeldingen van een e-mail automatisch worden geladen. Hoe zorg je er dan voor dat jouw e-mailbericht toch direct duidelijk en leesbaar op het beeldscherm van de ontvanger verschijnt? Als je bij het opmaken van de HTML rekening houdt met een aantal uitgangspunten, is dit niet zo moeilijk. Ik vertel je graag hoe je dat kunt doen!
Gebruik van Alt-teksten
De aandacht die jouw e-mail krijgt, is kort. Als de eerste aanblik niet bevalt, wordt de e-mail niet verder gelezen. Het is dus van belang dat deze eerste aanblik aantrekkelijk is. En dat de e-mail content direct leesbaar is. Maar het is ook een gegeven dat afbeeldingen vaak niet direct zichtbaar zijn bij veel e-mailclients; de gebruiker moet zelf aangeven of die afbeeldingen geladen mogen worden. Toch hoeft dit geen probleem te zijn, door afbeeldingen een relevante Alt-tekst te geven en deze te stylen middels inline CSS worden berichten toch optimaal weergegeven.
Wat doe je dan?
Stel, je hebt onderstaande e-mailnieuwsbrief ontworpen. Dit is wat je wilt communiceren:
Als de afbeeldingen niet worden geladen ziet je content er bedroevend minder aantrekkelijk uit:
Verbeterd resultaat met Alt-teksten “in style”
Door het toevoegen van CSS styles op de Alt-teksten en door de tabelcellen van de juiste hoogte en kleur te voorzien, is de weergave eenvoudig te verbeteren. De mailing ziet er meteen een stuk aantrekkelijker uit, wat doorlezen bevordert. En dat leidt logischerwijs tot meer aandacht en conversie.
Hoe pas je dit toe?
Velen weten wel hoe je een table cell voorziet van een achtergrondkleur en de afbeeldingen en table cells voorziet van de juiste afmeting. Maar hoe zorg je er voor dat de alt-teksten netjes worden weergegeven?
Dit wordt gedaan door de font-style definities in de <img /> tag te zetten:
De size, color en family dient te worden aangepast aan de kleurstelling die je wilt hanteren voor de nieuwsbrief. Wil je de alt-tekst horizontaal en verticaal in het midden hebben staan? Zet dan in de CSS de tekst align op center (‘text-align:center;’). Zet de line-height in de image tag (<img>) op dezelfde hoogte als de hoogte van de afbeelding zelf. Zoals in bovenstaand voorbeeld: de height op de table cell is 58. Dan wordt de regelafstand op de image tag ook 58 (line-height: 58px;).
Dit line-height ‘trucje’, om de tekst vertikaal te centreren, werkt alleen wanneer de tekst op één regel past.
Is je afbeelding een link? Definieer dan in de anchor tag (<a>) ook de juiste text-decoration.
Helaas, niet voor alle e-mailclients
Het stylen van Alt-teksten werkt helaas niet in alle e-mailclients. Maar laat dat je niet tegenhouden! Bovenstaande aanpassingen zijn een kleine moeite voor de clients die de styling wel ondersteunen.
En om het makkelijk te maken, volgt hier een overzicht van e-mailclients waar het stylen van Alt-teksten probleemloos, minder goed en helemaal niet werkt.
Werkt probleemloos
• (alle versies) Mozilla Firefox browser
• Gmail (Mozilla Firefox)
• Me.com (Mozilla Firefox)
• Hotmail (Mozilla Firefox)
• Yahoo (Mozilla Firefox)
• Tele2 (Mozilla Firefox)
• AOL (Mozilla Firefox)
• Online (Mozilla Firefox)
In Mozilla Firefox wordt zowel de alt-tag als de vormgeving meegegeven.
• Google Chrome (20) browser (alle versies)
• Gmail (Google Chrome)
• Me.com (Google Chrome)
• Hotmail (Google Chrome)
• Yahoo (Google Chrome)
• Tele2 (Google Chrome)
In Google Chrome wordt zowel de alt-tag als de vormgeving meegegeven. Mits de vormgeving er niet voor zorgt dat de alt-tag buiten de breedte van de afbeelding valt (over één regel).
Tekst wordt linksboven uitgelijnd
• Google Andoid
• Apple iPad
• Apple iPhone
• Symbian
• Mozilla Thunderbird 3
• Mozilla Thunderbird Latest
Wel kleur, geen uitlijning en andere styling
• Telfort (Mozilla Firefox)
• Microsoft Internet Explorer browser(alle versies)
• AOL (Internet Explorer)
• Gmail (Internet Explorer)
• Hotmail (Internet Explorer)
• Yahoo (Internet Explorer)
• Lotus notes 8 en 8.5
• Microsoft Outlook (200- 0 -2 en -3)
• Online (Internet Explorer)
• Telfot (Internet Explorer)
• Tele2 (Internet Explorer)
Andere werkwijze
• Microsoft Outlook 2007 & 2010
In Outlook 2007 en 2010 wordt de alt-tag wel weegegeven. Deze wordt geplaatst achter de standaard tekst:
“Klik hier met de rechter muisknop als u afbeeldingen wilt downloaden. Ter bescherming van uw privacy is deze afbeelding niet automatisch van internet gedownload.”
Vervolgens wordt op de volgende regel de alt-tag weergegeven. Dit is alleen te zien als de hoogte en de breedte van de afbeelding deze teksten toelaten qua ruimte.
Werkt helemaal niet
• Safari (in ieder geval de hele versie 5)
• Gmail (Safari)
• Me.com (Safari)
• Hotmail (Safari)
• Yahoo (Safari)
• Tele2 (Safari)
Tips voor een aantrekkelijke e-mail
Hoe kun je zelf zorgen dat de e-mails direct aantrekkelijker en duidelijker worden voor je klant? Hier volgen enkele tips:
1. Definieer voor elke table cell en elke afbeelding de juiste breedte en hoogte.
Hierdoor blijft de content in de juiste proporties getoond worden; je design stort niet in elkaar, maar blijft overeind.
2. Zorg dat je alt-teksten van styles voorziet om zo de weergaven te optimaliseren.
Hierdoor is je boodschap toch zichtbaar, ook als de afbeeldingen niet meteen getoond worden.
3. Definieer voor elke table cell een passende achtergrondkleur.
Dit voorkomt dat er ‘gaten’ vallen waar de afbeeldingen niet zijn geladen. Het geheel blijft er netjes uitzien. Let bijvoorbeeld op de grijze balk onder het logo.
4. Gebruik voor belangrijke informatie, zoals de Call to Action, liever tekst in plaats van een afbeelding.
De Call to Action moet als eerste de aandacht trekken. Dit is immers de reden dat je de mailing verstuurd. Als de Call to Action een afbeelding is welke niet wordt weergegeven, heeft de mailing dus eigenlijk weinig zin…. Als de Call to Action is opgemaakt als tekst, is deze per definitie zichtbaar. Vergelijk het voorbeeld hierboven: de gele Call to Action is losgemaakt van de afbeelding rechts.
Succes!
