Banner in je e-mailhandtekening: formaten, bestandsgrootte en best practices

De banner is het deel van een handtekening dat een tijdelijke boodschap draagt: een evenement, een vacature, een nieuw product. De technische beperkingen lijken op die van het logo, maar de ontwerpeisen zijn die van een advertentie die één seconde wordt bekeken.

De afmetingen

De breedte van de banner wordt begrensd door die van de handtekening, en die wordt op haar beurt begrensd door mobiele schermen.

Een hogere banner dringt het bericht naar de achtergrond en oogt als een advertentieblok. Een banner die smaller is dan de handtekening zorgt voor een lelijke visuele verspringing: stem de breedte af op die van het blok.

Net als bij het logo exporteer je op het dubbele — 1.200 × 200 px voor een weergave van 600 × 100 — en leg je de afmetingen vast met de HTML-attributen width en height; anders toont Outlook de afbeelding op haar oorspronkelijke grootte. De details staan in HTML-e-mailhandtekening.

De bestandsgrootte

Blijf onder de 60 KB voor een statische banner en onder de 150 KB voor een geanimeerde GIF.

Het gaat niet om bandbreedte, maar om hoe de weergave overkomt. Afbeeldingen in een e-mail laden na de tekst: een zware banner verschijnt te laat, en de ontvanger ziet eerst een leeg kader onder de handtekening. Dat wekt de indruk van een slordig opgebouwd bericht.

Verliesvrije PNG-compressie halveert de bestandsgrootte meestal zonder zichtbaar verschil. Voor een fotografisch beeld is JPEG op kwaliteit 80 een goed compromis.

De ontwerpregels

Eén boodschap. Dit is de regel die het vaakst wordt overtreden. Een banner die een beurs én een whitepaper én een vacature aankondigt, brengt geen van drieën over. Heb je drie boodschappen, draai dan drie campagnes na elkaar.

Een korte kop. Vijf tot acht woorden. Op de werkelijke weergavegrootte — vaak verkleind door de mailclient — wordt een lange kop onleesbaar.

Een duidelijke actie. ‘Inschrijven’, ‘Bekijk de vacatures’, ‘Download het rapport’. Het label moet zeggen wat er gebeurt als je klikt.

Voldoende contrast. De banner wordt in een seconde bekeken, soms buiten op een telefoonscherm. Donkere tekst op een lichte achtergrond, of andersom, maar geen grijs op grijs.

Ruimte rond de tekst. Een binnenmarge van minstens 16 px. Tekst die tegen de rand plakt, oogt als een vergissing.

Het klikbare gebied

De hele banner moet klikbaar zijn, niet alleen het gebied dat op een knop lijkt. Het is een afbeelding in een link:

<a href="https://example.com/beurs" style="display:block;text-decoration:none">
  <img src="https://cdn.example.com/banner@2x.png"
       width="600" height="100"
       alt="Vivatech — Hal 2, stand B34. Plan een afspraak."
       style="display:block;border:0;width:600px;height:100px" />
</a>

Twee details tellen. Het alt-attribuut moet de boodschap en de actie beschrijven: dat is wat een ontvanger ziet als zijn client afbeeldingen blokkeert, en wat een schermlezer voorleest. En border:0 verwijdert de blauwe rand die sommige clients rond een gelinkte afbeelding tekenen.

Goed om te weten: gebruik een traceerbare bestemmings-URL, per campagne een andere. Zonder die URL kun je het verkeer niet aan de juiste banner toeschrijven — zie de ROI meten.

Animatie

Een geanimeerde GIF trekt meer aandacht, maar sommige Outlook-versies tonen alleen het eerste frame. De regel die daaruit volgt is absoluut: de kernboodschap moet op het eerste frame staan; de animatie is alleen een verrijking.

Het onderwerp, inclusief bestandsgrootte en aantal herhalingen, behandelen we in een geanimeerde banner in je handtekening.

Wat een goede banner onderscheidt van een goede advertentie

Een verschil in toon verdient aandacht. De banner staat onder de handtekening van een persoon, in een zakelijk bericht aan iemand die die persoon kent. Een opdringerige reclametoon valt daar uit de toon en straalt af op de afzender.

De banners die het best werken, lijken minder op reclame dan op nuttige informatie: de datum van een beurs, een openstaande vacature, een beschikbaar rapport. Een overzicht van seizoensformats vind je in 12 campagne-ideeën, en het bredere kader van het kanaal in marketing via je e-mailhandtekening.

Controleer tot slot de weergave voordat je verstuurt. Een banner die perfect is in een ontwerptool, kan in een mailclient bijgesneden of verkleind verschijnen: de voorvertoning voor meerdere clients in de editor voorkomt een onaangename verrassing nadat je naar driehonderd mensen hebt gemaild.