# E-mailhandtekening ontwerpen: banners van 600×200 die klein blijven [Canonical HTML page](https://gradiently.design/nl/guide/email-signature-design) Je handtekening gaat mee met elke e-mail die je verstuurt en is dus het meest bekeken ontwerp dat je hebt. Zo maak je er een die doordacht oogt, snel laadt en nooit een paperclip wordt. ## The short version - Een goede e-mailhandtekening houdt je naam, functie en contactgegevens als echte tekst en voegt hooguit één kleine bannerafbeelding toe. - Een handtekeningbanner werkt goed op 600×200 pixels, een strook van 3:1 die in de smalste e-maillay-outs past. - De banner exporteren op dubbel formaat, 1200×400, en weergeven op 600 pixels breed houdt hem scherp op schermen met hoge dichtheid. - Veel e-mailprogramma’s blokkeren afbeeldingen tot de lezer ze toestaat, dus niets essentieels mag alleen in de banner staan. - Een gehoste afbeelding met een volledig https-adres houdt elke e-mail licht, terwijl een geplakte afbeelding vaak bij elk bericht als bijlage meegaat. Goed **e-mailhandtekening ontwerp** is vooral terughoudendheid: je naam, functie en een of twee manieren om je te bereiken als echte tekst, en dan één kleine bannerafbeelding van 600×200 pixels die je merk draagt. Houd de banner licht, laat hem naar één pagina linken en zet je telefoonnummer of e-mailadres nooit alleen in het plaatje, want veel inboxen verbergen afbeeldingen tot de lezer anders zegt. ## Wat in een e-mailhandtekening hoort Een handtekening heeft twee taken: mensen vertellen wie je bent en hoe ze je bereiken, en hen eraan herinneren wat je doet. De eerste taak is tekst. De tweede kan een banner zijn. Alles daarbuiten is rommel die mensen leren te negeren. | Element | Formaat | Opmerkingen | | --- | --- | --- | | Naam | Tekst, vet | Het enige wat groter mag zijn | | Functie en bedrijf | Tekst | Eén regel, gescheiden door een komma | | Telefoon of boekingslink | Tekstlink | Één hoofdmanier om te handelen, geen vier | | Website | Tekstlink | Kort en leesbaar, zonder `https://` | | Banner | Afbeelding, 600×200 | Optioneel; linkt naar één pagina | | Social-pictogrammen | Kleine afbeeldingen | Hooguit twee of drie, of sla ze over | Eerst tekst, dan beeld. Als elke afbeelding niet laadde, zou de handtekening nog moeten werken. ## Formaat en gewicht van de handtekeningbanner Ontwerp de banner op 600×200 pixels, een strook van 3:1. Zeshonderd pixels is de breedte waar klassieke e-mailsjablonen omheen gebouwd zijn, dus een banner van die grootte past in de mailapp van een telefoon en in een leesvenster op de desktop zonder te schalen. Exporteer voor schermen met hoge dichtheid hetzelfde ontwerp op dubbel formaat, 1200×400, en laat de e-mail het op 600 pixels breed tonen. - Handtekeningbanner 600×200: 600 × 200 - E-mailheader 1200×600: 1200 × 600 - Visitekaartje 1050×600: 1050 × 600 Een handtekeningbanner naast een nieuwsbriefheader en een visitekaartje, op schaal. De banner is een slanke strook, geen poster. Gewicht doet meer ertoe dan je denkt, want de afbeelding reist mee met elk antwoord in een lange draad. Houd het bestand ruim onder 100 KB. Een verloopbanner exporteert prachtig als jpeg van hoge kwaliteit; gebruik png alleen als je transparantie of heel fijne letters nodig hebt. Maak je ook een nieuwsbrief, dan behandelt de gids [e-mailheader ontwerpen](https://gradiently.design/nl/guide/email-header-design) het grotere formaat. ## De banner ontwerpen Een banner die honderd keer per week wordt gezien, moet één ding zeggen en dat rustig doen. Hij werkt het best als stille promotie: je volgende evenement, een nieuwe dienst, een boekingslink, of gewoon de look van je merk met een korte regel. Verander de woorden met het seizoen; houd de achtergrond. Een slanke e-mailhandtekeningbanner voor een fotostudio met de tekst Nu boeken voor lentebruiloften over een zacht verloop De banner van een fotograaf: één actuele regel en de studionaam. Een e-mailhandtekeningbanner die een gratis webinar op 12 november aankondigt Een adviesbureau dat één evenement promoot. Is het voorbij, wissel dan de regel. ### Vermijd - Contactgegevens alleen in de afbeelding - Een banner van honderden kilobytes - Geanimeerde gifs die eindeloos herhalen - Citaten, disclaimers en vijf social-pictogrammen - Kleine grijze tekst die verdwijnt in donkere modus ### Doe - Naam en links als echte tekst - Een lichte banner van 600×200, onder 100 KB - Een stilstaand beeld, hooguit één rustige herhaling - Eén oproep tot actie - Een banner met een eigen achtergrond, zodat hij leest in lichte en donkere modus Donkere modus is een echte valkuil. Sommige mailapps keren lichte kleuren om of kleuren ze bij, dus een logo op een transparante achtergrond kan verdwijnen tegen een donkere inbox. Een banner met een eigen volledige achtergrond, zoals een rijk verloop, ziet er in beide modi hetzelfde uit. [Ontwerpen voor donkere modus](https://gradiently.design/nl/guide/dark-mode-design) en [verlopen in e-mail](https://gradiently.design/nl/guide/gradients-in-email) gaan dieper in op hoe programma’s met kleur omgaan. ## HTML voor een e-mailhandtekening die bij elkaar blijft E-mailprogramma’s zijn ouderwets over lay-out, dus handtekeningen worden gebouwd met simpele tabellen en inline stijlen. Deze werkt in de gangbare programma’s: plak hem in een HTML-bestand, open dat in een browser, selecteer alles en kopieer het naar de handtekeninginstellingen van je mailapp. ```html
Maya Okafor
Founder, Studio Alder
Book a call · example.com
Studio Alder: now booking spring weddings
``` Gegevens als echte tekst, één gehoste banner die op 600×200 wordt getoond vanuit een bestand van 1200×400, met alt-tekst die nog steeds klopt als afbeeldingen geblokkeerd zijn. > **Host de afbeelding, plak hem niet** Als je een afbeelding rechtstreeks in een handtekening plakt of uploadt, sturen sommige mailapps hem bij elk bericht als bijlage mee, wat als paperclip verschijnt en inboxen vult. Linken naar een afbeelding op je eigen website met een volledig https-adres voorkomt dat. ## Je handtekening instellen, stap voor stap 1. **Schrijf het tekstblok** Naam, functie en bedrijf, één link om op te handelen, je website. Lees het hardop; schrap alles wat je niet zou zeggen. 2. **Ontwerp de banner op 600×200** Gebruik je merkachtergrond en één korte regel. Houd de woorden in het midden met ruimte aan beide uiteinden. 3. **Exporteer op 1200×400** Een jpeg van hoge kwaliteit voor verlopen en foto’s, png voor transparantie. Controleer of het bestand onder 100 KB blijft. 4. **Upload hem naar je website** Zet hem in een vaste map zoals `/email/`, zodat het adres nooit verandert en oude e-mails hun banner houden. 5. **Bouw en plak de HTML** Pas de code hierboven aan, zet de breedte op 600, schrijf echte alt-tekst en plak het in je mailapp. 6. **Test het goed** Stuur het naar een Gmail- en een Outlook-adres, open het op een telefoon, zet donkere modus aan en uit en reageer twee keer op de draad. ## De handtekeningen van een team consistent houden Handtekeningen driften: de een voegt een citaat toe, de ander gebruikt het logo van vorig jaar. Geef het team één HTML-sjabloon en één banner, en verander de banner centraal als de boodschap verandert. Dezelfde discipline als beschreven in [merkconsistentie](https://gradiently.design/nl/guide/brand-consistency) geldt hier, op kleinere schaal. Gradiently heeft een formaat E-mailhandtekening van 600×200 klaar staan in de Studio, en een eigen formaat van 1200×400 dekt de export voor hoge dichtheid. Gratis exports dragen een klein watermerk, dus voor een schone banner heb je Pro nodig, dat ook de merkkit brengt: logo, kleuren en lettertypen op één plek. De Mark achter de banner is dezelfde als op je socialposts en [visitekaartjes](https://gradiently.design/nl/guide/business-card-design), dus een antwoord in iemands inbox ziet er onmiskenbaar uit als de rest van je merk. ## FAQ ### Welk formaat moet een e-mailhandtekeningbanner hebben? Ontwerp hem op 600×200 pixels. Exporteer op 1200×400 en zet de breedte van de afbeelding op 600 zodat hij scherp blijft op schermen met hoge dichtheid. ### Hoe groot mag het bestand van een handtekeningafbeelding zijn? Houd het ruim onder 100 KB. De afbeelding wordt met elke e-mail en elk antwoord verstuurd of geladen, dus een zwaar bestand loopt snel op. ### Waarom verschijnt mijn handtekeningafbeelding als bijlage? Sommige mailapps voegen geplakte of geüploade afbeeldingen als bijlage toe aan elk bericht. Host de afbeelding op je website en link ernaar met een volledig https-adres. ### Moet ik mijn telefoonnummer in de handtekeningafbeelding zetten? Nee. Veel e-mailprogramma’s blokkeren afbeeldingen standaard, en tekst in een afbeelding kan niet worden aangetikt of gekopieerd. Houd contactgegevens als echte tekst. ### Kan ik een geanimeerde gif in mijn e-mailhandtekening gebruiken? Het kan, maar houd hem klein en subtiel. Een herhalende animatie in elke e-mail van een lange draad wordt snel afleidend, en sommige programma’s tonen alleen het eerste beeld.