Bloggerschmidt


Hier schreibt Alexander Schmidt, Webentwickler und CSS Guru



JD15DE_banner_88x31.png

Freie HTML E-Mail Layouts für responsive, geräteunabhängige Newsletter

emailblueprints.png

Einen Newsletter erstellst Du heutzutage mit der Webtechnik von 1999. Kein Witz. Durch die unterschiedlichen Webclients, wie Thunderbird, Mail oder Outlook, und deren verschiedenen Methoden das HTML zu rendern (z. B. mit Word; Muah!), muss Du auf Workarrounds zurückgreifen, von denen man eigentlich dachte, sie seien 2005 ausgestorben. Doch was gilt es beim Erstellen eines Newsletters zu beachten und wie stellst Du ihn geräteunabhängig dar?

Erste Schritte

Um eine HTML-E-Mail zu kodieren brauchst Du Tabellen, Tabellen, Tabellen. So, wie manche von uns ihre ersten Websites erstellt haben mögen. Dabei sind die Anforderungen von heute die aktuellen: Geräteunabhängigkeit und Ausrichtung spielen eine große Rolle.

E-Mail Blueprints

Mailchimp, ein Online-Dienst, der sich auf das Versenden von Newsletter spezialisiert hat, stellt seine E-Mail Blueprints unter GitHub frei zur Verfügung. Damit bekommst Du eine Menge praxistaugliche Vorlagen für den eigenen Newsletter. Neben den responsiven Templates sind in den Blueprints auch modulare Patterns enthalten mit den üblich gebräuchlichen Design-Elementen.

Inline-CSS

Einige E-Mail-Clients ignorieren oder löschen gar die <head>- und <style>-Tags aus den E-Mails, so dass es für Dich am besten ist Inline-CSS zu schreiben. Klar, Inline-CSS ist nicht gerade die feine Art des Kodierens und auch recht zeitintensiv. Dafür stellt Mailchimp ein weiteres Tool online zur Verfügung: CSS Inliner Tool. Dort kannst Du Dein HTML einfügen und bekommst eine E-Mail-freundliche Version davon heraus.

Fazit

Mit den E-Mail Blueprints kommst Du schnell zum Erfolg, wenn es darum geht, den eigenen Newsletter und die eigene Dankes-E-Mail zu erstellen. Etwas Einlesezeit ist allerdings erforderlich, ist man nicht vertraut mit dem HTML vergangener Tage. Das CSS Inline Tool hilft Dir, Dein modernes HTML retrotauglich zu machen. So steht der E-Mail-Client-unabhängigen E-Mail nichts mehr im Wege.