Lemontaps Design Guide: Best Practices für E-Mail-Signaturen

Dieser Guide fasst die wichtigsten Designprinzipien zusammen, um stabile, professionelle E-Mail-Signaturen mit Lemontaps zu gestalten.
Er richtet sich an Designer und Marketingteams, die Signatur-Templates erstellen.

E-Mail-Signaturen unterscheiden sich technisch stark von normalen Weblayouts. Viele E-Mail-Clients – insbesondere Microsoft Outlook – unterstützen nur eingeschränkt moderne HTML- und CSS-Technologien. Daher gelten für Signaturen spezielle Designregeln.

Ziel einer guten E-Mail-Signatur

Eine professionelle Signatur sollte:

• den Absender klar identifizieren
• wichtige Kontaktdaten bereitstellen
• zum Corporate Design passen
• in möglichst vielen E-Mail-Clients korrekt dargestellt werden
• auf Desktop und Mobil funktionieren

Signaturen sollten deshalb visuell klar, technisch einfach und kompakt gestaltet sein.

Empfohlene Struktur einer Signatur

Name
Position / Rolle
Telefonnummer
E-Mail-Adresse
Unternehmen / Website

Legal-Text / Disclaimer: In vielen Ländern sind bestimmte Unternehmensangaben in geschäftlichen E-Mails gesetzlich vorgeschrieben.

optional Unternehmenslogo
optional Social Links
optional Marketingbanner
optional QR-Code zur digitalen Visitenkarte

Ein einfaches Beispiel:

Name
Position

Telefon
E-Mail
Website

Logo

Legal-Text

Je einfacher die Struktur, desto stabiler funktioniert die Darstellung in verschiedenen E-Mail-Clients.

Maximale Größe der Signatur

Viele E-Mail-Clients unterstützen keine echte Responsivität.

Empfohlene Gesamtbreite:

320–600 px

Optimal:

450–550 px

Zu breite Signaturen können auf Smartphones abgeschnitten werden.

Layout-Regeln

E-Mail-Signaturen sollten möglichst einfach aufgebaut sein.

Empfehlungen:

• wenige Layoutbereiche
• klare Hierarchie
• keine komplexen Strukturen

Wichtig:
Viele moderne Web-Technologien funktionieren in E-Mail-Clients nicht.

Vermeiden:

Flexbox
Grid
komplexe CSS-Layouts

Stattdessen sollten einfache HTML-Strukturen verwendet werden.

Spaltenlayouts und mögliche Darstellungsprobleme

Viele Signaturen werden mit Spalten aufgebaut, zum Beispiel:

Logo links, Kontaktdaten rechts, QR-Code in der 3.Spalte

Solche Layouts sind grundsätzlich möglich, können jedoch in bestimmten Situationen zu Darstellungsproblemen führen.

Probleme entstehen häufig bei:

• Weiterleitungen
• langen E-Mail-Threads

Einige E-Mail-Server oder Clients wandeln Nachrichten beim Antworten intern in ein anderes Format um (z. B. HTML → RTF oder vereinfachtes HTML). Dabei können Tabellenstrukturen oder Spaltenlayouts verändert werden.

Typische Effekte:

• Spalten rutschen untereinander
• Bilder verschieben sich
• Abstände verändern sich
• Texte umbrechen anders

Dieses Verhalten hängt stark vom E-Mail-Client des Empfängers ab.

Empfehlung für maximale Stabilität

Das stabilste Signaturdesign ist ein einspaltiges Layout.

Beispiel:

Name
Position

Telefon
E-Mail
Website

Logo
optional Banner

Der Vorteil:

• Inhalte können bei Antworten oder Weiterleitungen nicht verrutschen
• bessere Darstellung auf Mobilgeräten
• weniger Client-Abhängigkeiten

Spaltenlayouts können weiterhin genutzt werden, sollten aber mit Vorsicht eingesetzt werden und getestet werden.

Schriftarten

Viele E-Mail-Clients unterstützen keine externen Webfonts.

Empfohlene Schriftarten:

Arial
Calibri
Verdana
Tahoma

Wenn Corporate Fonts verwendet werden, sollte immer ein Fallback definiert werden.

Beispiel:

"Inter", Arial, sans-serif

Schriftgrößen

Lemontaps verwendet Pixel (px) als Einheit.
Viele E-Mail-Clients – insbesondere Outlook – verwenden Punkt (pt).

Faustregel:

1pt ≈ 1,33px

Empfohlene Größen:

Name
15–16px

Position
13–14px

Kontaktdaten
12–13px

Disclaimer
9–11px

Farben

Farben sollten immer als HEX oder RGB Werte definiert werden.

Beispiele:

#000000
#1A1A1A
rgb(0,0,0)

Vermeiden:

CSS Variablen
Theme Variablen

Wichtige Farben sollten direkt im Element definiert sein.

Bilder und Logos

Für Bilder gelten einige wichtige Regeln:

• Bilder immer in finaler Größe hochladen
• Breite und Höhe definieren
• keine CSS-Skalierung

Empfohlene Bildformate:

PNG
JPG

Nicht empfohlen:

SVG

QR-Code zur digitalen Visitenkarte

Lemontaps ermöglicht das Einfügen eines QR-Codes zur digitalen Visitenkarte.

Empfohlene Größe:

80–120 px

Mögliche Platzierung:

• rechts neben Kontaktdaten
• unterhalb der Signatur

Mobile Darstellung

Ein großer Teil aller E-Mails wird auf Smartphones gelesen.

Deshalb sollte die Signatur:

• maximal 600 px breit sein
• möglichst wenig Spalten enthalten
• eine klare Hierarchie haben

Layouts mit untereinander angeordneten Elementen funktionieren auf Mobilgeräten meist am stabilsten.

Marketingbanner in Signaturen

E-Mail-Signaturen können auch für Marketing genutzt werden.

Typische Beispiele:

Events
Produktlaunches
Whitepaper
Recruiting

Empfohlene Bannergröße:

Breite
max. 600 px

Höhe
80–120 px

Banner sollten kompakt bleiben, damit die Signatur weiterhin professionell wirkt.

Platzhalter und dynamische Inhalte

In Lemontaps werden Signaturen automatisch mit Nutzerdaten befüllt.

Typische Variablen:

Name
Position
Telefonnummer
Mobilnummer
E-Mail-Adresse
Unternehmen
Adresse

Designer sollten bedenken:

• Telefonnummern können unterschiedlich lang sein
• Positionsbezeichnungen können länger sein
• manche Informationen fehlen bei einigen Nutzern -> das ist kein Problem, durch die Einstellung mit dem Platzhalter "INE" eingestellt werden kann, dass die Zeile hochrutscht.

Dark Mode

Viele E-Mail-Clients unterstützen Dark Mode.

Empfehlungen:

• ausreichend Kontrast verwenden
• keine zu hellen grauen Texte
• Logos mit transparentem Hintergrund nutzen

So bleibt die Signatur auch im Dark Mode gut lesbar.

Häufige Designfehler

Zu breite Signaturen
zu komplexe Layouts
zu viele Farben
zu viele Icons
zu kleine Schriftgrößen
zu große Banner

Einfachere Signaturen funktionieren technisch deutlich zuverlässiger.