Designing emails the right way

Wenn man vielleicht ein tolles Startup im Bereich E-Commerce hat, kommt man früher oder später an die Einstellungsmöglichkeiten der E-Mail Designs. Wer es noch nie gemacht hat und versucht eine HTML E-Mail mit normalem HTML und CSS wie im Browser zu designen wird kräftig auf die Schnauze fallen, weil irgendwie nichts funktioniert.

Das liegt allerdings nicht an den HTML Fähigkeiten, sondern eher an der mangelnden Unterstützung von Standards seitens der E-Mail Clients. Wer es trotzdem toll machen will, für den hat Campaignmonitor hier eine tolle Übersicht online gestellt: Email Design Guidelines

Hier einen Kurzüberblick über die wichtigsten Punkte:

  • Einfach halten. Richtig einfach.
  • Divs nicht benutzen, sondern nested tables
  • In jedem einzelnen Tabellenfeld die Größe einstellen
  • Keine % Angaben bei Tabellengrößen
  • Maximal 600px width um ordentliche Darstellung auf Smartphones zu gewährleisten
  • Um automatisches Text resizing bei Smartphones auszuschalten: -webkit-text-size-adjust: none;
  • Möglichst keine oder wenig Bilder benutzen …
  • … falls doch: Bilder nicht mitschicken, sondern verlinken
  • Overkill ist in! Alles überall einzeln definieren
  • Videos am besten nicht benutzen

Testen wäre der letzte Punkt. Ist allerdings extrem nervig, da es natürlich eine riesige Masse an Clients gibt. Ich persönlich habe hier noch nicht die beste (kostenlose) Möglichkeit gefunden außer alles per Hand überall anzuschauen. Nervig aber empfohlen.

Übrigens gibt es hier ein kostenloses Responsive Layout für E-Mails was unbedingt einen Blick wert ist: Responsive Layout for Email

Anscheinend gibt es hier auch einen kostenlosen Template Designer der stable Designs rausbringt. Allerdings wird man danach zu ner Registrierung gezwungen wo ich es leider abgebrochen hab. Man kann sein Glück aber gerne mal versuchen: Build your own email template

Zusammengefasst sollte man sich am besten auch mal den Code von großen Unternehmen (z.B. Amazon) anschauen und wie sie ihre E-Mails designen. Abschauen und am besten noch besser machen. Wenn man allerdings bei einem Projekt unter Zeitdruck steht, sollte man eventuell vorübergehend erst mal auf HTML E-Mails verzichten und sie einfach mit blankem Text verschicken. Sieht nicht so toll aus wie ne geile HTML E-Mail, aber bringt auf jeden Fall mehr Professionalität als ein zerstörtes HTML Design, wo der User kaum etwas herauslesen kann.

Professionality through professional texts

Professionalität sollte im heutigen Geschäftsleben eigentlich der Standard sein. Egal ob auf der Homepage, auf Flyern und Plakaten oder in Briefen in E-Mails – egal an wen – sollte ein bestimmter Grad an Professionalität stets vorhanden sein. Was viele jedoch vergessen, ist, dass dies nicht nur über die Inhalte vermittelt wird, sondern auch durch die Optik und Struktur der Botschaft. Positiver Nebeneffekt ist da meist auch noch, dass es eher gelesen wird, weil es auch einfacher zu lesen ist (trotz gleichem Wortlaut).

Mit Inhalten zu punkten fällt einigen schwerer. Ich persönlich bin selbst nicht der geborene Texter und es gibt sicherlich eine unglaubliche Anzahl an Personen die bessere Texte basteln als ich und sich einfach besser ausdrücken können. Umso besser ist es doch, dass man dann auf andere Weise sich hervorheben kann. Zum Beispiel durch Rechtschreibung und Orthografie.

Hier also mal ein paar “Klassiker” mit dem sich der Eine oder Andere sicherlich ein wenig verbessern kann.

  • Google: Grundlegende Regel: Wer sich unsicher ist wie man ein Wort schreibt, googlen! Meist reicht es aus das Wort direkt einzugeben und schon wird der Verbesserungsvorschlag von Google direkt angezeigt.
  • Absätze: Benutzt sie! Fließtexte insbesondere in E-Mails sind grauenhaft zu lesen. Überlegt euch was logisch zusammengehört und verwendet sie. In welchem Maße bleibt euch überlassen, findet einen guten Mittelweg!
  • Korrektheit & Groß- und Kleinschreibung: Achtet allgemein auf richtige Wörter und Groß- und Kleinschreibung. Allein das verbessert die Lesbarkeit enorm.
  • Korrektur: Lest den Text am Ende nochmal kurz durch. Meist findet man Dinge die man besser formulieren könnte und es dem Gegenüber einfacher macht alles zu lesen. Im besten Fall spart man sich dadurch zig E-Mails mit Rückfragen.
  • CAPSLOCK: WENN IHR TEXTE MIT GEHALTENER SHIFT TASTE SCHREIBT, SIND SIE EINFACH FALSCH. Bei bestimmten Headlines oder ähnlichem mag es erlaubt sein, wenn man allerdings etwas hervorheben kann, dann sollte man es eventuell mit Struktur und Inhalt machen. Nicht mit der Shift-Taste.
  • Leerzeichen vor Satzzeichen: “Mein Name ist Beispiel !” ist falsch. Richtig ist: “Mein Name ist Beispiel!” – ohne Leerzeichen zwischen letztem Wort im Satz und Satzzeichen. PS: Auch vor Kommas kommt kein Leerzeichen!
  • Ein Satzzeichen: “Das ist wichtig!!!” ist unsinnig. Ein Satzzeichen reicht – immer! Besser: “Das ist wichtig!”
  • Grußformel ohne Komma: Wer seine E-Mails abschließt schreibt oft
    “Mit freundlichen Grüßen,
    Name”
    darunter. Das Komma ist schlicht falsch. Einfach weglassen – auch wenn es im Angelsächsischen richtig sein mag. Richtig:
    “Mit freundlichen Grüßen
    Name”
  • ´ vs. ‘: Der Apostroph (‘) wird oft mit einem Akzent der Familie der francophonaceae (´ oder `) verwechselt.  Der richtige Apostroph wird mit Shift und der Taste rechts neben dem Ä geschrieben. Der Akzent wird rechts neben dem Fragezeichen auf der Tastatur geschrieben.
    Der Plural (z.B. “CDs”) existiert übrigens nur ohne Apostroph, genau wie beispielsweise bei “Torbens Haus”, oder “Vaters Säge”. Ausnahmen gibt es allerdings wenn es eventuell zur Verwechslung kommen könnte wie bei Andrea. “Andreas Säge” ist nicht die Säge von Andreas, sondern Andrea, also ist in diesem Fall “Andrea’s Säge” optional. (Man kann es zwar noch ernster sehen und ‘ mit ’ vergleichen, aber das nimmt wahrscheinlich niemand so ernst)
  • Seit vs. seid: Seit wird zeitlich verwendet “Seit gestern”, während seid auf die 2. Person Plural bezogen ist: “wir sind, ihr seid”.
  • Original: … und nicht orginal!
  • Übrigens: … und nicht übrigends!
  • Standard: … und nicht Standart!
  • E-Mail: Nicht email, nicht Email, auch nicht eMail oder EMail. Laut Duden gibt es hier nur eine richtige Schreibweise. 

Prinzipiell gilt, dass man Google benutzen soll wenn man sich unsicher ist. Auch wenn man mal einen Brief schreibt und dies noch nie gemacht habe, lohnt es sich zu informieren wie so einer aussieht. Auf Dauer wird das allgemeine Textbild dadurch enorm verbessert und Personaler, Kollegen, Chef und vor allem Kunden freuen sich darüber! Auch hier gilt lebenslanges Lernen, auch wenn es manchmal zu grundlegend erscheint.

Ich hab hier jetzt mal die für mich persönlich wichtigsten Fehler aufgelistet. Wer allerdings noch mehr lesen und lernen will, für den gibt es hier ein paar Links: