Dieser Beitrag nimmt am Dr. Web Autorenwettbewerb teil. Sie helfen dem Autor durch Ihr Feedback und Ihre Kritik in Form eines Kommentars. Diese fließen ebenso wie der erzielte Traffic und eventuelle Verlinkungen in die Entscheidung über die zu gewinnenden Preise ein.
von Minerva
Der Versand von Newslettern ist eine der besten kostenlosen Marketingstrategien und ein lukratives Tätigkeitsfeld für Webdesigner: Stellen Sie sich vor, sie entwerfen Ihrem Kunden einen Webauftritt und können ihm gleichzeitig schmackhaft machen, dass ein HTML Newsletter seine Umsätze erheblich steigern kann. Durch das regelmäßige Erscheinen des Newsletter ist Ihnen eine dauerhafte Einnahmequelle sicher.
Voraussetzung, um selbst HTML Newsletter erstellen zu können, sind der gekonnte Umgang mit einem Grafikprogramm, fortgeschrittene HTML Kenntnisse und zum späteren Versenden der Mails die Installation eines PHP Skripts wie PHPList.
In diesem Artikel beschäftigen wir uns mit Schritt 1, dem Layout eines HTML Newsletters. Shirtcity ist ein Beispiel dafür, wie man es richtig macht:
Der Newsletter von Shirtcity ist ein Beispiel für modernes Newsletterdesign.
Der Newsletter sollte nicht breiter als 600 Pixel sein, um bei allen E-Mail-Providern vollständig angezeigt werden zu können.
Otto ist clever und benutzt für den Newsletter dieselbe quietschbunte Navigation wie auf der Webseite. Kein Wunder, sie ist ein echtes Erkennungsmerkmal.
- Das Logo wird links oben platziert, damit es als erstes ins Auge fällt und bei Vorschaufenstern von Mailprovidern nicht am rechten Rand verschwindet.
- Der rechtlich vorgeschriebene Link zum Abmelden ist gut sichtbar im Kopf untergebracht.
- Die meisten Emaildienste unterstützen keine Hintergrundbilder. Berücksichtigen Sie dies beim Layout und setzen Sie Text nur auf einfarbigen Flächen. Als Workaround können Sie später vereinzelte Wörter oder Überschriften als Grafik einbinden.
- Denken Sie schon beim Layouten in Zellen. Grund: Viele E-Mail-Provider können mit Blockelementen wie Divs nichts anfangen, weswegen Sie den Newsletter mit guten alten Tabellen coden müssen. Es kann also nicht schaden, sich ein Grid anzulegen.
- Rahmen sind kompliziert – manche Mailprovider unterstützen den CSS-Befehl „border“ nicht. Als Workaround können Sie später um eine Zelle herum weitere Zellen anlegen, die sie mit einer Hintergrundfarbe füllen. Entscheiden Sie selbst, ob die Mühe lohnt.
- Geben Sie dem Leser einen Grund, die Webseite des Anbieters zu besuchen, indem Sie Links deutlich markieren.
Gameshadow trägt dick auf und setzt auf Bildimpressionen statt langer Worte. Und mal ehrlich: Wer von uns Gamerkiddies hat schon Lust, einen Roman zu lesen? Newsletterdesign ist eben wie alles andere auch eine Frage der Zielgruppe.
- Benutzen Sie ausdrucksstarke Fotos oder originelle Illustrationen im Kopfbereich, um sofort das Interesse des Lesers zu gewinnen. Sie wissen sicher, wie schnell ein Newsletter weggeklickt wird.
- Bereiten Sie den Inhalt tröpfchenweise auf – der Leser wird nicht viel Geduld mitbringen. Bei umfangreichen Newslettern bietet sich eine Einteilung in Rubriken mit aussagekräftigen Überschriften an.
- Werden Sie persönlich. Sprechen Sie den Empfänger direkt an – beispielsweise, indem Sie ihn beim Namen nennen und eine Aufforderung wie „Zeit den Weihnachtsbaum zu schmücken!“ folgen lassen. Auch rhetorische Fragen sind ein beliebtes Stilmittel.
GameStar bleibt im Gegensatz zum Konkurrenten Gameshadow erstaunlich konservativ und lässt den Redakteur freundlich in die Kamera lächeln. Eine Idee, die sich manche Business-Newsletter zu Herzen nehmen sollten.
Nutzen Sie den Fuß. Ein Impressum ist Pflicht, doch auch eine kleine Linkliste zu den Top-Themen der Webseite ist angesagt.
(sl)
Für den Wettbewerb können keine Beiträge mehr eingereicht werden, über Autoren freuen wir uns trotzdem. In dem Fall: bitte hier entlang.
Weitere Beiträge:
- 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
- Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
- Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
- Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
- Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
- 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
- Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.
Loading ...
Dies ist der vorletzte Beitrag des Wettbewerbs. Ab morgen läuft wieder der “Normalbetrieb”.
Hm, und wie mach man jetzt so einen Newsletter richtig? Bei mir kommen solche HTML-Newsletter immer als Gerippe ohne Bilder an, da die Bilder standardmäßig deaktiviert sind. Das wirkt nicht sehr einladend.
Mich hätte genauso sehr wie die gestaltung die technik interessiert. Ich hab gehört man soll Tabellenlayouts und Inlinestyles benutzen. Ein Grauen für jeden guten webdesigner. Ich hatte bei klick auf den Artikel auf solche Infos gehofft…
Inline-Grafiken wären die Lösung, damit immer grafische Newsletter ankommen. Nachteil: Größere Emails. Scheinbar nutzt dies kaum jemand (außer SPAMer).
@Alex
Du kannst die Bilder als Mime Mail mitsenden und einbetten. Das funktioniert auch bei eher restriktiven Einstellungen.
Schlechte Idee, wenn nicht eine reine Textversion angeboten wird. GMX etwa zeigt viele HTML-Geschichten gar nicht an. Viele Mailprogramme ebenfalls nicht, weil die Gefahr von SChadcode recht hoch ist. Irgendwie geht das mit dem Deisgn praktisch immer schief, die Ausnahme sind hauseigene Mails, wenn etwa GMX sein komisches Magazin verschickt. Nichts sieht schlimmer aus als eine HTML-Mail, wo das Layout zerschossen wurde. Nehmt lieber reine Textmails und verweist von mir aus auf gestylte längere Texte im Web.
Das Layout einer HTML-Mail wird dann zerschossen, wenn in Tabellenzellen oder in Bildern (img) keine breite (width) bzw. höhe (height) angegeben wird. In Tabellenzellen sollten zusätzlich die “guten” alten transparenten Bilder (blind.gif) zum “Stützen” des Gerüsts verwendet werden.
@Domingos
Fallbacks für nicht Mime-fähige Reader und alternative Textteile sind kein Problem und fangen die schlimmsten Fehler ab. Ich habe auf meinem Rechner immer Outlook, Outlook Express, Windows Mail und Thunderbird installiert und schaue mir die Mails in diesen Programmen an. Web.de und Gmail haben auch keine Probleme mit html Mails, sofern man sich an bestimmte Regeln hält. Damit hat man schon die häufigsten Clients abgedeckt.
Ausserdem gibt es immer noch die Möglichkeit, einen Link zur Onlineversion zu setzen (ohne Styling oben drüber), falls man es mal gar nicht lesen kann. Warum weiter auf Textmails rumreiten und Gestaltungsmöglichkeiten auslassen, um es einer Minderheit recht zu machen? Das ist so, als wenn sich das Web nur an den Fähigkeiten von Netscape 4/IE 6 orientieren würde und ewig dort stehen bleibt.
Mich würde auch die Technik und evtl. eine Liste mit Open Source Programmen interessieren.
Wie ja ohnehin schon geschrieben werden bei vielen Clients die Bilder aus guten Gründen einfach nicht nachgeladen, auch lassen sich viele Anwender E-Mails nur als Text anzeigen. Ich denke daher, wenn man Newsletter verschickt sollte man auf das PDF-Format zurückgreifen, auch um den Preis verminderter Interaktivität und bytemäßig grösserer Attachments, wobei letzteres heutzutage ohnehin mehr und mehr irrelevant wird…
@Sebastian:
Im diesjährigen 24ways gibt es zu HTML/CSS in Newslettern einen Beitrag:
http://24ways.org/2009/rock-solid-html-emails
Und zur Unterstützung der E-Mail-Clients von HTML-Elementen und CSS-Anweisungen kann man gut hier vorbei schauen:
http://www.email-standards.org/
“Der Versand von Newslettern ist eine der besten kostenlosen Marketingstrategien”
Diese Aussage kann man so nicht stehen lassen. Ein Newsletter kostet Geld.
Wer macht denn das Layout? Wer schreibt die Texte? Wer erstellt Landingpages? Selbst wenn man das komplett Inhouse macht, fallen kosten an, natürlich kommt am Ende keine Rechnung eines externen Dienstleister. Aber die Leute die sich drum kümmern kosten Geld.
Der Server über den die Mails verschickt werden will immerhin auch bezahlt werden (selbst wenn er ohnehin vorhanden ist). Ich würde es vielleicht als kostengünstige Strategie bezeichnen, aber keinesfalls als kostenlos…
EDIT_: Und ich kann mir nicht vorstellen das es für Designer lukrativ ist, es sei denn man arbeitet für einen Big Player (siehe Beispiele)
Ich hätte mir auch mehr technische Information in diesem Beitrag gewünscht.
Und eigentlich besteht der Beitrag auch nur aus einer handvoll Screenshots und ein paar Zeilen Text, die nochmal Grundlegendes zum Design eines Newletters festhalten, aber mir nicht wirklich weiter helfen. Ein bisschen ausführlicher wäre der Artikel schon besser gewesen – so ist es zu oberflächlich.
ich hasse html-mails …
gruss-
Ja, der Artikel endet sehr abrupt …
Die Informationen, die er bis dahin beinhaltet, sind zwar nicht komplett neu, aber durchaus interessant. Ich traue der Autorin zu, in Fortsetzungen die weiteren Aspekte auch noch zu vermitteln.
Möge sie Gelegenheit dazu haben.
Meiner Erfahrung nach muss man sogar wieder den TAG benutzen. Schon bei hat gmail schwierigkeiten mit inline styles.
Hier eine sinnvolle Liste, wer was kann.
http://www.campaignmonitor.com/css/
Toller Artikel, aber deutlich zu kurz. Mir fehlt auch viel zur Technik. Inlinebilder und Plain-Text-Fallback ist ja klar, aber was geht per HTML?
Im Moment bekomme ich öfter Anfragen, einen Newsletter für eforia einzurichten. Soweit kein großes Ding, ist ja eine Standard-Funktion. Aber beim HTML-Layout warne ich immer, dass man das ganz schön viel testen muss und es dadurch aufwendig werden kann, je nach gewünschter Layout-Komplexität.
Newsletter Crashkurs? Ganz sicher nicht! Die Überschrift hätte besser “SPAM für Anfänger und andere Idioten” lauten sollen. Wer die Spielregeln nicht kennt, kann sich megaschnell eine teure Abmahnung einfangen. Unverlangte E-Mail-Werbung ist nämlich unzulässig!
Dieser “Artikel” ist bestenfalls für die Mülltonne geeignet.
ich hätte mir gewünscht das dort etwas mehr auf die “Fähigkeiten” der einzelnen Mail Clients eingegangen wird HTML und CSS auch richtig zu interpretieren.
Denn valides HTML und CSS reicht hierfür nicht aus, besonders wenn auch (ältere) Versionen von Lotus Notes unterstützt werden sollen.
Das Schwierige an einem HTML Newsletter ist es das das Design bei möglichst allen Programmen gleich gut aussieht.
Wer natürlich immer annimmt das die Leute die neuste Software benutzen irren. Klar kann man bei einer Jüngeren Zielgruppe (z.B. Games / Skatebords) davon ausgehen das die aktuellere Programme benutzen, aber wenn man Behörden oder größere Organisationen im Verteiler hat, kann das schon ganz anders aussehen.
Für mich, der sich noch nicht mit Newslettern beschäftigt hat, ist der Artikel ein guter Einstieg.
Schritt 1, das Layout wurde mMn gut erklärt, mit Beispielen und grundliegenden Gestaltungsregeln.
Weitere Schritte können dann noch tiefer ins Detail gehen.
Der Artikel gibt wirklich einen guten Überblick; für mich als relativer Anfänger (Azubi) sind die Infos sehr nützlich. Darf der Gewinner dann eigentlich noch einen längeren Artikel schreiben? Ich würde nämlich gern noch eine Fortsetzung davon lesen. Drücke der Autorin die Daumen; meine Stimme hat sie
Hier ist noch einmal eine Liste von Elementen und von welchem Client die Unterstützt werden:
http://www.campaignmonitor.com/css/
Ladet Euch am besten das PDF herunter, das enthält mehr Details.
Sorry es hat etwas gebraucht, bis ich den Link wieder gefunden habe, daher der zweite Post.
Ich lasse meine E-Mails immer nur in Textmodus anzeigen. Damit ist die Aufmachung verlorene Muehe(, wenn solche Emails ueberhaupt durch mein Spamfilter durchkommen).
Also ich finde es schrecklich wenn ein Newsletter aussieht wie eine komplette Homepage. Es sollte immer noch ein Unterschied zwischen E-Mail und Website geben. Newsletter können zwar schön gestaltet werden und auch Bilder enthalten, aber wie hier bereits gesagt, haben solche großen HTML Mails viele Nachteile.
Seriöse (echte) Briefe haben auch keine aufwendigen Bedruckungen oder ähnliches. So etwas hat nur (nervige) Werbung!
@22 Eric
Das ist Unsinn. Nur weil DU keine html Mails sehen kannst oder willst, sollte man nicht darauf verzichten. Das ist wie ich oben schon geschrieben habe als wenn man auf CSS3 verzichtet, weil der IE6 es nicht versteht. Alternative Textteile und Fallbacks sind natürlich Pflicht. Ausserdem muss die Gestaltung für die wichtigsten Clients optimiert sein.
Die meisten Mailprogramme können auch html Mails dann noch lesen, wenn man html deaktiviert oder nur vereinfach aktiviert. Es geht nicht darum, was DU persönlich nicht willst, sondern darum, was andere vielleicht wollen und wie man sich als Unternehmen oder Webmaster selbst darstellen will. Für mich persönlich sind signierte html Mails mit inline Grafiken und einem gutem Layout wesentlich interessanter zu lesen, als nackte Textmails ohne oder sehr eingeschränkten Gestaltungsmöglichkeiten.
Ausserdem hat die Existenz von html oder die Eigenschaft “Mimemail” keine Auswirkungen auf den Spamfilter. Teilweise kann es sogar eher umgekehrt sein, z. B. wenn man die Grafiken inline mitsendet oder die Mails signiert. Bitte erst informieren, dann kommentieren.
Bin informiert. Bestens sogar.
Meine Mails werden weiterhin in Text angezeigt und mein Spamfilter siebt die meisten HTML-Werbemails erfolgreich ‘raus. Das praktizieren m.M.n. sehr viele so. Wenn ich E-Mail-Clients bei Bekannten installiere, schalte ich die auf Wunsch meistens defaultmaessig auf “HTML in Text”-Modus.
newsletter per email? sicher eine gute idee fuer alle die noch in 1992 leben. die meistens dieser emails landen hier gottseidank im spamfilter. wenn ich wirklich etwas verfolgen will dann nur via rss, twitter oder meinetwegen auch facebook – nicht weils gerade in ist, sondern einfach weil ICH bei diesen medien die volle kontrolle habe wer mir was schicken darf, ich kann jederzeit abbestellen wenn nur noch “kauf mich” texte und promos kommen usw.
bei den meisten newslettern fehlt ein (funktionierender) abbestellen link, oder meine email wird weiterverkauft, oder alle grafiken/links enthalten einen tracking code um festzustellen wer geklickt hat – wenn ich sowas sehe wird der newsletter geloescht und ich suche mir die information ueber google. die ganze newsletter idee war vielleicht mal am anfang ganz gut, wurde aber von marketing heinis oder beratern kaputtgemacht weils nur noch ein vertriebskanal fuer die versender ist, ohne sichtbaren nutzen fuer den empfaenger – praktisch so wie postwurfsendungen.