Alle Jahre wieder… Weihnachtszeit – Newsletterzeit. Gerade in den nächsten Wochen wird mit dem anstehenden Weihnachtsgeschäft auch wieder eine wahre Flut mehr oder weniger feierlicher, virtueller Weihnachtsangebote gnadenlos über uns hereinbrechen. Des einen Freud des anderen Leid. Denn was unsere Spamordner und Papierkörbe unter der puren Last ächzen lässt, entpuppt sich in der Vorweihnachtszeit für die meisten Onlineshop-Betreiber umso mehr als regelrechte Goldgrube.

Und auch ich habe mich hinreissen lassen und bastele gerade fleissig an einem Weihnachts-Newsletter für Pixxelpassion. Und genau an diesem Prozess möchte ich euch gern teilhaben lassen und zusammen erörtern, auf was es alles dabei ankommt. Wenn euch also beim Lesen Dinge auffallen und einfallen, schreibt mir einfach

Da sich über das Thema generell mehrere dicke Bände schreiben lassen, möchte ich dies kurz und präzise in drei Teile aufgliedern und in regelmäßigen Abständen weitere Artikel dazu posten. Praktisch eine mehrteilige Last-Minute-Anleitung und Checkliste für euren kommenden Weihnachtsnewsletter:

• Teil I: Newsletter-Coding: Alles über den korrekten Aufbau, Markup und Styles von Newslettern um Darstellungsfehler zu vermeiden
• Teil II: Newsletter-Design: Fragen rund um das Design von Newslettern. Aufbau, optische Gliederung, Key-Visuals
• Teil III: Newsletter-Marketing: Alles zum Thema Kundenansprache, Usertracking und Auswertungsverfahren

Den ersten Teil könnt ihr nun im Folgenden lesen. Die weiteren zwei Teile werden nicht minder interressant und folgen die nächsten Tage, versprochen! PS.: Also speichert euch am besten diesen Blog in euren Favs und im Gedächtnis um nichts zu verpassen.

Part I: Do’s and Dont’s beim Newsletter Coding

Fangen wir heute mit Teil I an: der technischen Seite bei der Erstellung eines Newsletters! Dafür benötigen wir grundlegend zwei Dinge: zum einen ordentlich Zeit, zum anderen das Bewusstsein, dass Newsletter- und Webdesign zwei grundlegend andere Sichtweisen auf den Quellcode erfordern.
Das liegt größtenteils daran, dass das Angebot an E-Mail-Readern mittlerweile unüberschaubar hoch ist. Und während so manch moderner Webmail-Provider wie Google Mail fast alle gängigen CSS-Standards problemlos darstellt, hinken beispielsweise Outlook und Co. noch gnadenlos hinterher. Da wir jedoch nicht wissen, welchen E-Mail-Reader unsere Kundschaft letztendlich nutzt, zählt im Endeffekt der kleinste gemeinsame Nenner um euren Weihnachts-Newsletter überall korrekt darzustellen.


Daraus ergeben sich folgende essentielle Regeln für euer Grundlayout:

• Rückbesinnung auf Tabellenlayouts: Im Webdesign normalerweise verpöhnt, sind solide Tabellenlayouts in Newslettern definitiv den gängigen Layouts aus Div-Containern vorzuziehen. Tabellen sind rasterbasiert, grundsolide und lassen weniger Spielraum für Fehleranfälligkeiten bei älteren Mailern. Alle “table-Tags” werden in der Regel korrekt interpretiert (table, thead, tbody, tfoot, tr, td). Tabellen sollten das Grundgerüst und den Großteil eures Newsletter-Layoutes ausmachen. “Divs” und “spans” am besten nur wo nötig einsetzen.
• Inline-CSS benutzen: Anstatt mit externen CSS zu arbeiten oder eure Stylesheets im “head-Bereich” eures Newsletters zu definieren, solltet ihr lieber den Elementen direkt die Styles zuweisen, wie Hintergund, Schriftgrößen und -farbe. Dies funktioniert weitesgehend mit allen gängigen HTML-Elementen wie div, span, p etc.
• CSS-Shorttags vermeiden: Klar ist es einfacher, eure gemeinsamen CSS-Styles zu bündeln. Aber gerade in Newsletterlayouts solltet ihr jedes Style einzeln aufschreiben. So würde ich euch raten den Style “font: 12px arial bold;” lieber in “font-size: 12px; font-family: arial; font-weight: bold;” aufzuschlüsseln. Weniger Fehleranfälligkeit!
• absolute Pfade verwenden: Nutzt bei allen Bildern sowie allen PDF’s und Links in eurem Weihnachtsnewsletter stets absolute Pfade.
• verwendetes Material langfristig speichern: Sollte sich eigentlich von selbst verstehen: alle Bilder und sonstige Materialien, die ihr für den Newsletter benutzt oder auf die ihr verlinkt sollten langfristig in einen separaten Ornder gespeichert werden. Oftmals werden Newsletter auch von euren Kunden archiviert und teils Wochen oder gar Monate später noch gelesen. Wäre doch schade, wenn dann nur ein nacktes HTML-Gerüst erscheint, nicht wahr?!

Wie schon gesagt: für das Newsletterdesign gelten weitesgehend andere Regeln als beim Coden einer normaler Website. Beachtet ihr obige allgemeine Tipps, wird das Grundlayout eures Weihnachts-Newsletters schon auf recht soliden Füßen stehen. Vergesst nicht öfter in verschiedenen Mailprogrammen (Outlook, Thunderbird, Lotus Notes) und den populärsten Webmailern (Google, AOL, Hotmail, Web.de,…) zu testen.

Markup genau unter der Lupe

Nachdem ihr nun ein Basis-Layout stehen habt, gehen wir nun ins Detail:

• Table-Tags vor Stylesheets: Wenn ihr euer Tabellenkonstrukt stylen wollt, gebt immer table-Tags den Vorrang vor CSS. Dies verringert Kompatibilitätsprobleme gerade bei älteren E-Mail-Clients. Ein td border=”0″ cellpadding=”5px” ist also generell immer einem td style=”border:0px; padding:5px” vorzuziehen.
• Padding vor Margin: Insbesondere fällt dies bei der Positionierung von Elementen mittels “padding” und “margin” auf. Nutzt am besten die “cellpadding”-Deklaration um Inhalte von den Rändern der Tabellenzelle wegzurücken.
• Ausnahme Rahmen: Eine Ausnahme, die mir bis jetzt aufgefallen ist sind die Rahmen. Wenn GoogleMail diese ignorieren sollte, ist tatsächlich ein div style=”border-width:1px;” einem td border=”1″ vorzuziehen. Platziert dazu einfach einen div-Container in die Tabellenzelle und weist ihm den Rahmen zu.
• Hintergrundgrafiken direkt in Tabelle einbinden: Gerade Outlook 2007 hat bei mir als CSS-eingebundene Hintergrundgrafiken strikt verweigert. Abhilfe verschafft ihr, indem ihr die Grafik direkt der Tabelle bzw. Tabellenzelle zuweist oder über den image-Tag einfügt.
• Grafikattribute immer definieren: für alle direkt eingebundenen Grafiken gilt: Die Angabe von height, width und alt-Attributen verringert die Wahrscheinlichkeit auf Darstellungsfehler. Auffällig zum Beispiel in GoogleMail. Desweiteren könnt ihr vorbeugen, dass das Layout vor den Augen eurer Kunden zerfällt, wenn der E-Mail-Reader die Anzeige von Grafiken deaktiviert hat.
• Span, das multifunktionale Tag: Wo Tabellenstyles an ihre Grenzen kommen sind spans das ideale Mittel um inline-Elemente zu stylen. Beispielsweise um Text eine Farbe zuzuweisen, eine Schriftgröße zu definieren – ja sogar zum positionieren.
• Verschobene Grafiken korrekt platzieren: Es kann vorkommen, dass Grafiken am unteren Ende einer Tabellenzelle ein wenig versetzt erscheinen. Probiert in dem Fall einfach mal, den schliessenden td-Tag auf die gleiche Zeile wie den image-Tag zu setzen. In vielen Fällen hat dieser einfache Kniff wahre Wunder bewirkt.
• Links stets in neuem Fenster öffnen: Gerade wenn ihr in eurer Weihnachtsmail viele Links verwendet solltet ihr darauf achten target=_blank zu verwenden. Die Nutzer von Webmailern werden es euch danken, wenn der Klick auf einen Link ein neues Fenster öffnet und die eigentliche Mail zum weiterlesen erhalten bleibt.
• Links stylen: Habt ihr innerhalb eines textgefüllten p-Tags einen Link, den ihr farblich hervorheben wollt, probiert mal folgende Vorgehensweise: Definiert die Schriftfarbe für den gesamten Text bereits im umschliessenden td-Tag. Danach färbt ihr den a tag individuell ein um den Link andersfarbig hervorzuheben. Dies funktioniert natürlich auch mit anderen Font-Styles wie Schriftgröße, Text-Decoration, …
• 1×1 Pixelgrafiken vermeiden: Obwohl gerade in Tabellenlayouts durchsichtige Platzhaltergrafiken von 1Pixel Größe gerne angewandt werden um die Tabellenstruktur zu erhalten, solltet ihr ein eurem Newsletter darauf verzichten. Solche Grafiken nutzen nämlich auch Spammer um zu prüfen, ob ihre Mails gelesen werden. Somit steigt die Wahrscheinlichkeit, dass euer Weihnachtsnewsletter nur im Spamordner eurer Kunden landet.
• Eigenheiten von GoogleMail: Obwohl einer der moderneren Webmailer, interpretierte GoogleMail meinen Newsletter manchmal doch recht eigenwillig. Prüft deswegen vorallem eure Font-Styles in den td, h1, h2, p und a Tags auf Richtigkeit. In manchen seltenen Einzelfällen ist es auch anzuraten, der allumschliessenden Layout-Tabelle ein padding von 10px zu geben. Dies verhindert, das lästige Beschneiden mancher E-Mail am Rand. Aber testet einfach mal selbst in eurem GoogleMail-Reader und entscheidet je nach Bedarf.

Und wo wir gerade beim Testen sind: vergesst nicht, regelmäßig euren Newsletter zu prüfen. Wird er im Firefox und Internet-Explorer richtig dargestellt, könnt ihr zuversichtlich sein dass allenfalls kleinere Anzeigefehler bei den meisten Webmailern wie Yahoo, GMX, GoogleMail etc. auftreten. Natürlich solltet ihr auch diesen nachgehen. Doch mit obigen Tipps seid ihr dafür schonmal gut gewappnet. Habt ihr gerade kein älteres Outlook zur Hand, prüft euren Weihnachtsnewsletter doch einfach mal im Internet Explorer 6. Die Darstellungsroutinen sind dort ähnlich.

Sicherlich habt ihr auch schon Erfahrung mit den teils wiederspenstigen Mailsystemen eurer Kunden gemacht. Vielleicht habt ihr auch noch Tipps und Kniffe um diese Liste zu ergänzen. Ich freue mich dazu auf eure Kommentare!

Nützliche Helferlein

Abschliessend möchte ich euch zum Thema noch zwei Newslettertools ans Herz legen, welche ich sehr gelungen finde:

• Mailchimp: Breitgefächerte Newsletterfunktionen, Tracking und Asuwertungstools, große Palette an Newsletter-Vorlagen, viele Schnittstellen zu bekannten sozialen Netzwerken, Onlineshops, Google Analytics sowie WordPress…und das Beste: für bis zu 1000 Subscribers zahlt ihr nichts. Genau das richtige um den Dienst mal auf Herz und Nieren zu prüfen.
• Newsletter-Plugin für Worpress: Speziell für WordPress gibt es auch noch ein Plug-In, welches ich oft einsetze und zufrieden bin. Es enthält alles wichtige: Subscribing mit einfachen oder Double Opt-In, bequem verwaltbare Subscriber-Liste, Import/Exportfunktionen sowie einen umfangreichen Newsletterbaukasten mit HTML-Editor. Ihr könnt sogar eure neuesten Blog-Artikel als regelmäßiges Update automatisch an eure Kunden senden. Dieses Plugin ist grundlegend gratis – lediglich die optionalen Tracking- und Auswertungstools kosten einen kleinen Obolus.

Dies sind die Werkzeuge, welche ich momentan einsetze. Gerne möchte ich diese Liste und meinen Horizont noch erweitern. Wenn ihr also was empfehlen könnt, dann schreibt mir ruhig:).

Mit diesem ersten Teil hoffe ich, euch einen Einblick in den korrekten Newsletteraufbau gegeben zu haben und möchte sogleich mit einem Ausblick auf die weiteren Artikel der Serie hinweisen. Denn im nächsten Teil geht es ganz um das Design und den grundlegenden, optischen Aufbau eines Newsletters. Optimale Strukturierung, gezielte Userführung sowie den Einsatz von Eye-catchern – natürlich garniert mit eindrucksvollen Beispielen. Den Abschluss bildet dann ein Artikel rund um das Marketing, die Kundenansprache, das Tracking und die abschliessende Auswertung eurer Newsletterkampagne – mit vielen nützlichen Tools. Also bleibt dabei, wenn es euch gefallen hat.