Waarom kun je geen flexbox gebruiken in een e-mailhandtekening?

De weergave-engine van Outlook voor Windows, afkomstig van Microsoft Word, ondersteunt flexbox en grid niet. De elementen komen dan onder elkaar te staan, waardoor elke opmaak in kolommen verdwijnt. Tabellen blijven het enige betrouwbare positioneringsmechanisme.

Werken -tags in een handtekening?

Niet betrouwbaar. Veel clients verwijderen het -blok bij het opschonen van de HTML, en een handtekening die in een instellingenveld wordt geplakt, verliest meestal alles wat niet inline staat. Stijlen moeten via style-attributen op elk element staan.

Kun je een eigen lettertype gebruiken?

Nee, niet betrouwbaar: weblettertypen laden in de meeste e-mailclients niet. Gebruik een systeemlettertype en geef een reeks vervangende lettertypen op.

HTML-e-mailhandtekening: de compatibiliteitsregels die je moet volgen

De HTML van een handtekening is geen website-HTML. Tabellen, inline stijlen, afmetingen in attributen: de regels waardoor een handtekening er in Outlook, Gmail en op mobiel hetzelfde uitziet.

De HTML van een e-mail volgt niet dezelfde regels als die van een website. Wat in een moderne browser werkt, kan in Outlook uit elkaar vallen, en code die volgens het W3C volkomen geldig is, kan een onbruikbaar resultaat geven. Dit zijn de echte beperkingen, en waar ze vandaan komen.

Waarom deze beperkingen bestaan

Niet alle e-mailclients gebruiken een webweergave-engine. Outlook voor Windows — in de klassieke versie, in bedrijven nog volop aanwezig — geeft HTML weer met de engine van Microsoft Word. Word is daar nooit voor ontworpen, en ondersteunt maar een beperkte subset van CSS.

Webmails schonen binnenkomende HTML om veiligheidsredenen op: ze verwijderen scripts, vaak <style>-tags en soms hele attributen.

Een handtekening moet dus goed worden weergegeven op de laagste gemene deler. De nieuwe Outlook verbetert de situatie — zie wat er in 2026 verandert — maar zolang de oude client in omloop is, blijft de beperking bestaan.

Regel 1 — Tabellen voor de opmaak

flexbox en grid worden door de Word-engine niet ondersteund. De elementen komen dan onder elkaar te staan en elke opmaak in kolommen verdwijnt.

De positionering moet dus op tabellen steunen:

<table cellpadding="0" cellspacing="0" border="0" role="presentation">
  <tr>
    <td style="padding-right:16px;vertical-align:top">
      <img src="..." width="120" height="40" alt="Bedrijfsnaam" />
    </td>
    <td style="vertical-align:top">
      <div style="font-weight:700">Voornaam Achternaam</div>
    </td>
  </tr>
</table>

Drie details tellen. cellpadding="0" cellspacing="0" border="0" neutraliseert de standaardruimtes, die per client verschillen. role="presentation" vertelt schermlezers dat de tabel voor de opmaak dient en niet voor gegevens. En vertical-align moet expliciet zijn: de standaardwaarden verschillen.

Regel 2 — Alle stijlen inline

Een externe stylesheet is onbereikbaar. Een <style>-tag wordt vaak verwijderd. En als je een handtekening in het instellingenveld van een client plakt, verdwijnt alles wat niet in een style-attribuut staat.

Elke eigenschap moet dus op het betreffende element worden gedeclareerd. Dat is omslachtig, herhalend, en er is geen alternatief.

Regel 3 — Afmetingen van afbeeldingen in attributen

Outlook negeert vaak width en height die in CSS zijn gedeclareerd. De afbeelding verschijnt dan op haar oorspronkelijke grootte: een bestand van 1.200 px vult de hele breedte van het bericht.

Zet de afmeting in de HTML-attributen, en herhaal haar in CSS voor moderne clients:

<img src="https://cdn.voorbeeld.nl/logo.png"
     width="180" height="48" alt="Bedrijfsnaam"
     style="display:block;border:0;width:180px;height:48px" />

display:block verwijdert de ongewenste ruimte onder de afbeelding; border:0 haalt het blauwe randje weg als ze klikbaar is. De details staan in een logo toevoegen zonder dat het breekt.

Regel 4 — Systeemlettertypen, met vervangende reeks

Weblettertypen laden niet betrouwbaar. Geef een realistische reeks op:

font-family: Arial, Helvetica, sans-serif;

Zelf het vervangende lettertype kiezen is beter dan het aan de client over te laten.

Regel 5 — Absolute eenheden

Relatieve eenheden — rem, em, percentages voor tekstgroottes — gedragen zich onregelmatig. Gebruik pixels voor lettergroottes, binnenmarges en afmetingen van afbeeldingen. Percentages blijven acceptabel voor de breedte van tabellen.

Regel 6 — Expliciete links

Een link moet zijn volledige protocol bevatten, ook voor telefoonnummers:

<a href="tel:+31612345678" style="color:#1A1A1A;text-decoration:none">+31 6 12345678</a>

Zonder expliciete style passen sommige clients hun eigen onderstreepte blauw toe, dat met je huisstijl zal vloeken.

Regel 7 — Inhoud die zonder afbeeldingen bruikbaar is

Externe afbeeldingen worden voor onbekende afzenders standaard geblokkeerd. Steunt je handtekening op een afbeelding, dan ziet de ontvanger een lege rechthoek in plaats van je contactgegevens.

Naam, functie, telefoon en wettelijke vermeldingen moeten tekst blijven. En elke afbeelding krijgt een nuttige alt — de bedrijfsnaam voor het logo, de naam van het netwerk voor een icoon.

Goed om te weten: test altijd met uitgeschakelde afbeeldingen. Dat is de snelste manier om te zien of je handtekening in het slechtste geval bruikbaar blijft.

Moet je deze HTML met de hand schrijven?

Het kan, maar het is geen goede besteding van je tijd. De klassieke fouten — niet afgesloten tabel, vergeten cellspacing, ontbrekende afmeting, stijl die bij kopiëren en plakken verloren gaat — zijn bij het lezen moeilijk te zien en duiken alleen in bepaalde clients op.

Een visuele editor die direct HTML volgens deze regels genereert en de weergave toont in Outlook voor Windows, Outlook op het web, Gmail, Apple Mail en op mobiel, voorkomt het grootste deel van het probleem. Dat doet de editor van Signally, die je gratis kunt gebruiken.

De winst zit niet alleen in tijd, maar in betrouwbaarheid. Een centraal sjabloon garandeert dat de regels hierboven worden nageleefd door alle handtekeningen van de organisatie, ook door die van mensen die nog nooit van cellpadding hebben gehoord.