Schlagwort-Archive: html

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.

Persönlichkeit zeigen mit Newslettern im Nur-Text-Format

Persönliche Ansprache ist im E-Mail-Marketing besonders wichtig. Sie beginnt bei der Grußformel und endet mit den Inhalten. Versendet werden die Newsletter dann meist als HTML-E-Mail – doch ist das wirklich persönlich? Denn solche E-Mails werden doch in der Regel nur von Unternehmen verschickt. Keine Privatperson würde auf die Idee kommen, einem Freund eine schön gestaltete HTML-E-Mail zu senden.

Wenn man es einmal so betrachtet, ist dann die schlichte E-Mail im Nur-Text-Format nicht per se die persönlichere Variante? Und wenn diese dann noch mit einem Grußwort, Absendername und personalisiertem Inhalt versehen wird – persönlicher geht doch es doch eigentlich gar nicht, oder?

Nein, dies ist kein Appell gegen schön gestaltete HTML-Newsletter. Diese haben natürlich ihre ganz eigenen Vorteile und können Produkte optimal in Szene setzten. Es soll lediglich ein Denkanstoß sein, dem Nur-Text-Newsletter vielleicht auch ab und zu eine Chance zu geben. Kreativ eingesetzt, kann er die Kommunikation auf eine besonders persönliche Ebene heben. So unsexy wie viele denken, ist er nämlich gar nicht!

Mozify: Bildanzeige trotz Bildunterdrückung im E-Mail-Client

Über 80 % der E-Mail-Clients unterdrücken standardmäßig die Bildanzeige. Wichtige Botschaften und Call-to-Actions werden deshalb vom Empfänger eventuell nicht wahrgenommen. Wie wäre es da mit einem praktischen Tool, dass Bilder in HTML-Tabellen oder formatierten HTML-Text konvertiert? Mozify von Email on Acid ist ein Dienst, der genau so etwas kann.

Wird der konvertierte Code in den Newsletter aufgenommen, sollen knapp 80% der E-Mail-Empfänger zukünftig diese „Bilder“ sehen können – trotz Bildunterdrückung. Die Empfänger erhalten so einen ersten optischen Eindruck der E-Mail, wichtige Inhalte fallen direkt ins Auge. Sofern die Bildunterdrückung deaktiviert ist, werden wieder die Originalbilder aus dem Newsletter angezeigt. Tests ergaben große Steigerungen der Klickraten und Konversionen.

Auch wenn der Ansatz nicht neu ist – ein Versuch lohnt sich! Wer Interesse daran hat, kann sich kostenlos für die Beta-Version von Mozify regisitrieren. Email on Acid bietet zudem Dienste für Previews in unterschiedlichsten E-Mail-Clients, Vebesserung der Zustellrate und HTML-Optimierung an.

Mozify Demonstration from Michelle Klann on Vimeo.

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

5 Minute Mobile Makeover

Wir berichten immer wieder über die Notwendigkeit und Möglichkeiten, E-Mail für mobile Endgeräte zu optimieren. Wer jetzt denkt, Social-Media-Dienste gehen hier bereits mit einem guten Beispiel voran, hat sich geirrt! Prominentes Beispiel ist Twitter.

Zwar ist die erst jüngst erschienene wöchentliche Zusammenfassung per E-Mail für die Darstellung auf mobilen Endgeräten optimiert  –  die „normalen“ Benachrichtigungen jedoch leider nicht: Vor allem der Text ist viel zu klein und somit kaum lesbar.

Das hat CampaignMonitor zum Anlass genommen, ein „5 minute mobile makeover“ für Twitter-Benachrichtigungen zu entwickeln: Mit einigen simplen Anpassungen im Code ließe sich die Darstellung leicht optimieren. Deshalb ruft das Team von CampaignMonitor auch dazu auf, Twitter mit folgenden Tweet auf den Missstand aufmerksam zu machen und zum Handeln zu bewegen.

Hey @twitter – your email notifications aren’t mobile-friendly. Here’s a 5min fix – http://bit.ly/5min-makeover /via @campaignmonitor

Das Beste: Für alle, die ihren eigenen Newsletter für mobile Endgeräte optimieren wollen, steht der entsprechende Code frei zum Download bereit und kann in das eigene HTML E-Mail-Design übernommen werden.

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:

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.

Bildanzeige in Newslettern optimieren

Bilder in E-Mails erzeugen Aufmerksamkeit, leider werden sie meist standardmäßig von den E-Mail-Programmen unterdrückt. Warum? Aus Datenschutzgründen sollen Bilder, die von externen Servern geladen werden, erst auf Nachfrage aktiviert werden. Andernfalls könnten unseriöse Versender durch ein Logging auf dem Server herausfinden, welche E-Mail-Adressen aktiv sind. Wie seriöse Versender diese Problem umgehen können, hat René Kulka mit 3,5 Werbekniffen zur Bildanzeige erläutert. Zwei Möglichkeiten wollen wir kurz vorstellen.

„Bilder von diesem Absender immer anzeigen“

Aktiviert der Empfänger in seinem E-Mail-Programm diese entsprechende Funktion, werden alle weiteren E-Mails des Absenders als vertrauenswürdig eingestuft und Bilder zukünftig sofort geladen. Der Nachteil: der Nutzer muss selbst aktiv werden. Durch gezielte Aufforderung innerhalb der E-Mail bzw. des Newsletters kann er dazu angehalten werden.

Offline-HTML

Dabei werden die Bilder innerhalb der E-Mail als Anhang („Embedded Image“) mit versendet. Wichtig ist, dass die Dateigröße der eingebetteten Bilder berücksichtigt wird, vor allem bei mobilen Engeräten und Smartphones kommt es sonst zu langen Downloadzeiten und hohem Speicherbedarf. Die Lösung kann ein Mittelweg sein, bei dem nur Schlüsselgrafiken, Logo und Buttons angehängt werden.

In seinem Gastbeitrag in der Zeitschrift webselling erläuterst René Kulka „Inline-Images“ und HTML-Tabellen als weitere Instrumente.

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: