We hebben deze vragen over layoutmogelijkheden van 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?”

Hieronder vind je een overzicht met alle belangrijke lay-out verschillen in de top 5 van e-mailprogramma’s.

De e-mailclients en visuele layoutmogelijkheden

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:

• GIF-animaties
• Webfonts
• Ronde hoeken
• Kleurverloop
• Scrolling
• Hover
• Dark mode
• Formulierlayout

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

GIF-animaties

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.

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. Slechts één client biedt support voor webfonts: Apple Mail

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.

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.

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

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.

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 uitziet, 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.

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.

Kun jij hulp gebruiken bij het opzetten van een van deze layoutmogelijkheden van e-mailclients? Neem dan nu contact op om de mogelijkheden te bespreken.