Barrierefrei und flexibel: Das neue Newsletter-Design für die Hamburgische Staatsoper

Halber Erstellungsaufwand pro Kampagne, barrierefreie und mobil optimierte Mailings.

• Erstellungszeit pro Kampagne: −50 %
• Klickrate mobil: +18 %
• Kosten für Bildbearbeitung: 0 €
• Getestet auf: über 50 Mail-Clients

Die bisherigen E-Mail-Templates waren starr und boten dem Team kaum Gestaltungsspielraum. Für jede Bildanpassung war externe Grafiksoftware nötig. Die HTML-Struktur entsprach nicht den Anforderungen an Barrierefreiheit, etwa für Screenreader.

• Starre Templates mit hohem Pflegeaufwand
• Externe Bildbearbeitung für verschiedene Screen-Formate
• Mangelnde Barrierefreiheit (BFSG)
• Schwache mobile Optimierung und unstrukturierter HTML-Code

starmate hat ein modulares Template-System aufgesetzt und in die EMS der Staatsoper integriert:

• E-Mail-Marketing: Wenige, aber flexible Komponenten ersetzen viele starre Einzelelemente.
• Template-Redesign: Bilder lassen sich im Editor im gewünschten Seitenverhältnis ausspielen, für Desktop und Mobile können unterschiedliche Bilder hinterlegt werden.
• Barrierefreiheit: Ein semantisches Überschriftenkonzept (H1, H2) und eine überarbeitete HTML-Struktur machen die Mailings für Screenreader lesbar. Das Design ist vollständig responsiv.

Die Staatsoper erstellt Kampagnen deutlich schneller, und Abonnent:innen erhalten gut lesbare, moderne Newsletter.

• Geringerer Erstellungsaufwand
• Keine externe Bildbearbeitung für unterschiedliche Bildschirmformate
• Barrierefreie Umsetzung nach BFSG-Anforderungen
• Bessere Klickraten durch konsequente Mobile-Optimierung

„Unsere neuen starmate-Templates sind ein echter Gamechanger. Wir sparen uns extrem viel Zeit in der Bildbearbeitung und der Erstellung, weil alles modular aufgebaut ist. Dass unsere Newsletter jetzt auch vollständig barrierefrei und perfekt mobil lesbar sind, ist für uns als führendes Opernhaus unverzichtbar.“

Clara-Maria Voigt, Referentin für Online-Kommunikation, Hamburgische Staatsoper

Gutes Design ist dann erfolgreich, wenn es alle Menschen einschließt. Bei der Hamburgischen Staatsoper konnten wir zeigen, dass barrierefreies E-Mail-Marketing gut aussieht und zugleich funktional ist.

Die größte Hürde war früher der Aufwand bei der Bildaufbereitung. Mit flexiblen Seitenverhältnissen direkt im Editor entfällt dieser Schritt, und der saubere HTML-Code hilft Screenreadern.

Chris, Consulting

1. UI/UX- & Barrierefreiheits-Audit: Analyse der bestehenden Newsletter und Definition der Barrierefreiheits-Kriterien.
2. Wireframing & Komponenten-Design: Konzeption der flexiblen Inhaltsblöcke und des Überschriften-Systems.
3. Code-Entwicklung & Optimierung: Semantisch korrekter HTML-Code für Desktop und Mobile.
4. Integration in die EMS: Dynamische Platzhalter und flexible Bilddarstellung.
5. Testphase & Go-Live: Tests auf über 50 Mail-Clients und Launch.