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

Voraussetzungen: Administrator · E-Mail-Signatur Addon

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, Social Links, Marketingbanner, QR-Code zur digitalen Visitenkarte

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.

Viele moderne Web-Technologien funktionieren in E-Mail-Clients nicht. Zu vermeiden: Flexbox, Grid, komplexe CSS-Layouts. Stattdessen sollten einfache HTML-Strukturen verwendet werden.

Zeilenhöhe

Outlook Classic verwendet Microsoft Word als Rendering-Engine und interpretiert CSS-Zeilenhöhen anders als Outlook Web. Die Lemontaps-Vorschau im Editor zeigt das Ergebnis für Outlook Web – in Outlook Classic kann die Darstellung abweichen.

Empfehlung: Setze die Zeilenhöhe auf 1.3. Dieser Wert wird von Outlook Classic und Outlook Web gleichermaßen stabil dargestellt. Größere Zeilenhöhen können in Outlook Classic gequetscht erscheinen.

Alternativ kannst du Abstände zwischen Textelementen über Paddings, Spacer oder Divider steuern – diese werden in beiden Outlook-Varianten konsistent dargestellt.

Spaltenlayouts und mögliche Darstellungsprobleme

Viele Signaturen werden mit Spalten aufgebaut, zum Beispiel: Logo links, Kontaktdaten rechts, QR-Code in der dritten Spalte. Solche Layouts sind grundsätzlich möglich, können jedoch in bestimmten Situationen zu Darstellungsproblemen führen – besonders bei Weiterleitungen und 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.

Feste Pixelgrößen verwenden

Outlook Web versteht Prozentangaben für Spaltenbreiten, Bildgrößen und Paddings nicht zuverlässig. Werden Spalten beispielsweise mit 25%/50%/25% oder Bilder auf „zentriert" gesetzt, kann es zu Lücken oder Verschiebungen kommen – auch wenn die Darstellung im Lemontaps Editor und in Outlook Classic korrekt aussieht.

Empfehlung: Gib für alle Spalten, Bilder und Paddings feste Pixelwerte an. Wenn etwas in Outlook Web nicht zentriert oder falsch ausgerichtet erscheint, prüfe zuerst, ob Paddings links und rechts als feste Pixelwerte gesetzt sind.

Empfehlung für maximale Stabilität

Das stabilste Signaturdesign ist ein einspaltiges Layout. Vorteile: 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 und sorgfältig 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.

Schriftgröße pro Element definieren

Für eine stabile mobile Darstellung reicht es nicht aus, die Schriftgröße nur global auf Seitenebene zu setzen. Weise zusätzlich jedem einzelnen Textelement eine eigene feste Schriftgröße zu. Fehlt die elementspezifische Angabe, kann die Schriftgröße auf Mobilgeräten größer oder kleiner als erwartet dargestellt werden.

Farben

Farben sollten immer als HEX oder RGB Werte definiert werden. Beispiele: #000000, #1A1A1A, rgb(0,0,0). Zu vermeiden: CSS Variablen, Theme Variablen. Wichtige Farben sollten direkt im Element definiert sein.

Bilder und Logos

Für Bilder gelten folgende 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 oder unterhalb der Signatur.

Mobile Darstellung

Ein großer Teil aller E-Mails wird auf Smartphones gelesen. Die Signatur sollte maximal 600 px breit sein, möglichst wenig Spalten enthalten und eine klare Hierarchie haben. Layouts mit untereinander angeordneten Elementen funktionieren auf Mobilgeräten am stabilsten.

Weise zusätzlich jedem Textelement eine eigene feste Schriftgröße zu – eine globale Seiteneinstellung allein reicht für eine stabile mobile Darstellung nicht aus. Mehr dazu unter Schriftgrößen.

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 einzelnen Nutzern. Mit dem Platzhalter $INE$ / $/INE$ lässt sich eine Zeile automatisch ausblenden, wenn der Wert leer ist.

Dark Mode

Viele E-Mail-Clients unterstützen Dark Mode. Empfehlungen: ausreichend Kontrast verwenden, keine zu hellen grauen Texte, Logos mit transparentem Hintergrund nutzen.

Häufige Designfehler

Zu vermeiden: zu breite Signaturen, zu komplexe Layouts, zu viele Farben, zu viele Icons, zu kleine Schriftgrößen, zu große Banner, Prozentangaben statt Pixelwerten, fehlende elementspezifische Schriftgrößen.

Einfachere Signaturen funktionieren technisch deutlich zuverlässiger.