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

P.S.: Mit Saphiron unterstützen wir seit über 10 Jahren Unternehmen dabei, profitables E-Mail-Marketing auf- und auszubauen. Jetzt kostenlos beraten lassen!

Author

Nico Zorn ist Partner bei der CRM- und E-Mail-Marketing-Agentur 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