Layoutmogelijkheden van e-mailclients

We hebben deze layoutvragen over e-mailclients vaak voorbij zien komen:

  • “Onze designer heeft iets bedacht, kan dat in deze mail?”
  • “Werkt deze GIF in Outlook?
  • “Kun je echt een formulier in e-mail zetten?”

Je komt met ons overzicht alle belangrijke layoutverschillen te weten, in de top 5 van e-mailprogramma’s.

De e-mailclients en visuele mogelijkheden

Vijf e-mailprogramma’s worden door meer dan 80% van de ontvangers gebruikt om e-mails te openen (zie ook Litmus). Op de eerste plaats Apple Mail met veruit het grootste marktaandeel (50%) én de meeste mogelijkheden. Webclient Outlook.com en e-mailprogramma Outlook zijn beperkt qua layout met een lager marktaandeel (10%). Daartussenin staan Gmail en “Gmail account with a non-Gmail-address” (GANGA) samen op de tweede plek (27%).

We vergelijken deze visuele mogelijkheden:

Visuele features afgezet tegen marktaandeel

We doen de vergelijking met indicatie in welke clients het werkt (groen) en wanneer niet (rood).

GIF-animaties

Voorbeeld GIF-animatie

Creatieve animerende visuals of een kort videofragment in je e-mail? Dat kan met GIF-animaties. Een aantal jaar terug was het nog de vraag in welke clients dit wel en niet werd ondersteund, maar inmiddels werken GIFs in alle clients. Houd de bestandsgrootte wel binnen de perken voor ontvangers die de mail niet via glasvezel openen.

Apple Mail
Gmail
GANGA
Outlook
Outlook.com

Webfonts

Wil je andere lettertypes in e-mail gebruiken dan bijvoorbeeld Arial, Helvetica of Georgia? Op websites zijn webfonts al een tijd gemeengoed. In e-mail is dat helaas zeker niet het geval. Er is slechts support voor webfonts één client: Apple Mail.

Apple Mail
Gmail
GANGA
Outlook
Outlook.com

Ronde hoeken

Ronde buttons, cirkelvormige actiebollen en afgeronde layoutblokken kunnen met “border-radius” gemaakt worden. Er is dan geen (extra) afbeelding voor nodig en kleur en tekst zijn eenvoudig te wijzigen. Dit wordt zelfs overal ondersteund behalve in Outlook. Overigens kunnen buttons daar wel met VML worden afgerond, maar in combinatie met andere elementen wordt dit snel omslachtig. Het is dan beter om een concessie te doen voor Outlook, waarbij bv. layoutblokken met rechte hoeken vormgegeven zijn.

Apple Mail
Gmail
GANGA
Outlook
Outlook.com

Kleurverloop

Een kleurverloop zoals in dit voorbeeld, van donker- naar lichtblauw, zagen we in e-mail voorheen alleen als afbeelding. Maar er is wel degelijk brede support om dit te doen met een kleurverloop als achtergrond en tekst die in de e-mail zelf aanpasbaar blijft voor de contentbeheerder. Het formaat verandert daarnaast mee met de styling op mobiel. Voor Outlook kun je terugvallen op VML of een egale achtergrond.

Apple Mail
Gmail
GANGA
Outlook
Outlook.com

Scrolling

Binnen e-mail kan een extra vlak scrollbaar worden. Een creatieve toepassing hiervan is de parallaxmail (zie Emailonacid), waarbij één element blijft staan tussen 2 lagen die doorscrollen (erachter en ervoor) en dit geeft een dynamische ervaring met veel engagement. Dit werkt zelfs prima op Apple en Gmail. Zoals vaak blijft Outlook helaas achter, waar de scrollende content onder elkaar gezet zal worden. 

Apple Mail
Gmail
GANGA
Outlook
Outlook.com

Hover

Wil je een leuk visueel effect als je met je cursor over iets heen gaat? Afbeeldingen en tekst kunnen bij zo’n ‘hover’ veranderen. Dit kan bijvoorbeeld met doorzichtigheid, kleur, een animatie starten, een andere afbeelding tonen, etc. Op ’touch devices’ wordt een hover dan een extra klik. Dit kan zowel in Gmail als in Apple. Andere clients houden dan alleen een gewone klik naar bijvoorbeeld een landing page.

Apple Mail
Gmail
GANGA
Outlook
Outlook.com

Dark mode

Om een e-mail goed in donkere modus te tonen is “dark mode”-ondersteuning nodig door de e-mailclient. Dan mag je bepalen welke (donkere) achtergrondkleur en (lichte) tekstkleur worden gebruikt. Dan weet je dat de e-mail er goed uit ziet, in plaats van dezelfde als lichte modus, of automatische kleurkeuze van de e-mailclient.
Alleen Apple Mail doet het hier goed. Andere clients verzinnen zelf de kleuren, waarbij je moet afwachten of dat goed leesbaar is.

Apple Mail
Gmail
GANGA
Outlook
Outlook.com

Formulierlayout

Er wordt bijna geen bekendheid gegeven aan de mogelijkheid om formulieren in e-mail te zetten, maar dit is gewoon mogelijk. Bij sommige retailcampagnes worden bijvoorbeeld reviewformulieren in e-mail ingezet: “Wat vind je van je bestelling? Geef hier een cijfer en schrijf een reactie”. Deze formulieren kunnen zelfs vanuit e-mail ingevuld en verzonden worden. Dit werkt zowel in Apple Mail als in Gmail, met het verschil dat op Apple velden en buttons er totaal anders kunnen uit kunnen zien en Gmail alleen wat basisstyling ondersteunt.

Apple Mail
Gmail
GANGA
Outlook
Outlook.com