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

Das Coden von HTML E‑Mails bringt häu­fig auch erfah­rene Programmierer zur Verzweiflung: Eine HTML E‑Mail, die in Gmail ein­wand­frei dar­ge­stellt wird, führt in Outlook zu erheb­li­chen Darstellungsfehlern. Funktioniert die E‑Mail in Outlook und Gmail, gibt es plötz­lich Darstellungsprobleme in GMX – und so wei­ter und so fort.

Anleitungen, Beispiele und Templates kön­nen die Arbeit erheb­lich ver­ein­fa­chen. Nachfolgend gibt es eine Übersicht beson­ders emp­feh­lens­wer­ter Tutorials und Vorlagen.

Ink: Responsive E‑Mail Framework

Das kos­ten­lose “Ink”-Framework gehört defi­ni­tiv zu den prak­tischs­ten Ressourcen für E‑Mail-Designer. Die vier Varianten sind nicht nur für Profis eine Arbeitserleichterung, son­dern ermög­li­chen auf­grund ihrer aus­führ­li­chen Dokumentation auch Einsteigern einen guten Einstieg in die Materie: Ink — A Responsive Email Framework from ZURB

responsive-email
Vier Varianten: Das respon­sive E‑Mail-Template “Ink” (kli­cken für eine grö­ßere Ansicht).

Crazyegg-Anleitung: Von Photoshop-Design zum fer­ti­gen 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 wei­te­ren Tutorial (“How To Code An Email Newsletter in 6 Simple Steps”) wird detail­liert geschil­dert, wie die Photoshop-Vorlage in HTML umge­setzt wird.

tutorial-emaildesign
Das fer­tige E‑Mail-Design des Crazyegg-Tutorials (kli­cken für eine grö­ßere Ansicht).

Copernica: Anleitung für die Umsetzung eines respon­si­ven E‑Mail-Templates

Clayton van Oostwaard von Copernica zeigt in die­ser Schritt-für-Schritt Anleitung, wie ein E‑Mail-Template so umge­setzt wer­den kann, dass die Mail sowohl auf dem Desktop, als auch auf mobi­len Endgeräten per­fekt dar­ge­stellt wird. Der HTML- und CSS-Code wird detail­liert erläu­tert und voll­stän­dig als Vorlage für das eigene Mailing ver­öf­fent­licht: How to create a respon­sive HTML email from scratch

responsive-email-template
Das respon­sive E‑Mail-Template von Copernica (kli­cken für eine grö­ßere Ansicht).

“Antwort”: Noch ein respon­sive E‑Mail Template

Wer unter den bis­lang vor­ge­stell­ten Ressourcen noch keine pas­sende Grundlage für sein E‑Mail-Design ent­deckt hat, wird viel­leicht mit dem Template “Antwort” fün­dig. Die Vorlage ist eben­falls gut doku­men­tiert und wurde in den wich­tigs­ten E‑Mail Clients und Webmail-Diensten getes­tet. Antwort: Responsive Layouts for Email

antwort-email-template
“Antwort”: Kostenloses Template für ein respon­si­ves E‑Mail Design (kli­cken 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

Total
0
Shares
Ähnliche Beiträge

BEVOR DU GEHST... 👋

Mehr Tipps für profitable Kundenbeziehungen

Folge mir auf LinkedIn und profitiere von Tipps & Best Practices für Dein CRM!

Total
0
Share