PlatzieredieeinzelnenBauteileDeinesNewsletersimmerandergleichenStele,damitder Nutzersichim Newsleterzurechtfindet.

Transkript

1 Seite1von7 1.0 Allgemeines Dieses Dokument soll ein erster Leitfaden und eine Sammlung von Praxistipps und Erfahrungen sein, die bei er Planung und Realisierung helfen können. Newsletter Vorlagen sind keine Webseiten und unterliegen ganz eigenen technischen Rahmenbedingungen, die auch erfahrenen Webmastern oft unbekannt sind. Wir möchten mit diesem Dokument helfen den Planungs und Gestaltungsprozess einfacher und schneller zu machen, um am Schluss für unsere Kunden das jeweils bestmögliche und passende Produkt bereit zu stellen. 1.1 Corporate Identity HalteDichfürdenbesserenWiedererkennungswertanDeinCorporateDesign,sofern vorhanden.benutzedeinfirmenlogo,firmenfarbenunddieelementedeines Internetauftrittes. PlatzieredieeinzelnenBauteileDeinesNewsletersimmerandergleichenStele,damitder Nutzersichim Newsleterzurechtfindet. 1.2 Die Breite VieleNutzerlesenE Mailsnurim VorschaufensterihresMailprogramms(Client).Ausdiesem GrundsoltedieBreitedesNewsletersbegrenztseinundsichnachgängigenMonitorgrößen undauflösungenrichten.550 bis 650 Pixel sindeinguterrichtwert. Im Zweifelsfalliebereinwenigzuklein,alszugroß.Niemandscrolthorizontalineinem Newsleter. Dokument:800pxbreit. NL Breiteim Durchschnitca.630px 1.3 Die Höhe einesdurchschnitlichenvorschaufenstersbeträgtetwa300 bis 500 Pixel.Daheristesratsam, alerelevanteninformationenindiesenbereichzusetzen.selbstwennmandennewsleter nichtindervolbildansichtöfnet,erfasstmansodiekernaussageaufeinenblick. 1.4 Klare Struktur

2 Seite2von7 DeinNewsletersolteübersichtlichundnichtzulangsein.DiewichtigenPunktesoltendeutlich, aberinteligenthervorgehoben werden.gliedereeinzelnethemenblöcke,strukturiere InhaltemitabgesetztenÜberschriften,Trennlinien,BildernundAbsätzenetc. Verwende dabei unterschiedliche Überschriftengrößen, farben und Textformatierungen wie fett oder kursiv sparsam. Sie sollen helfen bestimmte relevante Punkte oder Inhalte leicht auffindbar zu machen, setzt man zu viele solche Elemente parallel ein, wird das Gesamtbild unruhig und mehrdeutig

3 Seite3von7 2.0 Bauteile 2.1 Pre-Header oder Rettungslink ErbefindetsichinderRegelanderoberstenKantedesNewsleters,nochvoralenanderen Inhalten,undwirdmitderWeb VersionderE Mailverlinkt.DenLinksoltemandabeiam besten obenlinksoderzentriertplatzieren,damitersofortsichtbarist. Den Link bitte in Textform integrieren, da nicht alle E Mail Clients Bilder sofort anzeigen. Beispiel Rettungslink 2.2 Der Header bzw.sichtbarevorschaubereich,soltezum eineneinblickfangsein,aberauchschonetwas überdeninhaltveraten.im Headersindgroße,emotionaleBilder,aussage kräftigeslogans oderkurzeeditorialszuintegrieren. NutzedenVorschaubereichals Eyecatcher,platzierehierCal to ActionButonsoderweise aufdasanliegen/haupthemadesnewsletershin.hierhabensichslogansingroßertextgröße oderbilderbewährt.

4 Seite4von7 2.3 Navigationsleiste integriereindernavigationnurdiewirklichrelevantenlinks.derversuchdiegesamte NavigationderWebsitezuintegrierenistmeistwenigerfolgreich.WiediePraxiszeigt,werden LinksderArt Überuns oder UnserTeam in derregelgarnichtangeklickt.mankanndie wichtigerenpunkteoptischdurchfarbe,größeoderkontrasthervorheben.dienavigationkann im Fußbereichwiederholtwerden. 2.4 Personalisierung EinepersönlicheAnredewirktinderRegelangenehmerunddirekter.Nebendereinleitenden PersonalisierungkannDeineUnterschrift,einFotovonDiroderdem Newsleter Autor,aber aucheinekontaktboxeingebautwerden,inderdudenempfängerüberseinenansprechpartner informierenkannst. VieleB2CNewsleterverwendenhierfüraucheinenvirtuelenAnsprechpartner,alsoeinefiktive Person,diesichalsMitarbeiterundAnsprechpartnerpräsentiert,selbstwennderNewsleterund aleantwortmailsvoneinem Team bearbeitetwerden.solcheinepersona repräsentiertdeinen Service/SupportundwirdinderRegelvonEmpfängernderNewsleterbesserangenommenals einnewsleter,derunpersönlichvonwir redet. 2.5 Inhaltsverzeichnis Zum besserenüberblicküberbeiträgeininhaltsreicherennewsleternempfiehltsichdas Inhaltsverzeichnis.EsbestehtinderRegelausdenArtikelüberschriftenundermöglichtden SprungzuAnkerpunkteninnerhalbderKampagne. 2.6 Bilder und Texte VersucheeineoptimaleAusgewogenheitim VerhältnisText/Bilderzuerzielen.Nachrichtenmit zuvieltextwerdenoftnicht(zuende)gelesen,nachrichtenmitzuvielengrafikenwerdenoft alsspam aussortiert. Verwende Bilder um die Aussage im Text zu visualisieren, nicht um zusätzliche Informationen zu vermitteln. Bilder dienen als Eyecatcher und zur emotionalen Anreicherung der Textinformationen.

5 Seite5von7 2.7 Call-to-Action Elemente soltenfarblichundgestalterischhervorgehobenwerdenundzurcorporateidentitydeinerfirma passen.positionieredieelementeim oberennewsleterbereich. 2.8 Social Media VerknüpfeE MailNewsletermitSocialMedia.BindeinderDesignvorlagedieSWYN Butonsfür jedenartikeleinundverweiseaufdeineseiten/profileindensocialnetworks. 2.9 Verlinkung Mandarfim InhalteinesNewsletersruhigmehrereLinkseinbauen.ÜberBilder,überdiverse Butonswiez.B. mehrinformationen, zum Shop sowieübertextlinks.esistwünschenswert, Textlinkszuunterstreichen,mitsolchenLinksfindetsichderEmpfängergutzurecht.Texteohne Linkssoltenwennmöglichnichtunterstrichenwerden,weildasdenNutzeriritiert Möglichkeit der Abbestellung DieNewsleterohneAbmeldemöglichkeitverstoßengegengeltendesRecht!Dieklassische PlatzierungdesAbmeldelinksistim Fußbereich,mankannihnjedochauchoberhalbdes NewsletersplatzierenohnedabeimiterhöhterAbmelderatezurechnen.Im Gegenteil,Du signalisierstdem EmpfängerDeineBereitschaftseineRechteundWünscheernstzunehmen undveringerstdiebeschwerderate EmpfängerhabenkeineLusterstansEndeeines Newsleterszuscrolenum sichabzumelden.esistvielleichterfürsiedeinennewsleterals Spam zumarkieren! 2.11 Impressum AuchNewsletermüsseneinenklarerkennbarenAbsenderundfürdenInhaltVerantwortlichen nennen,alerdingsnichtsoumfangreichwiebeieinerwebseite.dasimpressum solte optimalerweisename,anschrift,vertretungsberechtigte(r),telefonnummer,e Mail Adresse, Handelsregister undsteuernummerenthalten.

6 Seite6von7 3.0 Nützliche Hinweise SchonbeiderGestaltungderVorlagemussmandieBesonderheitendertechnischen GegebenheitenvonE Mailsberücksichtigen: 3.1 Spamvermeidung AusgewogenesText Bild Verhältnis(sieheoben)istfürdiekorekteZustelungeinFaktor VerzichteaufdenflächendeckendenEinsatzderFarbenRotoderPink.Dusiehsthier sicherschon,warum. 3.2 Schriftarten VerwendebitenurdieStandardwebschriftenwieArial,Calibri,Verdana,Tahoma,Georgiaetc. Web FontsundlokalinstalierteSchriftartenwerdeneinfachnichtzuverlässigunterstütztund dasgesamtbildleidetsehr,wennderclientdesempfängerseineverfügbareschriftalsersatz auswählenmuss. 3.3 CSS XHTML und CSS TechnikenwerdenvonmeistenE Mail Programmennichtoder nur rudimentärunterstützt.beie MailVorlagenherschenleidernichtdiegleichenBedingungenund FreiheitenwiebeiWebseiten,daE MailClientstechnisch5 10JahrehinterderEntwicklungvon Browsernzurücksind,wasdieInterpretationsmöglichkeitenvonHTML,CSS,Javascriptusw. angeht.zusätzlichverfolgenaleclientssehrunterschiedlichestandardsoderversionendieser Auszeichnungssprachen,sodasseineVerwendungvonCSSwiebeiWebseitenleidernicht möglichist. 3.4 Video, Audio und Flash DieseInhaltewerdenimerwiederangefragt(Flashzunehmendweniger),aberausdengleichen GründenwiebeiCSSko nnensienachwievornichtim Clientwiedergegebenwerden.Mankann Newsleterverschicken,dieaugenscheinlichVideosenthalten,alerdingssinddasimmernur Platzhalter,z.B.animierteGIFsoderstatischeBilder,dieaufdaseigentlicheVideoverweisen, dassnachwievorim Browsergeöfnetwerdenmuss. 3.5 Formulare und Scripte

7 Seite7von7 HTMLFormulareundJavascript,JavaAppletsundähnlicheAnwendungenko nnennicht innerhalbvone MailClientsverarbeitet,sprichausgeführt,werden.DieE MailClientHersteler undwebmailerbetreiberargumentierenhiermitsicherheitsrisikenundparsen(löschen) derartigencodeoftrigorosausnewsleternheraus. 3.6 Hintergrundgrafiken & Schatten sindnurbedingtodergarnichtrealisierbar.diehierfürvorgesehenenmethodenfunktionierenin E MailClientsnichtodernichtinausreichendem Maße. Workarounds,z.B.miteinerVielzahlvoneinzelnersteltenTeilbildern,diemanineine kompliziertehtml Tabeleeinfügt,sindnurbeiVorlagenmitfesterSeitenbreitemöglich,sehr aufwändigundfehleranfälig(vielee MailClientsscheiternauchhieranderDarstelung). 3.7 Texturen sindteilweiserealisierbarundwerdensogarineinigenversionenvonoutlookdargestelt. AlerdingsbenötigenwirfürsolcheUmsetzungeneingeeigneteskachelbaresMuster,die ErstelungsolcherMusteristaufwändigundteuerundsoltevonprofessionelenGrafikern durchgeführtwerden.