Schlagwort-Archive: html

E-Mail-Templates und 20 Designpraktiken

Die zum tuts+ Netzwerk gehörende Seite ThemeForest bietet jetzt auch E-Mail-Templates (kostenpflichtig) an, welche, nach eigenen Aussagen, alle Anforderungen erfüllen um bei möglichst vielen Clients korrekt dargestellt zu werden. Dazu gehören der Aufbau mittels Tabellen und die Formatierung mit Inline-Styles.

Zusätzlich hat Matthew Kirk von nettuts+ einen Artikel online gestellt, der 20 Designpraktiken beschreibt um selbst solche HTML-Mails zu erstellen. Der Artikel fasst, meiner Meinung nach, alles zusammen worauf beim Design geachtet werden muss. Sehr empfehlenswert!

Newsletter-Darstellung in Google Mail

Andrea Smith gibt im The Exact Target Blog 6 Tipps um HTML-Newsletter für Google Mail richtig zu gestalten:

  1. ALT-Attribut für Bilder
    Da Google Mail erst einmal alle Bilder blockt, ist es sinnvoll für jedes Bild das ALT-Attribut zu definieren.
  2. CSS
    Um die Verarbeitung der Stylesheets zu gewährleisten, müssen die Formatierungen leider inline definiert werden. Eingebettete oder extern referenzierte Styles werden nicht berücksichtigt.
  3. Rahmen mittels CSS
    Die neuere Version von Google Mail stellt im Internet Explorer 8 Rahmen, welche per CSS formatiert wurden, nicht korrekt dar. Es werden 1-2 Pixel weisser Rand links und rechts vom umgebenen Element hinzugefügt.
  4. Hintergrundbilder
    Google Mail unterstützt die Darstellung von Hintergrundbildern, allerdings nur, wenn sie direkt als HTML-Attribut eingebaut wurden. Die Verwendung des Styles background-image führt zu keinem Ergebnis. Auf der anderen Seite funktioniert background-repeat ohne Probleme.
  5. Google Mail-Themes
    Google ermöglicht dem Anwender die Darstellung der E-Mails mit den so genannten Themes zu ändern. Damit dieses Feature nicht den Anwender daran hindert den Newsletter zu lesen, z.B. weil der Hintergrund schwarz wird und der Text des Newsletters als schwarz festgelegt wurde, ist es empfehlenswert die Farben von Hintergrund und Text explizit anzugeben.
  6. Test
    Abschließend sollte der Newsletter in allen gängigen Browsern in Google Mail getestet werden um weitere Darstellungsprobleme aufzudecken.

Text-Version eines Newsletters

Jonathan Miller hat vor drei Tagen einen Artikel veröffentlicht, der auf das Design der Text-Version eines Newsletters eingeht. Laut ihm ist das genauso wichtig wie das Design der HTML-Version, was ich absolut bestätigen kann, da viele Clients erstmal die Text-Version anzeigen. Er gibt für die Gestaltung folgende Tipps:

  • Absätze, die in der HTML-Version vorgesehen sind, sollten sich auch in der Text-Version wiederfinden
  • Unterstriche benutzen um den Newsletter in Blöcke zu gliedern
  • Überschriften sollten nicht mehr als 50 Zeichen pro Zeile einnehmen
  • Generell sollten 70 Zeichen pro Zeile nicht überschritten werden
  • Alle Links mit „http://“ voran schreiben damit sie den von Clients als Links erkannt werden
  • Zeichen wie ® oder ™ ausschreiben, z.B. „(R)“
  • Listenpunkte mit Sternchen oder anderen Symbolen kennzeichnen
  • Mit Hexcodes formatierte Satzzeichen ausschreiben

HTML-Newsletter und Google Mail

Es gibt zwei gute Nachrichten und eine schlechte Nachricht was die Darstellungsmöglichkeiten von HTML-Newslettern bei Google Mail betrifft. Zuerst die guten Nachrichten: Es wird die CSS-Eigenschaft background-repeat untersützt, so dass nun genau festgelegt werden kann ob ein Hintergrund gekachelt werden soll oder nicht. Ein Hintergrundbild muss aber weiterhin über das HTML-Attribut background definiert werden. Desweiteren wurde die Unterstützung für die HTML-Attribute cellpadding und cellspacing wieder aktiviert, was die Darstellung von klassischen tabellenbasierten Newslettern zu Gute kommt.

Nun die schlechte Nachricht: Der <p>-Tag wird nicht mehr korrekt dargestellt. Der Abstand der normalerweise zwischen zwei solcher Tags erscheint, wird von Google Mail komplett ignoriert. Um dieses Problem zu umgehen müssen z.B. zwei <br>-Tags für den Abstand verwendet werden.

(Via The ExactTarget Blog)

Technical Preview von Microsoft Office 2010

Wer schon einen Blick auf die kommende Version von Microsoft Office werfen möchte, der hat nun die Möglichkeit sich für eine Vorabversion registrieren zu lassen. Die Registrierung garantiert allerdings keine Teilnahme an dem Programm.

Microsoft gibt in den nächsten ein bis zwei Monaten bekannt, wer die Vorabversion bekommt. Besonders für Newsletterdesigner ist dies eine Möglichkeit, sich schon mal die Möglichkeiten bzw. die Einschränkungen von Outlook 2010 in Bezug auf HTML-Mails anzuschauen.

Microsofts Antwort auf die Twitteraktion

Etwas mehr als 20.000 Twitterbenutzer haben sich an der gestrigen Aktion beteiligt, um Microsoft auf den schlechten Support von HTML im kommenden Outlook 2010 aufmerksam zu machen. Leider wohl vergebens, denn William Kennedy von Microsofts Office Team zeigt sich in einem aktuellen Blogbeitrag relativ uneinsichtig was die Problematik angeht.

Er fängt damit an, dass es durch die Nutzung der Word-Engine möglich ist, sehr einfach professionelle und visuell beeindruckende HTML-E-Mails zu verfassen und liefert auch gleich ein paar Beispiel-Screenshots. Die Initiative zielte aber gar nicht darauf ab, die Word-Engine zu verbannen, sondern sie kompatibler gegenüber Webstandards zu machen. Nach Kennedys Meinung gibt es keinen einheitlichen Konsens für die Darstellung von HTML in E-Mails:

There is no widely-recognized consensus in the industry about what subset of HTML is appropriate for use in e-mail for interoperability.

Das verstehe ich nicht ganz. Es gibt einen einheitlichen Konsens darüber wie man HTML darstellt. Ob Browser oder E-Mail-Client sollte nicht relevant sein. Das sieht auch das Email Standards Project so:

It doesn’t make sense to advocate a completely different set of standards to stipulate how HTML should be rendered in an email client as opposed to a web browser.

Des Weiteren geht er noch kurz darauf ein dass die Word-Engine keine Skripte (JavaScript etc.) ausführt, damit der Benutzer hier kein Sicherheitsrisiko hat. Davon war auch nie die Rede, nichtsdestotrotz ist das gut. Für mich liest sich das wie der Versuch, andere Clients gegenüber technisch nicht versierten Lesern zu diskreditieren. Eine Sache wird noch angesprochen, die man Microsoft zu Gute halten muss: Es ist genau dokumentiert was HTML-technisch in Outlook funktioniert oder auch nicht. Eher nicht.

Fazit: Es scheint, als ob wir uns auch die nächsten Jahre mit dem Design von HTML-Newslettern für Outlook rumschlagen müssen.

Outlook 2010 ignoriert auch weiterhin Standards

Das Email Standards Project (ESP) hat sich die Beta von Microsofts Outlook 2010 angeschaut und sie auf die Unterstützung von Web Standards hin geprüft: leider mit keinem guten Ergebnis. Die E-Mails werden immer noch von der Word-internen HTML-Engine dargestellt, welche sich leider seit Office 2007 nicht signifikant verbessert hat. Ein Vergleich zwischen Outlook 2000 und Outlook 2010 zeigt die große Diskrepanz auf.

Generell verwundert es, warum Microsoft die Engine von Word benutzt, da sie doch inzwischen mit der Engine des Internet Explorer 8 eine gute Basis haben. Produktmanager Dev Balasubramanian erklärt dies mit der Möglichkeit mit Hilfe der Word-Engine in Outlook professionelle und ansehnliche HTML-Mails zu erstellen. Und weil man die für das Erstellen benutzt, möchte man für die Darstellung nicht auf etwas anderes zurückgreifen.

Das ESP hat für das Problem eine Lösung parat: Die Word-Engine muss verbessert werden. Das Knowhow sollte Microsoft eigentlich durch den Internet Explorer haben, aber wahrscheinlich sind die beiden Engines programmiertechnisch soweit auseinander, dass ein Miteinander nicht möglich ist.

Jedenfalls möchte das ESP sich das nicht gefallen lassen und ruft auf der Seite fixoutlook.org zu einer Twitteraktion auf, welche Microsoft zum Umdenken bewegen soll. Sehr gute Sache, wie ich finde!

Outlook 2007 bald mit Gecko-Engine?

Microsoft plant offenbar mit dem Service Pack 2 für Office 2007 nicht wie gehabt die HTML-Engine von Word in Outlook einzusetzen sondern auf die Gecko-Engine von Mozilla umzusteigen. Diese wird auch von Thunderbird verwendet. Der Grund dafür sind vielfache Beschwerden hinsichtlich der fehlerhaften Darstellung von HTML-Newslettern und dem komplizierten Verwenden von Word-Vorlagen.

Dass Microsoft mit der Gecko-Engine liebäugelt ist nicht neu, wie das Smashing Magazine berichtet: In der kommenden Version 8.1 vom Internet Explorer (Codename: Eagle Eyes) wird Gecko implementiert um den Benutzer die Möglichkeit zu geben eine Seite mit einer anderen Engine zu betrachten.

Email Standards Project: Ratgeber für die Gestaltung von Newslettern

Das Email Standards Project (ESP) hat eine kleine Übersicht von Artikeln in ihrem Blog veröffentlicht in der es um die derzeitigen Gestaltungsmöglichkeiten von HTML-Newslettern geht. Sämtliche Artikel stammen von Campaign Monitor, was nicht verwundert, da Campaign Monitor das ESP gestartet hat. Folgende Artikel werden gelistet:

Windows 7: neuer E-Mail-Client? Neue Probleme?

Eines muss ich zugeben: Ich freue mich auf Windows 7. Es macht für mich den Anschein, dass Microsoft aus den Fehlern von Vista gelernt hat und dem Kunden nun ein stabiles, schnelles System ohne unnötige Gimmicks liefern möchte. Ich bin heute auf einen Blogartikel der Windows 7-Entwickler gestoßen, in dem es um eine neue Funktion geht mit der sehr einfach Windows Features ein- oder abgeschaltet werden können. Diese Funktion gab es zwar in ähnlicher Art und Weise schon bei den letzten Windows-Versionen aber noch nie so übersichtlich und umfassend wie jetzt angesprochen.

Eine Sache ist mir jedoch aufgefallen: Es findet sich kein E-Mail-Client in der Liste. Daraufhin habe ich mal bisschen recherchiert und bin auf einen Artikel von cnet gestoßen, der darüber berichtet, dass Microsoft keinen E-Mail-Client mit Windows 7 mitliefern wird. Vielmehr setzt Microsoft auf Windows Live Mail, welches kostenlos heruntergeladen werden kann. Inwiefern Microsoft mit Herstellern von Computern zusammenarbeitet und Windows Live Mail auf neuen Systemen vorinstallieren lässt, bleibt abzuwarten.

D.h. also, dass es keinen gänzlich neuen Client geben wird. In einem der nächsten Artikel werde ich Windows Live Mail mit Hilfe des Acid-Tests des Email Standard Projects testen um zu sehen wie sich dieser Client mit HTML-Newslettern verträgt.