Ontwerpen

Zo maak je een mobielvriendelijke e‑mailhandtekening

Niet minder dan 85% van alle smartphone-gebruikers checkt e‑mails op zijn of haar telefoon. En meer dan de helft (58%) zegt zelfs dat het het allereerste is wat ze in de ochtend doen. Op vrijwel iedere smartphone is wel een versie van Gmail, Outlook of Apple Mail te vinden. 

Die apps zetten de tekst van jouw e‑mail moeiteloos om in een versie die goed te lezen is op mobiele apparaten. Dat komt omdat e‑mails doorgaans bestaan uit platte tekst, met af en toe hier en daar een afbeelding.

Maar: heb je er ooit bij stilgestaan hoe jouw e‑mailhandtekening wordt vertoond op mobiele apparaten?

Wat kan er fout gaan?

Eerlijk is eerlijk; er komt nogal wat kijken bij het optimaliseren van de mobiele prestaties van je e‑mailhandtekening. Zo kun je bijvoorbeeld niet zomaar in alle vrijheid kolommen gebruiken om je contactinformatie, website en social media-links mee te structureren. Dat werkt namelijk iets anders als bijvoorbeeld op je website: als je op desktop twee blokken naast elkaar hebt, worden die op mobiel vaak netjes onder elkaar getoond. Voor e‑mailhandtekeningen is dat helaas niet het geval; e‑mailprogramma’s zijn een stuk eigenwijzer.

En zo zijn er nog veel andere praktijkvoorbeelden te noemen waarin e‑mailhandtekeningen ongewenste dingen doen op mobiele apparaten. Van afgebroken woorden en zinnen op de gekste plekken tot onleesbare afbeeldingen, en ga zo nog maar even door. En wat dacht je bijvoorbeeld van de razendpopulaire ‘Donkere modus’?

Waar moet je allemaal rekening mee houden?

Onderschat het belang van de mobiele optimalisatie van je e‑mailhandtekening dus niet. Voorkom dat je handtekening onleesbaar of onbruikbaar wordt. Het gaat meestal mis op één of meer van de volgende categorieën:

  • Structuur
  • Afbeeldingen
  • Donkere modus
Lampje

Zeker weten dat het goed gaat? Maak het jezelf makkelijk. E‑mailhandtekeningen van Estampida werken altijd en overal. Probeer 30 dagen gratis!

Kies een logische structuur

De structuur van je handtekening gaat over hoe je verschillende blokken en elementen plaatst in verhouding tot elkaar. In je e‑mailhandtekening heb je slechts beperkte ruimte, zeker op mobiel.

Pas op met veel kolommen

Structureer je je informatie in meerdere kolommen? Probeer het aantal tekstkolommen dan te beperken tot 2, maximaal 3. Want als je met kolommen werkt, plaatsen mobiele apparaten deze kolommen níet netjes onder elkaar. Dat werkt dus anders dan bij een website. Daardoor loop je het risico dat je zinnen of woorden op ongewenste plekken afgebroken worden, en kan het rommelig worden. Je kunt natuurlijk wel meerdere iconen naast elkaar plaatsen.

Voorbeeld: een handtekening met 4 kolommen op desktop ziet er prima uit…

…maar wordt op mobile een stuk onoverzichtelijk

Less is more

Je wilt zoveel mogelijk waardevolle informatie met je ontvanger delen. Let wel: stop niet té veel onderdelen in je handtekening. Less is more! Twijfel je over wat je allemaal wel en niet in je handtekening mee moet nemen? Bekijk dan deze checklist even als extra hulpmiddel.

Leesbare tekst

Zorg ervoor dat de grootte van je tekst niet te klein, maar ook niet te groot is. Zeker met grote tekst heb je het risico dat, net als bij te veel kolommen, je woorden en zinnen op ongewenste plekken worden afgebroken. Houd hier ook rekening mee wanneer je tekst verwerkt in afbeeldingen in je e‑mail handtekening. 

Gebruik je een banner? Test dan de leesbaarheid wanneer je je banner afschaalt naar 320px breed.

Zo optimaliseer je je afbeeldingen

Minder pixels, en een verticale verhouding in plaats van een horizontale; je afbeeldingen worden soms anders vertoond op mobiel dan op desktop. Met deze tips zorg je voor de optimale werking van afbeeldingen op mobiel.

Maximale breedte

Op desktop heb je in de breedte meer pixels dan op mobiel. Anderzijds heb je op mobiel juist weer vaak meer pixels in de hoogte van op desktop. Ons advies is om een maximale breedte van 600px breed aan te houden, en de hoogte niet hoger dan de helft van de breedte te maken. Als je je e‑mailhandtekening ook gebruikt als een banner, houd je dus een hoogte van maximaal 300px, bij een banner van 600px breed. 💡 Banners van Estampida hebben de perfecte afmetingen en werken altijd!

Pas op met tekst in afbeeldingen

Gebruik je afbeeldingen bijvoorbeeld als banner, of om andere tekstuele informatie in te verwerken? Voeg hier dan geen kleine teksten of gegevens aan toe, want die kunnen onleesbaar worden. Plaats belangrijke informatie zoals disclaimers dus gewoon als losse tekst in je handtekening. Tip: test de leesbaarheid van je afbeelding dus ook bij een breedte van maximaal 320px breed.

Voorbeeld: op desktop zijn beide regels in de banner onder de handtekening goed te lezen…

…maar zodra deze wordt verkleind naar een mobile-proof formaat, is dat niet meer het geval:

Voeg afbeeldingsverwijzingen toe

Voorkom dat je afbeeldingen als bijlage worden meegestuurd, in plaats van netjes als onderdeel van je handtekening worden vertoond. Want niets is zo irritant als een bestand van je logo of profielfoto die per ongeluk in de bijlage belandt. Zorg ervoor dat je dat je banner ergens op het web staat, en dus een eigen url heeft. In je e‑mail banner verwijs je vervolgens, met die url, naar de locatie waar deze banner staat.

Lees ook deze blog voor onze best practices voor e‑mail banners.

Donkere modus

Donkere modus: het is je vriend, maar op het gebied van e‑mailhandtekeningen opmaken kan het ook je vijand zijn. Want op technisch vlak is het best een complex verhaal. 

Wist je dat maar liefst 82% van de smartphone-gebruikers weleens de donkere modus gebruikt? Ondanks de enorme populariteit ervan, gaan e‑mailprogramma’s hier op verschillende en dus onvoorspelbare manieren mee om. 

Helaas heb je hier niet altijd controle op. Toch kijken waar je rekening mee kunt houden? Probeer eens met het volgende te experimenteren.

Donkere afbeeldingen

Heb je een donker logo of gebruik je een donkere afbeeldingen? Die kunnen nog weleens wegvallen op een donkere achtergrond. Een afbeelding met transparante achtergrond is dus niet altijd de juiste oplossing. 

Er zijn verschillende manieren waarop je dit kunt voorkomen. 

  • Plaats je logo en/of tekst in een afbeelding met een witte, rechthoekige achtergrond. Eignelijk wordt het daar dus een kader van. Stel die achtergrond vervolgens in tot ongeveer 10 pixels rondom je afbeelding.
  • Gebruik je toch een logo met een transparante achtergrond? Voeg dan een witte rand rondom de contouren van je logo toe, of voeg een licht schaduweffect toe. 

Voorbeeld: zie hier een e‑mailhandtekening met een transparante achtergrond in zowel de profielfoto als in de iconen. Ze worden onzichtbaar in donkere modus…

…terwijl afbeeldingen met een witte achtergrond er goed uitzien:

Test je e‑mailhandtekening op mobiel

Zeker weten dat je e‑mailhandtekening ook op mobiel goed wordt getoond? Test hem dan! Stuur een e‑mail naar jezelf, maar vraag ook aan mensen die werken met een andere smartphone of e‑mailprogramma om je e‑mailhandtekening te testen, en hun ervaringen met je te delen. Er zijn ook een aantal tools die je een steuntje in de rug geven door je e‑mails te testen in verschillende e‑mail clients en devices, zowel in lichte als donkere modus. En vergeet dus ook zeker de Donkere modus niet!

Kijk bijvoorbeeld eens naar:

Altijd en overal de perfecte e‑mailhandtekening.

Geen zorgen willen maken over de mobiele weergave van je e‑mailhandtekening? Maak hem in Estampida. Probeer nu 30 dagen gratis!