Newsletter gestalten und erstellen

Ein Newsletter aus der Universität Stuttgart ist mit folgende Ansprüchen konfrontiert:

• Erkennbarkeit als Medium der Universität Stuttgart: Für alle Einheiten der Universität Stuttgart gilt das Corporate Design.
• Bestmögliche Nutzbarkeit dank barrierefreier Gestaltung: Kontraste, Schriften, Alternativtexte für Bilder und Linksetzungen sind so zu wählen, dass sie barrierefrei sind. Von Anfang an berücksichtigt, profitieren davon alle Lesenden. Informationen zu barrierefreiem Design bietet das TIK, es gibt auch Kurse zu barrierefreiem Webdesign.
• Wiedererkennbarkeit als individuelles Medium

An welchen Farben soll der Newsletter erkannt werden? Als Stelle der Universität Stuttgart gilt deren Corporate Design. Damit lässt sich schon viel hantieren. Die zwei Blautöne könnten auch mit Helligkeitsstufen zum Einsatz kommen, nur als Rahmen, als doppelter Rahmen, für Akzentstreifen, für Querstriche und so weiter.

Generell ist zu empfehlen, sich neben Weiß und Schwarz für den Anfang auf maximal drei Farben zu begrenzen, um nicht zu überfordern. Die Farben sollten gut miteinander harmonieren und – das ist für einen lesbaren Newsletter sehr wichtig – ausreichend Kontraste bieten. Es gibt Kontrastrechner, die bei der Farbwahl helfen.

Frage vielleicht auch Personen aus deiner Zielgruppe, wie sie die von dir herausgesuchten Farbkombinationen wahrnehmen und empfinden.

Der Newsletter sollte ein einheitliches Schriftbild bieten. Nicht mehr als zwei gut leserliche Schriftarten sollten zum Einsatz kommen; meistens ist es je dieselbe Schriftart, die in einem dünnen Schnitt für die Fließtexte (Brotschrift) und einem fetten Schriftschnitt für die Überschriften und Hervorhebungen verwendet wird.

Bei der Auswahl denke daran, dass es sich bei der E-Mail um eine Website handelt. Die Schriftart muss entweder sehr verbreitet sein oder irgendwo online verfügbar sein, um sie auf den Rechnern der Lesenden verwenden zu können. Schriften aus dem Internet (insbesondere Google Fonts) können einen Datenschutzverstoß darstellen. Zudem sollte der Newsletter auch gut aussehen, wenn die Schriften noch nicht heruntergeladen wurden.

Das Corporate Design der Uni empfiehlt für E-Mails, Arial zu verwenden. Damit (und der Schwesterschrift Helvetica) macht man auch in Newslettern nichts falsch.

Da viele Mailclients nicht mit Layout-Containern (<div>) umgehen können, ist responsives Design leider nicht möglich: Die Elemente lassen sich nicht automatisch an die Bildschirmgröße anpassen. Wir sind, wenn wir auch Bilder neben Texte setzen möchten, auf Tabellen angewiesen, was nicht barrierefrei ist und aus gutem Grund im Webdesign seit mindestens 20 Jahren verpöhnt ist.

Grundstruktur

Eine gute Breite für den Hauptcontainer sind 600 Pixel, damit können auch auf den meisten Handys die Tabellen in voller Breite angezeigt werden. Außerdem empfiehlt es sich, die Tabelle zentriert in die E-Mail einzusetzen. Neben einem möglichen Rahmen ist auch zu beachten, dass es einen Innenabstand (padding) zu Texten und Bildern geben sollte.

Schriftgröße

Als Schriftgröße für Fließtexte sind 16 Pixel (wie hier) oder 17 Pixel eine gute Größe. Unter 14 Pixel sollte man nicht gehen. Zeilenabstand ist wichtig, da wäre die Empfehlung, auf das etwa Anderthalbfache zu gehen. Dieser Text hat einen Abstandwert von 1.6.

Überschriften

Überschriften sollten sich gut vom Text unterscheiden. 2 Pixel Größenunterschied sind wahrnehmbar. Die vier größten und tatsächlich angewandten Überschriftenhierarchien sollten unterscheidbar sein. In HTML stehen die Ebenen <h1> bis <h6> zur Verfügung.

Da als HTML-Dokument h1 die Hauptüberschrift des Newsletters bildet und ggf. mit dem Kopf eine besondere Gestaltung hat, gilt es noch, die häufigeren Ebenen h2 bis h4 festzulegen. Logischerweise sind in h2 die Überschriften zum Editorial, zum Inhaltsverzeichnis und zu den Rubriken gesetzt. Einzelne Beiträge sind mit h3 überschrieben; wenn es Zwischenüberschriften gibt, kommt noch h4 vor. Also könntest du von h4 als Fettschnitt der Fließtextgröße ausgehen und dann h3 und h2 jeweils nochmal mindestens zwei Pixel größer wählen.

Abstände

Über Überschriften ist meist mehr Abstand als unter Überschriften, um die Absätze optisch auseinander zu halten. Überlege dir auch, nach dem letzten Absatz eines Themas einen Abstand nach unten (margin-bottom) zu verwenden.

Möglicherweise hast du dir schon bei der inhaltlichen Konzeption Gedanken zur Bildwahl gemacht. Ein attraktiver Newsletter braucht Bilder. In E-Mails sind das statische Bilder. (Technisch sind auch animierte GIFs möglich. Doch nicht alles, was technisch möglich ist, sollte man auch machen.)

Überlege im Vorfeld, ob und wo du kleine Grafiken zum Auflockern oder als Wiedererkennungselement verwenden möchtest. Sind sie untereinander und mit dem Farb- und Linienkonzept stimmig? Lege dir vielleicht eine Auswahl an, falls du variieren möchtest. Notiere dir genau, welche Strichdicke und welche Farbe du verwendest, wenn du Grafiken selbst erstellst. Das hilft dir, falls du später Änderungen oder Nachträge haben möchtest.

Besonders ausgefeilt wäre es, wenn die Fotos eine einheitliche Sprache sprechen. — Gibt es einen besonderen Zuschnitt? Wo liegen die Fokuspunkte? Spielt Unschärfe eine Rolle? Taucht eine bestimmte Farbwelt auf? Ist der Weißabgleich identisch? — Das sind sehr tiefe Fragen. Wichtiger wäre, wenn du überhaupt Fotos hast und diese in einer Breite von 600 Pixeln nicht abschreckend aussehen.

Tipp: Achte später beim Skalieren darauf, Bilder proportional zu verkleinern. Auch wenn es dich nicht stört: Breit- oder langgezogene Fotos wirken unbewusst abstoßend.

Wann kommen Bilder vor? Wo werden sie platziert? Haben sie eine Unterzeile? Wo stehen Angaben zur Urheberschaft?

Wie breit wird der Abstand zwischen Text und danebenstehendem Bild sein?

Wie willst du die Abschnitte voneinander trennen? Reicht ein größerer Abstand? Oder willst du eine horizontale Trennlinie (<hr>) verwenden? Wie dick oder dünn soll diese Trennlinie aussehen? Welche Farbe hat sie?

Die Frage nach der Bündigkeit spielt auch eine Rolle. Am besten lesbar für unsere rechtslaufende lateinische Schrift sind linksbündige Flattersätze. Das gilt für Fließtexte wie auch für Überschriften. Links sollte eine wohltuende Ruhelinie verlaufen. Blocksatz ohne Silbentrennung ist auf Bildschirmen, insbesondere in E-Mails, Murx. Zentrierte Texte sollten, wenn überhaupt, sparsam dosiert, am besten vermieden werden.

Wie willst du Links hervorheben? Beachte für Menschen, die Farben schwer unterscheiden können, dass es neben einer von der Grundfarbe abweichenden Farbe ein weiteres optisches Merkmal braucht. Bewährt hat sich im Internet, dass Hyperlinks unterstrichen sind. Du kannst gerne das Rad neu erfinden. Wenn du einen intuitiv bedienbaren Newsletter haben willst, lass es und unterstreiche die Links.

Vermeide zum Hervorheben von Wörten die Unterstreichung. Nutze zum Betonen eine Fettung (<strong>, CSS: font-weight: bold) und zum Herausstellen von Fremdwörtern oder Begriffen eine Kursivschrift (<em>, CSS: font-style: italic).

Ausgefeilt, doch im Ergebnis sorgfältig und damit attraktiv wirkend, ist eine einheitliche Zeichenwahl:

• Schreibe Zahlen von 0 bis 12 als Wörter aus.
• Überlege dir, welche Anführungszeichen du verwenden wirst: "technische", „deutsche“ bzw. “englische” oder »klassische«. Halte dich an die Festlegung. Vielleicht helfen dir auch die Tipps auf der Schreiben-fürs-Internet-Seite.
• Gleiches gilt für Gedanken- und Bindestriche: Ein Minus „-“ von der Tastatur ist kürzer als ein Gedankenstrich „–“.
• Verzichte auf Ausrufezeichen hinter Überschriften, wenn es keine Ausrufe sind. Und nimm maximal eines.
• Überlege dir, ob und wo du Emojis verwenden möchtest.
• Wie schreibst du Daten und Uhrzeiten?
• Mit welcher Schreibform berücksichtigst du die Vielfalt der Geschlechter?

Möglicherweise inspiriert dich auch der Redaktionsleitfaden für die Webredaktion.

1. HTML-Datei auf Computer erstellen (= neues Textdokument mit Dateinamen-Endung .html)
2. Eigene Vorlage oder bestehenden fremden Newsletter mit Editor „Notepad++“ öffnen.
3. Gestaltungsvorgaben anpassen
4. Texte austauschen
5. Bilddateien hochladen (z. B. in OpenCms), und veröffentlichen.
   1. Online-Pfade einkopieren an Stellen, wo Bilder benötigt werden.
   2. Alternativtexte anpassen!
6. Vorschau in Outlook aus Notepad++ starten: „Ausführen“ → „Send via Outlook“ (einrichten, wenn nicht verfügbar).
7. Vorschau im Browser: HTML-Datei öffnen.
8. Wenn beide Vorschauen gut aussehen, mit Mailclient verschicken.