E-Mail Design Tutorials & Templates: Von Photoshop zum HTML-Code

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

Hat Ihnen der Beitrag gefallen?
Share on Facebook0Tweet about this on TwitterShare on LinkedIn0Email this to someone


Ähnliche Beiträge

Über Nico Zorn

Nico Zorn ist Partner bei Saphiron Digital Strategy Consultants, einer Unternehmens­beratung in den Bereichen Online-Marketing und E-Commerce. Zorn ist seit 1999 in der digitalen Wirtschaft tätig und beschäftigt sich schwerpunktmäßig mit den Themen E-Mail Marketing und Conversion Rate Optimierung.

Kontakt
E-Mail: nz@saphiron.de
Tel.: +49 (0) 228 -286 98 82 -0

Mehr über den Autor

Neue Insights für Ihr E-Mail Marketing

Jetzt den kostenlosen Newsletter anfordern und neue Ideen für Ihre Kampagnen erhalten:

Anrede   

Ihre Daten werden garantiert nicht weitergegeben. Die Abmeldung ist jederzeit möglich. Der Newsletter erscheint i.d.R. einmal pro Monat. Mehr dazu in unserer Datenschutzerklärung.
Kommentare sind geschlossen.