Schlagwort-Archive: css

Mailrox: HTML-E-Mails codieren leicht gemacht

Schluss mit langwieriger Codierung von HTML-E-Mails: Mit dem cloud-basierten Tool Mailrox können diese schnell und unkompliziert erstellt werden. In nur wenigen Schritten entstehen Templates, die mit allen gängigen E-Mail-Clients kompatibel sind:

  1. Design-Vorlage des Newsletters hochladen.
  2. Tabellen-Layout per Drag ’n Drop erstellen – so werden unterschiedliche Inhaltesbereiche geschaffen.
  3. Bereiche mit individuellem Inhalt (Text, Bilder, Links) und/oder HTML befüllen. Testversand durchführen, Browser-Preview ansehen oder Testreport für unterschiedliche E-Mail-Clients abrufen.
  4. Als .zip-Datei oder Template für die E-Mail-Anbieter MailChimp und Campaign Monitor exportieren.

Klingt einfach – ist es im Prinzip auch. Allerdings: Ohne HTML- und CSS-Kenntnisse geht es auch hier nicht. Die Umsetzung von Responsive Designs ist aktuell noch in der Entwicklung. Mailrox befindet sich bisher im geschlossenen Beta-Status, eine Einladung kann aber ganz einfach per E-Mail angefordert werden.

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!“

Bildunterdrückung: Call-to-Action Button aus HTML-Tabelle

Der erste Schritt ist geschafft, der Abonnent hat die E-Mail geöffnet. Der erhoffte zweite Schritt ist oft das Klicken eines Call-to-Action Button. Dieser kann beispielsweise zu weiteren Informationen führen, eine Bestellung oder den Download eines Whitepapers auslösen.

Um die Aufmerksamkeit des Lesers zu fesseln und ihn zum Klicken zu bewegen, bliebt nicht viel Zeit. Ein aufmerksamkeitsstarker Call-to-Action Button muss her, um das Interesse des Nutzers beim Scannen der E-Mail zu wecken. Neben der optimalen Platzierung im sichtbaren Bereich des Newsletters spielt dabei vor allem die Optik eine entscheidende Rolle. In der Regel wird der Button deshalb als Grafik eingebunden.

Was tun, wenn das E-Mail-Programm des Empfängers die Bildanzeige unterdrückt?

Die Lösung sind Button-Layouts die aus HTML-Tabellen konstruiert werden. Vereinfacht gesagt: Der Button entspricht einer Tabelle mit genau einer Zelle. Mit HTML und CSS kann man den Button dann noch etwas gestalten. Da jede Tabellenzelle einen Bildpunkt darstellen kann, lassen sich neben einfarbigen Buttons auch optische Trennlinien und einfache Muster gut umsetzten.

Das Problem der Bildunterdrückung scheint gelöst, denn theoretisch lässt sich so ein ganzes Logo oder eine Grafik als Tabelle gerastert und für den Empfänger sofort sichtbar abbilden. Leider funktioniert dies eher in der Theorie, denn das Bild wird nicht nur oft pixelig angezeigt, sondern die Dateigröße steigt durch die Tabellen auch enorm an. Für Call-to-Action Buttons aber sicherlich ein Ansatz,  den man einmal getestet haben sollte.

Eine Anleitung mit exemplarischem Quellcode gibt es im Campfire-Blog.

Tipps für die Erstellung eines E-Mail-Newsletters

Gastbeitrag von Michaela Gabriel | GraphicMail Deutschland

Tagtäglich landen mehr oder weniger gute Newsletter in Ihrem Posteingang. Oft denkt man sich als Empfänger, wie einfach es doch sein muss, einen solchen Newsletter zu gestalten und ärgert sich über diejenigen Newsletter, die falsch angezeigt werden. So schwer kann es doch nicht sein!

Weiterlesen

Hotmail macht Newsletter-Überschriften grün

„Warum sehen meine Newsletter nur so komisch aus?“ Eine Frage, die man im Zusammenhang mit ganz bestimmten E-Mail-Clients öfter hört. Im Zusammenhang mit Webmailern eher seltener. Schließlich werden die E-Mails dort ja in einem Browser dargestellt, so dass die Unterstützung von HTML und CSS ziemlich gut gewährleistet sein sollte. Es gibt natürlich wie immer einige Ausnahmen.

Neben den bekannten kleineren Problemchen bei GMX, web.de und Yahoo hinsichtlich einiger CSS-Selektoren gibt es auch größere Problemchen beim Webmailer aus dem Hause Microsoft mit dem wohlklingenden Namen Windows Live Hotmail. Diese bestehen vor allem bei CSS-Eigenschaften für Hintergründe und Listen. Aber das sind alles nur Problemchen …

Denn seit geraumer Zeit gibt es offenbar ein richtiges, echtes Problem: grüne Überschriften. Hotmail deklariert nämlich sehr eigenmächtig die Schriftfarbe grün für alle h2- bis h6-Tags. Und zwar mit dem Zusatz !important, der die Priorität der Anweisung nach oben setzt. Reguläre CSS-Eigenschaften in der E-Mail werden damit überschrieben. Die Überschriften werden schön grün.

Diese Zeile richtet den gehörigen Schaden an:

h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#006E12 !important}

Mathew Patterson von Campaignmonitor zitiert diesbezüglich schon Kermit den Frosch, ist aber der Ansicht, dass grüne Überschriften alles anderes als schick sind. Er rät daher zur einzig wirksamen Gegenmaßname: Alle eigenen Stylesheets, die sich auf Überschriften-Tags beziehen, ebenfalls mit !important zu kennzeichnen.

Über das, was die Hotmail-Crew sich bei der Geschichte gedacht hat, kann man nur mutmaßen. Aber vielleicht ist es ja wirklich eine Hommage an Kermit. Falls nicht, dann bringen wir hier eben eine solche:

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.

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)

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:

Schriftarten in Hotmail

Hotmail von MSN ist ja hinlänglich bekannt dafür, dass es einige CSS-Selektoren und Eigenschaften in HTML-E-Mails nicht unterstützt. Besonders betoffen sind Hintergründe und Listen. Immerhin agiert es kompatibler als sein großer „Desktop“-Bruder Outlook 2007, aber eine bisher nicht so bekannte Schwäche des Microsoft Webmail-Systems betrifft überraschenderweise etwas sehr rudimentäres: die Schriftarten.

Merkwürdigerweise funktionieren einige Fonts, wenn man sie per CSS zuweist, manche wiederum nicht. Wie sich herausstellt, werden diejenigen Schriftarten ignoriert, die im Stylesheet in Anführungszeichen gesetzt werden, weil ihr Name Leerzeichen enthält. Zu nennen wären hier als Beispiel die populären Schnitte der Trebuchet MS (das MS steht übrigens für Microsoft) und der Lucida Sans bzw. Grande. Hotmail wandelt nämlich ein Anführungsweichen pflichtbewusst in ein &quot; um. Für das Stylesheet leider ungünstig.

Abhilfe schafft einfach das Weglassen der Anführungszeichen.