Waar moet je rekening
mee houden?

E-mail Template specificaties

Ga je een nieuwe e-mail template ontwerpen? Houd dan rekening met specificaties en beperkingen die van toepassing zijn op e-mail templates. De belangrijkste punten hebben we even voor je onder elkaar gezet. Hou dit lijstje met punten ernaast als je jouw e-mail template gaan ontwerpen. Dan kom je niet voor verrassingen te staan.

Ik wil meer advies

Kom je er zelf niet helemaal uit? Of heb je een aantal beperkingen waar je tegenaan loopt? Vraag onze e-mail experts om eens mee te denken naar een passende oplossing!

Vertel mij meer

Desktop design

Wees vrij en uniek in jouw design. Mensen krijgen tientallen mailtjes per dag. Zorg ervoor dat jij eruit springt. Maar houd wel rekening mee een hoop randvoorwaarden. Want anders kun je nóg zo’n straks design hebben, als je mail niet goed binnenkomt heb je er alsnog niks aan.

Breedte

Een e-mail wordt op de desktop van een ontvanger niet over de gehele breedte van het beeldscherm getoond. Vaak bevat een inbox meerdere elementen die de e-mail versmallen. Daarom raden wij aan de e-mail smal te houden met een maximale breedte van 600 tot 650 pixels.

E-mail wordt op verschillende schermen in verschillende programma’s bekeken. Voor sommige ontvangers valt de rechterkant buiten beeld, voor anderen de onderkant. Het enige deel van je nieuwsbrief dat voor iedereen direct getoond wordt is de linker bovenhoek. Dit is de plek om je lezer te overtuigen de e-mail te lezen. Zorg dat je in deze hoek de lezer met nuttige informatie en wervende teksten verleidt. Plaats in deze hoek ook je logo of bedrijfsnaam, zodat de lezer direct ziet van wie de e-mail afkomstig is.

Pre-header (of Snippet)

Bovenaan een template plaatsen we een snippet, een link naar de online versie en een afmeldlink:

+ De snippet wordt getoond in de inbox en kan gebruikt worden als verlening van de onderwerpsregel
+ De “Lees online”-link biedt de lezer de optie om de e-mail in een internetbrowser te openen
+ De afmeldlink staat bovenin om ervoor te zorgen dat een lezer minder snel gebruik maakt van knoppen als “Ongewenste e-mail” of “Rapporteer als spam” in de e-mail client

Snippet
Verschillende e-mail clients tonen naast je onderwerpregel ook de eerste paar woorden in je e-mail voordat deze geopend is. Dit noemen we de snippet. Veel e-mail clients plaatsen deze tekst onder je onderwerpregel. Outlook laat deze tekst zien in de notificatie als je e-mail ontvangt.

Om gebruik te maken van de snippet dient er bovenin het design een mogelijkheid te zijn waar een zin geplaatst kan worden. Let op: deze zin dient als eerste element weergegeven te worden. Een logo of andere onderdelen uit de pre-header mogen pas na de snippet worden getoond.

Header & footer

De header is een vast element in het template. Neem in de header je logo op en eventueel andere huisstijlelementen of verwijzingen naar bijvoorbeeld social media. Wil je in de mailings gebruik maken van beeld? Dan kan je er ook voor kiezen om een headerafbeelding over de gehele breedte op te nemen in het design.

In de footer is er ruimte voor bedrijfs- en contactinformatie. Volgens de reclamecode van 2012 moet de lezer gemakkelijk contact met je op kunnen nemen vanuit de mailing. Daarnaast is er ruimte voor een optionele colofon en de links “Website”, “Reageren”, “Mijn gegevens”, “Aanmelden” en “Afmelden”. Ook is de footer een goede plek om je sociale netwerken te promoten.

Contentblokken

Contentblokken met tekst
Let er op dat je geen grote contentblokken met te veel tekst gebruikt. De gemiddelde ontvanger zit niet te wachten op lange verhalen, houd je tekst kort. Een handige methode om de juiste hoeveelheid te krijgen: breng je tekst terug tot het minimum. Schrap hiervan de helft. Maak gebruik van een “Lees meer” link of button om door te verwijzen naar het gehele artikel. Het voordeel hiervan is dat jij het klikgedrag van je lezer kan bekijken en hieruit kan concluderen wat ze interessant vinden. In je design kan je hier rekening mee houden. Ontwerp bijvoorbeeld blokken met bulletpoints, een rijtje titels onder elkaar die direct verwijzen naar de landingspagina of opvallende CTA buttons. Maar denk bijvoorbeeld ook aan het gebruik van multiblokken, dit zijn meerdere kleine contentblokken over de breedte van het template. Kies bijvoorbeeld aan een 50-50 verdeling, 33-33-33 of zelfs 25-25-25-25.

Call to action buttons
Een call to action button plaats je in elk tekstblok, deze button brengt de lezer naar de landingspagina toe. Ons advies is om hier niet alleen de tekst “lees meer” in op te nemen. Gebruik ook termen als “Bestel nu”, “Ondek de gehele collectie” of “Meld mij nu aan!”. Zo maak je jouw lezer nieuwsgierig naar de content op de landingspagina.

Dummylinks
Deze tekstlinks staan in elk artikel. Hiermee kan de lezer naar een landingspagina met meer informatie over die specifieke term. Dit houdt de nieuwsbrief kort en brengt de lezer naar de website. Neem in elk contentblok een dummylink op zodat wij kunnen herleiden hoe de tekstlinks eruit moeten zien.

Social share
Bij elk artikel staan social media-iconen. Deze verschijnen alleen bij een artikel als degene die de e-mail verstuurt zelf in het bericht aangeeft dat dit artikel gedeeld mag worden. Wanneer de lezer op een icoon klikt, deelt hij een gekozen link van het artikel in het door hem gekozen sociale netwerk. Dus hoewel het niet bij elk artikel gebruikt hoeft te worden, is het wel van belang de social share op te nemen in ieder blok om er gebruik van te kunnen maken. Je kunt kiezen voor de volgende sociale netwerken: Facebook, Twitter, LinkedIn en Google+.

Afbeeldingen

Achtergrondafbeeldingen
Wees voorzichtig met achtergrondafbeeldingen. Een achtergrondafbeelding is een afbeelding waar iets anders overheen staat. Binnen e-mail is er mogelijkheid voor één achtergrondafbeelding per blok. Een (bijvoorbeeld transparante) achtergrondafbeelding op een achtergrondafbeelding is dus niet mogelijk.

Gebruik je een afbeelding als gehele achtergrond van het template? Deze afbeelding zal zich als een tegeltje herhalen tot de hele achtergrond gevuld is. Gebruik dus een achtergrondafbeelding die er goed uitziet als hij zich steeds herhaalt.

Verhouding tussen afbeeldingen en tekst
In een ontvangen e-mail worden afbeeldingen niet altijd direct getoond. Zorg ervoor dat je boodschap ook duidelijk is zonder afbeeldingen. Tekst met opvallende koppen is hiervoor ideaal. Dit geldt met name voor de eerder genoemde linker bovenhoek van je e-mail, maar is ook op de rest van de e-mail van toepassing.

De afmeting van de afbeeldingen
In een e-mailtemplate staat de breedte van de afbeeldingen vast, de hoogte is variabel. Door altijd deze breedte aan te houden zorg je dat de uitlijning, ook op mobiel, netjes blijft. De afbeeldingen worden daarnaast altijd vierkant weergegeven. Wil je een afronding of een frame? Dit is eenvoudig toe te voegen aan de afbeelding in de Image Manager van MailPlus.

Een e-mail toont alleen lettertypes die de ontvanger op zijn computer heeft. Voor websites bestaan er manieren om dit te omzeilen, maar die werken niet in e-mail. Daarom maken we gebruik van een groep met lettertypes: een rij verschillende lettertypes die van voor naar achter worden nagelopen. Als de ontvanger het eerste lettertype heeft wordt die gebruikt, anders de tweede enzovoorts. De volgende groepen kunnen in het ontwerp gebruikt worden:

Arial, Comic Sans MS, Courier New, Georgia, Lucida Console, Lucida Sans Unicode, Palatino Linotype, Tahoma, Times New Roman, Trebuchet MS & Verdana

Wij adviseren een pixelgrootte tussen de 11 en de 14 pixels.

Mobiele breedte

De mobiele weergave is smaller dan de weergave op desktop. Een e-mail wordt op de meeste mobiele apparaten het beste weergegeven als deze 320 pixels breed is. Naast het desktop ontwerp ontvangen we dus ook graag een mobiel ontwerp zodat we kunnen herleiden hoe het template op een mobiel apparaat moet reageren.

Pre-header, header & footer

Pre-header
De elementen van de pre-header nemen vaak onnodig veel ruimte in op een mobiel apparaat waardoor ze de content naar onder duwen. Daarom adviseren wij om de onderdelen uit de pre-header niet weer te geven op de mobiele versie.

Header
In de header kan je er ook voor kiezen elementen weg te laten, zoals menu items of een inhoudsopgave. Je kan er ook voor kiezen de menu items onder elkaar weer te geven.

Footer
In de footer zijn, net als in de desktop versie, de servicelinks terug te vinden. In de mobiele versie kunnen deze onder elkaar geplaatst worden. Zorg er voor dat hier genoeg ruimte tussen de links zit, zodat de lezer niet per ongeluk de verkeerde link aantikt.

Contentblokken en afbeeldingen

Omdat e-mails op mobiel smaller zijn, veranderen we de indeling van de contentblokken en afbeeldingen voor optimale leesbaarheid. De onderdelen van het template kunnen op verschillende manieren in de mobiele weergave aangepast worden:

+ Tekstvlakken worden smaller. De lettergrootte zal gelijk blijven, maar de regels worden eerder afgebroken. Zo krijg je een smaller maar langer tekstblok
+ Twee elementen die naast elkaar staan, komen onder elkaar te staan. Hierbij komt de rechter onder de linker te staan. Dit kunnen twee smalle artikelen naast elkaar zijn, maar ook tekst en een bijbehorende foto
+ Delen van het ontwerp die op de desktop zichtbaar zijn kunnen op mobiel verborgen worden

Links
Een touchscreen is minder precies dan een muis. Zorg daarom dat je bij de mobiele versie genoeg ruimte tussen je links plaatst, zodat de gebruiker niet per ongeluk de verkeerde link aantikt. Maak je gebruik van buttons als link? Zorg dan dat deze buttons over de gehele breedte van het mobiele scherm lopen en minimaal 30 pixels hoog zijn. Dit in verband met het aanklikken met wijsvinger of duim door de ontvanger.

Afbeeldingen
Op mobiel worden de afbeeldingen:

+ Verkleind, de afbeelding zal dan in zijn geheel en naar ratio verkleind worden. Het is niet mogelijk om een deel van de afbeelding weg te laten vallen. Behalve als het een vaste afbeelding van het template betreft, die niet bewerkt wordt door de gebruiker. Denk daarbij bijvoorbeeld aan de headerfoto
+ Niet aangepast. Als een afbeelding op desktop minder breed is dan 320 px, zal er op mobiel niets met de afmeting van deze afbeelding gebeuren. Vergroten van de afbeelding naar 320px komt namelijk de kwaliteit van de afbeelding niet ten goede