Waarom je e-mail er anders uitziet in Gmail, Outlook of op een telefoon

De e-mail die je in de editor ziet, is niet precies wat elk contact ziet. Elke mailbox (Gmail, Outlook, Apple Mail, de mailapp op een telefoon) bepaalt zelf hoeveel van je e-mail hij laat zien en hoe hij hem weergeeft, en ze doen dat niet allemaal hetzelfde. Er is dan niets mis met je e-mail, en het meeste kun je vanuit Leat niet uitzetten. Wat je wel kunt doen, is je e-mail zo ontwerpen dat het niet uitmaakt.

Dit zijn de verschillen waar merchants het vaakst tegenaan lopen, en wat je er per stuk aan doet.

Gmail kapt lange e-mails af

Gmail kort een e-mail in zodra de code erachter te groot wordt, rond de 100 KB, en sluit af met een link zoals "Volledig bericht weergeven". Alles na dat punt staat er nog, en een contact dat op de link klikt, ziet de rest. Andere mailboxen doen dit niet, dus dezelfde e-mail kan er in Outlook compleet uitzien en in Gmail afgekapt zijn.

Het gaat om de code achter de e-mail, niet om de foto's. Afbeeldingen worden apart geladen, dus een foto weghalen helpt nauwelijks. Wat een e-mail zwaar maakt:

• veel secties, kolommen en blokken
• veel tekst met losse opmaak: verschillende lettertypen, groottes en kleuren binnen één blok
• veel lege regels en witruimte
• veel links en knoppen

Een testmail is iets lichter dan de echte. Als je de campagne verstuurt, wordt elke link aangepast zodat we klikken kunnen tellen, en daardoor wordt elke link langer. Een test die er net in past, kan bij de echte verzending alsnog worden afgekapt.

Zo maakt het niet uit:

• Zet je belangrijkste boodschap en je belangrijkste knop bovenaan.
• Zet de tag Webweergave ook bovenaan, zodat een contact van wie de mailbox de e-mail inkort, hem helemaal in de browser kan openen. Lees Je hele e-mail in de browser bekijken met Webweergave.
• Gaat een e-mail over meerdere onderwerpen, overweeg dan om er 2 e-mails van te maken.
• Wil je er een korter maken, voeg dan eerst tekstblokken die na elkaar komen samen en haal lege regels en witruimte weg, voordat je afbeeldingen weghaalt.

Afbeeldingen laden niet altijd

Sommige mailboxen, vooral Outlook en veel zakelijke mailboxen, laden afbeeldingen pas als de lezer daar toestemming voor geeft. Tot die tijd ziet het contact een lege plek, of de Alt-tekst van de afbeelding.

• Vul bij elke afbeelding de Alt-tekst in met wat er op de afbeelding staat: "Openingsactie: gratis tas bij je eerste aankoop", niet "poster.png".
• Zet informatie die een contact nodig heeft nooit alleen in een afbeelding. Openingstijden, de actie, het adres en data horen in een tekstblok, ook als ze al op de poster staan.
• Een ontwerp dat uit één grote afbeelding bestaat, is het meest kwetsbaar. Als afbeeldingen geblokkeerd zijn, is het leeg.

Donkere modus verandert je kleuren

Veel contacten lezen hun mail in donkere modus, en de meeste mailapps kleuren je e-mail dan om. Sommige laten hem zoals hij is, andere maken lichte achtergronden donker en donkere tekst licht, en hoe ver ze daarin gaan verschilt per app en per telefoon. Je kunt dit niet uitzetten in de editor.

• Een logo met donkere tekst op een transparante achtergrond kan wegvallen tegen een donkere achtergrond. Gebruik een versie met een eigen lichte achtergrond, of een logo dat op allebei werkt.
• Tekst op een gekleurde achtergrond blijft vaker leesbaar dan heel lichtgrijze tekst op wit.
• Stuur jezelf een test en open hem op je telefoon met donkere modus aan.

Outlook op Windows

De Outlook-desktopapp op Windows ondersteunt minder dan elke andere mailbox.

• Achtergrondafbeeldingen van een sectie worden niet getoond. Outlook laat dan de Achtergrondkleur van de sectie zien, dus kies altijd een kleur waarop je tekst leesbaar is.
• Merklettertypen en webfonts worden niet geladen, en Outlook toont een standaardlettertype. Je e-mail blijft goed leesbaar, alleen niet in je eigen lettertype.
• Sommige versies tonen alleen het eerste beeld van een GIF. Zorg dat dat eerste beeld op zichzelf ook werkt.

Lettertypen

Gmail en Outlook laden geen webfonts en ook niet je eigen merklettertypen. Dat zie je in de lettertypekiezer in de editor: lettertypen onder Werkt in elke inbox zien er overal hetzelfde uit, en bij lettertypen onder Merklettertypen en Webfonts staat "Laadt niet in Gmail of Outlook".

Kan een mailbox een lettertype niet laden, dan toont hij een standaardlettertype, waardoor regels anders kunnen afbreken en een kop langer of korter uitvalt dan in de editor. Gebruiken de meeste van je contacten Gmail, kies dan voor tekst die er goed uit moet zien een lettertype onder Werkt in elke inbox. Laat in elk geval wat ruimte over in koppen en knoppen, in plaats van tekst precies op de breedte te passen.

Video

E-mail kan geen video afspelen. Een blok Video toont een afbeelding die de video opent als een contact erop klikt. Bij een link naar YouTube of Vimeo komt die afbeelding uit de video zelf. Bij elke andere link zien contacten een eenvoudige placeholder. Gebruik in dat geval een blok Afbeelding met je eigen stilstaand beeld en link dat naar de video.

Telefoons

De meeste contacten lezen hun mail op een telefoon. Daar worden de kolommen van een sectie onder elkaar gezet (tenzij je Kolommen stapelen op mobiel voor die sectie uitzet) en wordt de e-mail een stuk langer om doorheen te scrollen.

• Bekijk in de editor de Mobiele voorbeeldweergave en niet alleen het desktopvoorbeeld.
• Met Verbergen op mobiel en Verbergen op desktop laat je een blok of sectie op het ene scherm wel zien en op het andere niet. Een paar mailboxen negeren deze instellingen en tonen allebei, dus gebruik ze niet voor iets dat er dubbel verkeerd uitziet.

De regel naast het onderwerp

Mailboxen tonen een korte regel tekst naast of onder het onderwerp. Die stel je zelf in onder Instellingen → Algemeen → Voorbeeldtekst. Laat je hem leeg, dan pakt de mailbox de eerste tekst die hij in je e-mail vindt, en dat is vaak niet wat je zelf zou kiezen.

Controleren voordat je verstuurt

Geen enkel voorbeeld laat precies zien wat elke mailbox doet, dus controleer op meer dan één plek:

• Open de e-mail in Webweergave om het hele ontwerp van boven tot onder te zien.
• Stuur jezelf een test en open hem in de mailbox die je contacten het meest gebruiken, op een telefoon en op een computer. Controleer zo mogelijk een Gmail- en een Outlook-adres.
• Een testmail vanuit de editor krijgt "[TEST]" voor het onderwerp en geeft de voucher of cadeaukaart uit de e-mail niet uit. Wil je alles precies zien zoals een contact het krijgt, stuur de campagne dan naar een kleine lijst met alleen jezelf erop. Lees Een goede testcampagne versturen.