Erstellen von HTML-E-Mails – Tipps und Tricks (Part 1)

HTML5 und CSS3 – zwei Worte, eine Bedeutung: Die Zukunft des modernen Webdesigns!

Schon heute machen sich zahlreiche Webdesigner mit neuem Wissen und Praxis, der vom W3C eigentlich noch als experimentell gekennzeicheten Features von HTML5 & CSS3, vertraut. Showcases werden aus dem Boden gestampft und es vergeht kaum eine Woche, an dem mir nicht ein neues Feature von CSS3 zu Ohren kommt.
Umso interessanter wird es, wenn man die Uhr etwas zurückdreht, den eingestaubten 15 Zoll Röhren-Monitor aus dem Keller holt und sich in die Zeit zurückversetzt, in der es noch nicht selbstverständlich war, “früh” morgens halb 10 kaffeeschlürfend den ersten Tweet zu posten. Zu jener Zeit, als Websites noch aus riesigen Tabellen und Framesets bestanden und ihr Aufbau im Netscape und Co. halbe Ewigkeiten dauerte. Denn genau in dieser Zeit ist die Entwicklung der HTML-E-Mails scheinbar stehen geblieben.

Vorüberlegungen
Die Struktur von modernen Webseiten, der heute schon weit realisierbare Traum von Erweiterungsfähigkeit und geringem Wartungsaufwand – All das können wir wohl vorerst vergessen, wenn wir uns mit der Erstellung von HTML-E-Mails beschäftigen. Was uns bevorsteht, ist der harte Alltag eines Coders aus den 90er Jahren, zu dessen Aufgaben noch administrative Tätigkeiten sowie die Beherrschung/Anwendung von mindestens vier Programmiersprachen gehörten.

Um uns das Leben zumindest in diesem Punkt etwas zu erleichtern, hier ein paar Regeln:

Die erste Regel: Goldene Zeiten
Bringe viel Zeit und Geduld mit. Nimm dir während der Entwicklung deiner Entwürfe Zeit, um diese im Kopf durchzuspielen: Bild für Bild, Abstand für Abstand. Der größte Fehler ist es, genau hier Zeit einsparen zu wollen. Plane langfristige Testroutinen für einzelne Mail-Provider und Clients ein. Schöne HTML-E-Mails sind mindestens so imposant wie die Website, in deren Namen sie versandt wurden. So ist es nicht selten, dass die Umsetzung eines gut durchdachten Mail-Konzepts so viel Zeit verschlingt, wie die vorhergehende Website.

Die zweite Regel: Minimalismus & Grafik-Armut
Halte deine Entwürfe so einfach wie nur möglich. Jedes Designelement kostet dich Zeit und Umdenkarbeit. Spare grafische Elemente ein und beschränke diese auf Logo-Darstellung oder wirklich wichtige Bilder. Gehe davon aus, dass einige Menschen keine grafischen Schnick-Schnack laden wollen (siehe unten).

Die dritte Regel: Inline is King!
In HTML-Mails ist ALLES inline. Dies gilt auch für Bilder. Zum Beispiel ist das Nachladen externer oder im CSS-Background liegender Grafiken in den meisten Clients klickpflichtig (muss man bestätigen). Mache also deine Mails auch ohne Grafiken so accessible wie möglich und verwende kein Image-Replacement in Überschriften, denn ohne Klick sind diese nicht mal sichtbar. Auf die Möglichkeit Bilder im Client ohne Bestätigung anzuzeigen, werde ich dann in Part 2 verstärkt eingehen.

Die vierte Regel: Text-Einzug und Kommentare
Um den Überblick zu behalten sind Kommentare und eine gründliche Einrückung unumgänglich. Spätestens nach der ersten vierfach verschachtelten Tabelle wirst du das von ganz allein tun.
Kommentare haben den zusätzlichen Vorteil, dass man mit Hilfe der Suchfunktion schnell zu bestimmten Parts springen kann und sich nicht jedes Mal an dem kompletten Code runterhangeln muss. Es ist daher sinnvoll, sich eine Nummer oder Zahlenkombination zu notieren, die z.B. einen Headline-Block ausweisen. Kommentare werden von allen Clients versteckt angezeigt oder sogar ausgeblendet.

Was sonst noch zu beachten ist, wie z.B. die E-Mails auch von den Adressaten in der täglichen Informationsflut wahrgenommen werden, dazu mehr in Part 2 dieses Blogeintrags. Nächste Woche.

Erstellen von HTML-E-Mails – Tipps und Tricks (Part 2)