Das Coden von HTML E-Mails bringt häufig auch erfahrene Programmierer zur Verzweiflung: Eine HTML E-Mail, die in Gmail einwandfrei dargestellt wird, führt in Outlook zu erheblichen Darstellungsfehlern. Funktioniert die E-Mail in Outlook und Gmail, gibt es plötzlich Darstellungsprobleme in GMX – und so weiter und so fort.

Anleitungen, Beispiele und Templates können die Arbeit erheblich vereinfachen. Nachfolgend gibt es eine Übersicht besonders empfehlenswerter Tutorials und Vorlagen.

Ink: Responsive E-Mail Framework

Das kostenlose “Ink”-Framework gehört definitiv zu den praktischsten Ressourcen für E-Mail-Designer. Die vier Varianten sind nicht nur für Profis eine Arbeitserleichterung, sondern ermöglichen aufgrund ihrer ausführlichen Dokumentation auch Einsteigern einen guten Einstieg in die Materie: Ink – A Responsive Email Framework from ZURB

responsive-email
Vier Varianten: Das responsive E-Mail-Template “Ink” (klicken für eine größere Ansicht).

Crazyegg-Anleitung: Von Photoshop-Design zum fertigen HTML-Code

Stephanie Hamilton von Crazyegg beschreibt zunächst, wie ein E-Mail-Design in Photoshop erstellt wird: How To Design an Email Newsletter Template in 7 Simple Steps.
In einem weiteren Tutorial (“How To Code An Email Newsletter in 6 Simple Steps“) wird detailliert geschildert, wie die Photoshop-Vorlage in HTML umgesetzt wird.

tutorial-emaildesign
Das fertige E-Mail-Design des Crazyegg-Tutorials (klicken für eine größere Ansicht).

Copernica: Anleitung für die Umsetzung eines responsiven E-Mail-Templates

Clayton van Oostwaard von Copernica zeigt in dieser Schritt-für-Schritt Anleitung, wie ein E-Mail-Template so umgesetzt werden kann, dass die Mail sowohl auf dem Desktop, als auch auf mobilen Endgeräten perfekt dargestellt wird. Der HTML- und CSS-Code wird detailliert erläutert und vollständig als Vorlage für das eigene Mailing veröffentlicht: How to create a responsive HTML email from scratch

responsive-email-template
Das responsive E-Mail-Template von Copernica (klicken für eine größere Ansicht).

“Antwort”: Noch ein responsive E-Mail Template

Wer unter den bislang vorgestellten Ressourcen noch keine passende Grundlage für sein E-Mail-Design entdeckt hat, wird vielleicht mit dem Template “Antwort” fündig. Die Vorlage ist ebenfalls gut dokumentiert und wurde in den wichtigsten E-Mail Clients und Webmail-Diensten getestet. Antwort: Responsive Layouts for Email

antwort-email-template
“Antwort”: Kostenloses Template für ein responsives E-Mail Design (klicken für eine größere Ansicht).

E-Mail-Design: Noch mehr Anleitungen, Templates und Best Practices

E-Mail Templates und Anleitungen

Best Practices für das E-Mail-Design

Responsive E-Mails

Author

Nico Zorn ist Partner bei der CRM- und E-Mail-Marketing Beratungsagentur Saphiron GmH, die ihre Kunden bei dem Auf- und Ausbau profitabler Kundenbeziehungen unterstützt. Zorn ist seit 1999 in der digitalen Wirtschaft tätig und beschäftigt sich schwerpunktmäßig mit den Themen E-Mail-Marketing, CRM und Loyalty. Mehr über den Autor

Beitrag kommentieren

Gratis Newsletter:
Insights für besseres
E-Mail-Marketing
Jetzt anfordern und einmal pro Monat 
die beliebtesten Beiträge erhalten.

 
Mit einem Klick auf "Anfordern" erklären Sie sich damit einverstanden, den EmailMarketingBlog-Newsletter der Vantica UG (haftungsbeschränkt) mit Neuigkeiten, Best Practices, Veranstaltungshinweisen und ähnlichen E-Mail-Marketing- und CRM-Themen zu erhalten. Der Newsletter wird in der Regel einmal pro Monat verschickt. Ihre Einwilligung können Sie jederzeit mit Wirkung für die Zukunft am Ende jedes Newsletters oder unter mail@vantica.de widerrufen. Bitte beachten Sie auch unsere Datenschutzerklärung.
Seminar am 07.11.2019: Erfolgreiches E-Mail-Marketing