Schlagwort-Archive: darstellung

Infografik: Tipps für HTML E-Mails

CSS und HTML-Programmierung für E-Mails sind anders als für das Web, denn E-Mail-Clients unterstützen im Gegensatz zu den meisten Browsern, nicht alle modernen Webstandards. Zudem unterscheiden sich die E-Mail-Programme selbst sehr durch die Interpretation und Darstellung von HTML-E-Mails. Damit diese in möglichst vielen Clients möglichst gut dargestellt werden, sollten die folgenden Tipps aus der Infografik von Litmus befolgt werden. Auch hier gilt wie so oft: „Keep it simple!“ und „Testen, testen, testen!“

Infografik: Gründe für fehlerhafte E-Mail-Darstellung

Bei der Erstellung unseres Newsletters geben wir uns die größte Mühe: Wir erstellen sowohl eine Nur-Text-Version als auch eine HTML-Version mit technisch sauberem Code, testen ausführlich und alles sieht gut aus – und doch „zerschießt“ unser Design im Posteingang des Empfängers. Die Schuld für die fehlerhafte Darstellung schieben wir gern auf die E-Mail-Clients der Abonnenten, doch diese Infografik von litmus zeigt, dass es noch andere Einflussfaktoren darauf gibt:

Mobile Trends 2011

In einer aktuellen Studie zum Thema „Mobile Trends 2011“ stellt die promio.net GmbH Ergebnisse zu präferierten Endgeräten bei der E-Mail-Nutzung sowie zur präferierten Darstellung vor. Stichprobe waren 1500 Endverbraucher aus dem promio.net-Panel, die mindestens eines folgender Endgeräte besitzen:

  • Desktop-PC / Notebook / Netbook
  • Tablet PC
  • Smartphone

Präferiertes Endgerät zum Abruf von E-Mails

73 % aller Smartphone-Besitzer nutzen dieses auch zum Abrufen von E-Mails. Für nur lediglich jeden zehnten davon ist das Smartphone aber dafür das bevorzugte Endgerät. Bei den Tablet-Besitzern sind es ein wenig mehr, insgesamt ein Fünftel nennt den Tablet-PC zum Senden und Empfanden von E-Mails als bevorzugtes Endgerät. Insgesamt liegt die Präferenz zum Abrufen von E-Mails deutlich beim Desktop-PC bzw. Notebook oder Netbook: 96 % aller Teilnehmer nannten diese Endgeräte.

Präferierte Darstellung von E-Mails auf Endgeräten

Abhängig vom Endgerät sind auch die Darstellung und das Design einer E-Mail. Obwohl die große Mehrheit E-Mails am liebsten über den PC oder den Laptop abruft, gefällt nur knapp der Hälfte der Teilnehmer die Darstellungsform auf diesem Endgerät am besten. Auch Nutzer von Tablets und Smartphones sind mit der Darstellung auf ihren präferierten Endgeräten nicht zufrieden: Nur 41 % der Tablet- und 44 % der Smartphone-Nutzer finden die Darstellung auf ihrem Endgerät gegenüber der Darstellung auf anderen am besten.

Fazit

Auch wenn Desktop-PCs, Notebooks und Netbooks – vielleicht überraschenderweise – die mit Abstand beliebtesten Endgeräte zum Senden und Empfängen von E-Mails sind, verwenden viele Nutzer aber  grundsätzliche mehrere Endgeräte dazu. Bei Darstellung und Design besteht für alle Endgeräte noch Optimierungsbedarf.

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.

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)

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.