Designguide för e-post

Transkript

1 Designguide för e-post Så anpassar du formen efter bildblockering, spamfilter och bråkiga e-postklienter

2 Innehåll Vad ögat ser har betydelse för hur det smakar......räcker det då med bra innehåll eller påverkar även formen upplevelsen? 1.0 Påverkar designen resultatet? Nyhetsbrevets beståndsdelar Att tänka på vid design av e-post Anpassa formen även för bildblockering Undersökning om bildblockering Texttips till nyhetsbrevsskribenter Underskatta inte problemen med spamfilter Anpassa brevet efter olika e-postklienter Skillnader på olika typer av e-postutskick Traditionella nyhetsbrev Filtrerade nyhetsbrev Nyhetsbrev - ett komplement till webbsidan Apsis Newsletter Pro Om Apsis 42 3

3 1.0 Påverkar designen resultatet? Bra design är ofta avgörande för hur väl e-postmarknadsföring fungerar. Det är lätt att få intrycket att design för e-post bara handlar om att minimera misstag. Att det är tekniska hinder som dikterar villkoren och att designern i bästa fall kan skapa något som inte ser allt för hemskt ut. Och visst, generellt sett är e-postdesign betydligt mer begränsad än modern webbdesign. E-postklienter klarar inte av all design och alla funktioner på samma sätt som en webbläsare gör. Det gäller både installerade programvaror som Microsoft Outlook, Lotus Notes och webbaserade lösningar som Hotmail eller Gmail. Man måste därför tänka runt problemen för att skapa en bra grafisk form. blir vad designern hade tänkt sig. Det som var snyggt på den egna datorn riskerar att förvandlas på vägen så att brevet ser helt annorlunda ut i olika e-postklienter. Och allt som går snett med designen påverkar givetvis läsaren. Är det något vi kan vara säkra på är det att designen har stor betydelse för responsen. Vi har hjälpt många företag att anpassa e-postutskick efter marknadens alla e-postklienter, och det är inte lätt alltid. Här nedan ser du till exempel hur ett utskick kan skilja sig i tre välkända e-postklienter. Apple Mail Du kanske väljer ett rent textmail för att slippa de här problemen. Men vad vinner du på detta egentligen? En undersökning som vi genomfört visar att textmail har 30 % lägre öppningsfrekvens än HTML-brev - och då har vi inte ens börjat fundera på hur mycket mer positivt ett snyggt brev tas emot av läsarna. Samtidigt bör man tänka på att det är olika former av kommunikation. Ett nyhetsbrev är inte en webbplats, lika lite som en trailer är en hel film. En trailer lockar och skapar ett intresse, som filmen följer upp. Man kan inte jämföra dem rakt av, utan man bör istället konstatera att det är två olika produktioner som drar åt samma håll. För designern som ska göra ett nyhetsbrev handlar det därför inte om att göra en sorts sämre webbsida, utan om att göra något som står på egna ben. Ett nyhetsbrev är ett kraftfullt verktyg som kan locka till handling men du som kommunikatör måste bestämma dig för vilken typ av handling du vill få fram. Den här guiden har vi gjort för att hjälpa dig som ska skapa grafiskt tilltalande e-postkommunikation. Vi kommer inte att försöka lära ut något om utseende eller grafisk form det är vi övertygade om att du har koll på. Däremot ser vi ofta att goda idéer inte alltid Microsoft Entourage Gmail Tänk så här: varje medium vilket det än är har sina svårigheter och sina begränsningar i ena vågskålen. I andra vågskålen ligger möjligheterna. När det gäller e-postmarknadsföring är vågskålen med möjligheter många, många gånger tyngre. Den tid du lägger ner på att lära dig behärska e-post har du igen många gånger om. För att lyckas behöver du kunna en hel del om ditt verktyg vilka styrkor och svagheter som finns och vilka möjligheter och begränsningar e-postmarknadsföringen erbjuder. Trevlig läsning! 4 5

4 2.0 Nyhetsbrevets beståndsdelar Nyhetsbrev kan se ut på många olika sätt, men det finns vissa element som finns med i så gott som alla brev. Här är byggstenarna i ett modernt nyhetsbrev. Tipsa en vän Avregistrera dig Kontakta oss Caesarsallad med grillade räkor och parmesanbröd En Caesarsallad utan kyckling? Vi söker inspiration i skärgården och bjuder på sallad med havets läckerheter. Låt Caesarsalladen erövra ditt matbord Preheader. En andra chans till ämnesrad. Preheadern är det första som syns i ett nyhetsbrev och bör användas som ett sätt att få fram brevets viktigaste budskap till de som blockerat bilder. Länk till webbversion av nyhetsbrevet. Många blockerar bilder i sin e-postklient och vissa föredrar att läsa sina brev i en webbläsare. En länk till webbversion gör det möjligt. Länkar för avregistrering, tipsa en vän och kontakt. Det är viktigt att visa tydligt hur man som mottagare kan sluta prenumera på nyhetsbrevet. Sidhuvud/avsändare. Det som avgör om ett brev blir öppnat eller inte är oftast att läsaren känner till och litar på avsändaren. Att presentera sitt namn och sin logotyp i sidhuvudet är en självklarhet, men gå inte till överdrift. Det är innehållet som är det viktiga inte logotypen. Månadens fruktsallad Mmm... melon! Sommarens skönaste frukter i en svalkande lag med stjärnanis och mynta. Skapa sommarens bästa fruktsallad Veckans grönsak fänkål Den lätta lakritsdoften och den härliga knaprigheten gör fänkålen lätt att älska, både som tillbehör och när den får spela huvudrollen. Vi visar vägen till fänkålen! Flera finfina fänkålsrecept Rubrik. Över 40 % av tiden som spenderas på att läsa ett nyhetsbrev läggs på rubriker, trots att de upptar så liten yta i brevet. Det är väl värt att lägga mycket tid på att hitta rätta formuleringar till rubrikerna. Ingresstext. Ingressen väcker intresse och sätter tonen för det som händer efter klicket. En kort ingress är som regel bättre på att locka till klick. Läs mer-länk. En länk med en tydlig uppmaning eller ett erbjudande ger fler klick än om man bara skriver Klicka här. Se till att utnyttja länkarna det finns ofta många länkar att jobba med i ett nyhetsbrev. Bild. Nyhetsbrev med bilder ger bättre respons än rena textbrev plus att de ser betydligt trevligare ut. Samtidigt är bilder en av designerns största utmaningar, eftersom det finns en hel del tekniska begränsningar som är unika för e-post. Bakgrundsfärg. Bilder eller färger som ramar in brevet ser ofta trevliga ut på skissblocket, men kräver en del för att fungera i verkligheten. Vissa e-postklienter visar inte bakgrundsbilder. Sidfot med tydliga kontaktuppgifter. Sidfoten markerar slutet på brevet - och hit är det överraskande många som hittar. Att visa sina kontaktuppgifter tydligt signalerar att du är en seriös avsändare som gärna bjuder in till dialog. 6 7

5 3.0 Att tänka på vid design av e-post Många som startar nyhetsbrev går in i projektet med stor entusiasm. Tyvärr fokuserar man ibland väl mycket på att få detaljerna på plats. Då missar man det som egentligen har betydelse för att utskicken ska komma fram och allt som är avgörande för hur öppningsfrekvensen och klickstatistiken kommer att se ut efter en tids utskick. Tänk på formatet Det första man bör tänka på är att många läser sina brev i e-postklientens förhandsgranskningsfönster. Vissa mottagare har dessutom väldigt små förhandsgranskningsfönster som ligger vertikalt längs med ytterkanten. Många e-postklienter, bland annat Microsofts Outlook, Entourage och Hotmail erbjuder den här möjligheten. Hur ser ditt brev ut i förhandsgranskningsfönstret? Ett aningen snävt, vertikalt förhandsgranskningsfönster i Microsoft Entourage. E-postfönstrets totala bredd är i detta fall 1024 pixlar. Viss scrollning i sidled uppstår trots att nyhetsbrevet endast har en bredd på 560 pixlar. Om du vill ha ett brett brev måste du räkna med att dina läsare behöver scrolla i sidled. Andelen som läser e-post i mobiltelefonen eller på handdatorn blir också fler. Ett nyhetsbrev bör därför inte vara mer än 600 pixlar i bredd. Runt 500 pixlar är optimalt. Planera den yttre formen Det är vanligt att man utgår från hemsidan, broschyrer eller brevpapper första gången man utformar ett nyhetsbrev. Man lyfter in hela sektioner från hemsidan eller tung, snygg och effektfull grafik från trycksakerna. Försök istället se e-post som ett eget kommunikationsmedium. Det ligger närmare ett personligt brev och man har betydligt kortare tid på sig att fånga uppmärksamheten i ett brev jämfört med en hemsida. Håll formen enkel och om du har mycket att berätta se till att länka vidare till hemsidan. Apsis eye-trackingstudie, en undersökning som visar hur mottagaren läser e-post på datorn, visar följande: Vänsterspalten får 80 % mer uppmärksamhet än högerspalten Breven läses i snitt i 11 sekunder Nästan 40 % av tiden läggs på rubriker Samtliga personer valde att läsa i förhandsgranskningsfönstret Ovanstånde bör inte ses som riktlinjer, bland annat hade testpersonerna inte valt att prenumerera på just de brev de fick läsa. Men det är punkter som är väl värda att tänka på när du skissar upp ditt nyhetsbrev. Arial Comic Sans MS På säkra sidan med grafik och text Courier New Snygg och effektfull grafik i form av Georgia skuggningar, sektioner som överlappar Impact varandra och transparenta block som ligger Times New Roman i flera lager är vanliga designelement på Trebuchet MS webben. Men dessa är svåra att få till i vissa Verdana e-postklienter, framförallt på grund av saknat 8 9

6 HTML- och CSS-stöd. Skapa istället en enkel form och skilj alltid på text och bild. Lägg alltså inte text som bilder eller i bilder. Om du har särskilda typsnitt du brukar använda i dina trycksaker och på hemsidan kommer dessa troligtvis inte att fungera för e-post. Håll dig till de webbsäkra typsnitten. Två sorters bakgrundsbilder som fungerar Det finns två typer av bakgrundsbilder du kan använda i e-post och de beter sig lite olika beroende på vilken e-postklient mottagaren sitter på. En del e-postklienter, bland annat Outlook 2007 och Lotus Notes, saknar stöd för den ena varianten av bakgrundsbilder. Just dessa två e-postklienter är ganska stora och vanliga i kontorsvärlden så du gör bäst i att bygga en design som inte är beroende av att bakgrundsbilder av den här typen fungerar. Det som händer i e-postklienter med saknat stöd för bakrundsbilder är att bilderna helt enkelt försvinner. De lämnar dock inga rutor eller röda kryss efter sig som vid bildblockering. Den ena varianten kan du lägga som en bakgrundsbild bakom nyhetsbrevet, det vill säga som e-postfönstrets bakgrund. Just denna typen av bakgrund fungerar både i Outlook 2007 och Lotus Notes, däremot saknar den stöd i många välkända webbaserade e-postklienter som Gmail och Hotmail. Den andra varianten lägger du som en eller flera bakgrundsbilder i brevet. Du lägger bilden som bakgrund på det objekt du vill ha den, till exempel på en ruta med text. Det är den här typen av bakgrundsbilder som Outlook 2003 Mmm... melon! Sommarens skönaste frukter i en svalkande lag med stjärnanis och mynta. Outlook 2007 Mmm... melon! Sommarens skönaste frukter i en svalkande lag med stjärnanis och mynta. är mest användbara, men de försvinner i Outlook 2007 och Lotus Notes. Däremot fungerar de i Gmail, Hotmail och många andra klienter. För att sammanfatta är det ofta bäst att låta bli bakgrundsbilder helt och hållet och sträva efter en design som ser likadan ut i alla e-postklienter. Bakgrundsbilder innefattar även bakgrundsfärgtoningar, att exempelvis tona en bakgrund från ljust till mörkt. Animationer och script passar inte i e-post GIF-animationer fungerar i de flesta stora e-postklienter men inte i Microsoft Outlook Första bildrutan syns, men resten visas inte. Placera därför det viktigaste i första rutan om du tänker använda GIF-animationer då syns den som en vanlig bild. Flash fungerar ytterst sällan i e-post. Om du gör ett e-postutskick med Flash-animationer är det väldigt få mottagare som kommer att se dem på ett korrekt sätt. Samma sak gäller för JavaScript. Även om det finns stöd för JavaScript i enstaka klienter blockeras det ofta av säkerhetsskäl. Formulärkod i form av enkäter, anmälningsformulär, sök- och inloggningsfält fungerar inte i de flesta e-postklienter. Länka vidare ut på webben till den här typen av innehåll. Avregistreringslänken bör vara tydlig En tydlig länk för avregistrering är viktig av flera anledningar. Den skapar ett förtroende hos mottagaren. Känslan att man snabbt och enkelt kan avregistrera sig är viktig och bidrar till att nyhetsbrevet inte upplevs som påtvingande. En positiv bieffekt är att du minskar risken att bli svartlistad, något som kan hända om många mottagare hellre markerar ditt brev som spam än letar upp avregistreringslänken. Undvik att lägga länken i en bild eller som en bildknapp då många blockerar bilder. Du vill att mottagaren ska få tillgång till den oberoende av de tekniska förutsättningarna. Det bästa är att ha en avregistreringslänk både högst upp och längst ner i e-postutskicket

7 Bakgrundsbilder på skissbordet: Nyhetsbrev med färgtoning i bakgrunden, tunga bakgrundsbilder, transparenta, överlappande objekt samt särskilda typsnitt för rubrikerna. Bakgrundsbilder i e-postklienten: Så här ser det ut i e-postklienterna Microsoft Outlook 2007 och Lotus Notes, då stöd för bakgrundsbilder helt saknas och det valda typsittet inte finns på mottagarens dator. Tipsa en vän Avregistrera dig Kontakta oss Caesarsallad med grillade räkor En Caesarsallad utan kyckling? Vi söker inspiration i skärgården och bjuder på sallad med havets läckerheter. Tipsa en vän Avregistrera dig Kontakta oss Låt Caesarsalladen erövra ditt matbord Caesarsallad med grillade räkor Månadens fruktsallad Mmm... melon! Sommarens skönaste frukter i en svalkande lag med stjärnanis och mynta. En Caesarsallad utan kyckling? Vi söker inspiration i skärgården och bjuder på sallad med havets läckerheter. Låt Caesarsalladen erövra ditt matbord Skapa sommarens bästa fruktsallad Månadens fruktsallad Veckans grönsak fänkål Den lätta lakritsdoften och den härliga knaprigheten gör fänkålen lätt att älska, både som tillbehör och när den får spela huvudrollen. Vi visar vägen till fänkålen! Flera finfina fänkålsrecept Mmm... melon! Sommarens skönaste frukter i en svalkande lag med stjärnanis och mynta. Skapa sommarens bästa fruktsallad Veckans grönsak fänkål Den lätta lakritsdoften och den härliga knaprigheten gör fänkålen lätt att älska, både som tillbehör och när den får spela huvudrollen. Vi visar vägen till fänkålen! 12 13

8 Brevet Förslag på lösning: Sträva efter balans mellan text och bild, frilägg alla objekt och använd endast webbsäkra typsnitt. Nyhetsbrevet nedan ser i stort sett identiskt ut i alla välkända e-postklienter. Sammanfattning Tipsa en vän Avregistrera dig Kontakta oss Caesarsallad med grillade räkor En Caesarsallad utan kyckling? Vi söker inspiration i skärgården och bjuder på sallad med havets läckerheter. bör vara mellan pixlar brett för att synas i förhandsgranskningsfönstret utan att läsaren ska behöva scrolla i sidled. Det optimala måttet i just detta avseende är 560 pixlar. En eye-trackingstudie visar att 80 % av tiden som läggs på ett nyhetsbrev spenderas i vänsterspalten. Hela 40 % av tiden läggs på rubriker. Lägg inte text i bilder. Om bilden blockeras försvinner texten och ditt brev blir omöjligt att förstå. Välj webbsäkra typsnitt. Månadens fruktsallad Mmm... melon! Sommarens skönaste frukter i en svalkande lag med stjärnanis och mynta. Skapa sommarens bästa fruktsallad Låt Caesarsalladen erövra ditt matbord Om du vill ha en bakgrundsbild, se till att du anger både bakgrundsfärg och bakgrundsbild. Då ökar du sannolikheten för att ett av alternativen visas. Om du använder en GIF-animation, lägg den viktigaste bilden först i animationen så att du vet att den visas även om inte animationen fungerar. Lägg länken för avregistering så att den är lätt att se. Veckans grönsak fänkål Den lätta lakritsdoften och den härliga knaprigheten gör fänkålen lätt att älska, både som tillbehör och när den får spela huvudrollen. Vi visar vägen till fänkålen! Flera finfina fänkålsrecept 14 15

9 Slutsatser: Det här orsakar problem i många e-postklienter. Vad du kan göra... Tipsa en vän Kontakta oss Särskilda typsnitt. Typsnittet Savoye LET som används här är inget standardtypsnitt i Microsoft Windows och kommer förmodligen inte att fungera hos de flesta mottagare. Du kan sätta ut särskilda typsnitt som förstahandsval, men ange i så fall ett webbsäkert typsnitt som andrahandsval. Caesarsallad med grillade räkor En Caesarsallad utan kyckling? Vi söker inspiration i skärgården och bjuder på sallad med havets läckerheter. Månadens fruktsallad Mmm... melon! Sommarens skönaste frukter i en svalkande lag med stjärnanis och mynta. Veckans grönsak fänkål Låt Caesarsalladen erövra ditt matbord Skapa sommarens bästa fruktsallad Den lätta lakritsdoften och den härliga knaprigheten gör fänkålen lätt att älska, både som tillbehör och när den får spela huvudrollen. Vi visar vägen till fänkålen! Flera finfina fänkålsrecept Bakgrundsbilder bakom brevet. Fungerar inte i Hotmail och Gmail, bland annat. I det här fallet används en färgtoning. Om du trots allt vill använda en bakgrund, se till att också ange en bakgrundsfärg som ersätter bakgrunden om den försvinner, såvida du inte vill ha en vit bakgrund. Det går att gå runt problemet och få till en bakgrund genom att lägga en omslutande tabell runt brevet och lägga bakgrunden i denna. Bakgrundsbilder i brev. Fungerar inte i bland annat Outlook 2007 och Lotus Notes. Samma sak som beskrivs ovan, du kan lägga bakgrundsfärger på till exempel textrutor som syns när bakgrunden försvinner. Transparenta objekt. Vanligt förekommande på webben. Kan göras med CSS och transparenta bilder, ofta PNG-bilder. Effekten försvinner i många e-postklienter och lämnar en vit ruta. Använd bilder i formatet GIF eller JPG. Avregistrera dig Svåråtkomlig avregistreringslänk. Det går bra att lägga länken längst ned i hörnet, men den borde då även ligga högt upp i brevet

10 3.1 Anpassa formen även för bildblockering 3.2 Undersökning om bildblockering Stora, snygga bilder en självklarhet? Ja, många som arbetar med att skapa nyhetsbrev vill att de ska se så bra ut som möjligt. Och alla som prenumererar på nyhetsbrev vill troligen också ha en bra upplevelse och bli inspirerade av det som hamnar i inboxen. Att brevet är relevant, helt enkelt. Ändå är bilder blockerade som standard i många stora e-postklienter. Anledningen är givetvis säkerhetsskäl. Ett nyhetsbrev utan bilder känns idag som kaffe utan latte? Grundstommen finns kvar, men det som gör att brevet lyfter saknas. Det är tveklöst så att bilder tillför mycket till alla typer av nyhetsbrev. Många nyhetsbrev är idag helt beroende av att bilderna syns. Men vad händer om alla bilder försvinner? Att det inte ser lika snyggt ut är självklart, men går det överhuvudtaget att förstå någonting i brevet? Se till att ditt brev går att förstå utan bilder och att du gör vad du kan för att locka dina läsare att ladda ned bilderna. Det handlar inte bara om utseende, eftersom du inte får någon statistik för brev som inte laddar ner bilder. Vilken e-postklient använder du? Entourage för Mac Thunderbird Hotmail Mail för Mac Gmail Nej 6 % 5 % 5 % 13 % 63 % Lotus Notes 10 % Outlook % 6 % 11 % Outlook 2007 Laddar din e-postklient bilder automatiskt? 4 % 16 % 40 % Ja, men är osäker på grundinställningen Ja, jag har ändrat grundinställningen så att den hämtar automatiskt Ja, den var inställd så från början Ett sätt att förmedla information även om bilderna är blockerade är alt-attribut. Det innebär att man skriver en text som förklarar vad bilderna föreställer. Om bilden inte syns, så ser man i alla fall texten och får en möjlighet att förstå sammanhanget. Apsis egna enkätundersökning om bild-blockering från 2009 visar att 63 % blockerar bilderna i sina e-postklienter i Sverige. I Norge är siffran 72 %. 63 % Hela 63 % blockerar bilder som standard. Om du inte laddar bilder automatiskt, vad får dig att ladda dem? En känd avsändare 75 % 10 % 15 % Annan anledning En bra rubrik på brevet 18 19

11 Ej anpassat för bildblockering: Nyhetsbrev med stort sidhuvud, bildrubriker och inga alt-texter för blockerade bilder Anpassat för bildblockering: Nyhetsbrev med litet sidhuvud, textrubriker och alt-texter utskrivna för blockerade bilder Tipsa en vän Avregistrera dig Kontakta oss Salladsskålen Tipsa en vän Avregistrera dig Kontakta oss Caesarsallad med stekta räkor En Caesarsallad utan kyckling? Vi söker inspiration i skärgården och bjuder på sallad med havets läckerheter. Caesarsallad Caesarsallad med grillade räkor En Caesarsallad utan kyckling? Vi söker inspiration i skärgården och bjuder på sallad med havets läckerheter. Låt Caesarsalladen erövra ditt matbord Månadens fruktsallad Mmm... melon! Sommarens skönaste frukter i en svalkande lag med stjärnanis och mynta. Skapa sommarens bästa fruktsallad Låt Caesarsalladen erövra ditt matbord Månadens fruktsallad Mmm... melon! Sommarens skönaste frukter i en svalkande lag med stjärnanis och mynta. Fänkål Skapa sommarens bästa fruktsallad Fruktsallad Veckans grönsak fänkål Veckans grönsak fänkål Den lätta lakritsdoften och den härliga knaprigheten gör fänkålen lätt att älska, både som tillbehör och när den får spela huvudrollen. Vi visar vägen till fänkålen! Den lätta lakritsdoften och den härliga knaprigheten gör fänkålen lätt att älska, både som tillbehör och när den får spela huvudrollen. Vi visar vägen till fänkålen! Flera finfina fänkålsrecept Flera finfina fänkålsrecept 20 21

12 Lösningsförslag med bilderna på ena kanten och texten på andra: Här har vi lagt alla bilder endast som halva bilder längs högerkanten vilket innebär att de tar mindre uppmärksamhet när de blockeras, samt att textlayouten på vänstersidan inte påverkas av bildblockeringen. Lösningsförslag med bilderna i botten: Genom att placera all grafik i botten blir texten det första som möter läsaren oavsett om bilderna är blockerade eller ej. Även i det här fallet förblir textlayouten intakt. Tipsa en vän Avregistrera dig Kontakta oss Tipsa en vän Avregistrera dig Kontakta oss Caesarsallad med grillade räkor En Caesarsallad utan kyckling? Vi söker inspiration i skärgården och bjuder på sallad med havets läckerheter. Låt Caesarsalladen erövra ditt matbord Caesarsallad med grillade räkor En Caesarsallad utan kyckling? Vi söker inspiration i skärgården och bjuder på sallad med havets läckerheter. Låt Caesarsalladen erövra ditt matbord Månadens fruktsallad Mmm... melon! Sommarens skönaste frukter i en svalkande lag med stjärnanis och mynta. Skapa sommarens bästa fruktsallad Månadens fruktsallad Mmm... melon! Sommarens skönaste frukter i en svalkande lag med stjärnanis och mynta. Skapa sommarens bästa fruktsallad Veckans grönsak fänkål Den lätta lakritsdoften och den härliga knaprigheten gör fänkålen lätt att älska, både som tillbehör och när den får spela huvudrollen. Vi visar vägen till fänkålen! Flera finfina fänkålsrecept Veckans grönsak fänkål Den lätta lakritsdoften och den härliga knaprigheten gör fänkålen lätt att älska, både som tillbehör och när den får spela huvudrollen. Vi visar vägen till fänkålen! Flera finfina fänkålsrecept 22 23

13 4.0 Texttips till nyhetsbrevsskribenter Rubriker som designelement Alla förstår att rubriker är viktiga, men när det gäller nyhetsbrev är de faktiskt det enskilt viktigaste elementet. Apsis eyetrackingstudie har visat att runt 40 % av tiden som spenderas på ett nyhetsbrev läggs på att läsa rubriker även när det finns gott om annat att titta på i brevet. Rubrikerna får betydligt mer uppmärksamhet än bilder och övrig text. Det gör att det är väl värt att lägga tid på att formulera bra rubriker och också att prova sig fram med upprepade tester. Ny grönsaksleverantör! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Läs mer Vill du ha ekologiska grönsaker till bättre priser? Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Våra ekopriser hittar du här! Rubriken måste beröra. Även om det svider en smula kan det vara bra att komma ihåg att människor inte är särskilt intresserade av dig och din verksamhet. De är däremot intresserade av hur du och ditt företag kan påverka dem i deras vardag. Det är en viktig skillnad. Ny grönsaksleverantör är en rubrik som inte säger läsaren något, men om du berättar att det gäller något fint till lägre priser ja, då lär du få läsare. Hämta gärna inspiration av hur tidningar tänker när det gäller löpsedlar och rubriker. De använder inte alltid hela meningar eller korrekt grammatik. Du kan mycket väl vara kreativ och skriva överraskande rubriker. Så länge du håller det som rubriken lovar, förstås. Kreativiteten får inte slå över i rena fantasier. Då kommer du snart att ha förbrukat ditt förtroende hos läsarna. Ingresstexten. Lång eller kort? Några få korta rader är allt man har, om ens det. Men en bra ingresstext är guld värd. Den slår an tonen för artikeln och kan vara det som lockar till vidare läsning. Vad är rätt längd? Det är svårt att säga hur lång en ingress kan vara. Lagom är lagom och det är bättre att fokusera på innehållet än på en fast gräns. Men rent allmänt så finns det oftare för långa ingresser i nyhetsbrev än för korta. Du vill som regel locka läsaren av ett ett nyhetsbrev till en webbplats, så berätta inte allt i nyhetsbrevet. Då finns det ingen anledning att klicka vidare. Använd länktexterna! Länktexter är viktiga, inte minst som en visuell signal för läsaren. De fungerar som uppmaningar och vi har lärt oss av femton års surfande att en länk framför allt om den är blåfärgad och understruken betyder att vi ska klicka för att läsa mer. Det finns därför ingen anledning att skriva just Klicka här eller Läs mer. Det vet alla redan. Använd istället länktexterna till att samspela med rubrikerna och för att upprepa nyckelord och fraser. Uppmana gärna till handling men var tydlig med vad som händer när man väl har klickat på länken. Vi ser tydligt att välformulerade länktexter ger fler klick än om man bara skriver Klicka här. De tester Apsis gjort tillsammans med partners visar att länkar placerade till höger får mer klick än när de ligger till vänster. Formen får ofta bättre balans när placering på länkarna är till höger. Prova själv och utvärdera. Artiklar i nyhetsbrev. Är det någon skillnad att skriva på en webbplats och i ett nyhetsbrev? Om man ska vara krass så finns det i egentlig mening inte artiklar i nyhetsbrev, utan de ligger i de flesta fall på en hemsida. Kanske är det bra att se hela nyhetsbrevet som en enda stor ingress? Syftet 24 25

14 med nyhetsbrevet är ju oftast att uppmana läsaren att göra något och denna aktivitet, oavsett om det är att sälja eller informera, sker så gott som alltid via en hemsida. Så ja, det är skillnad men det är större skillnad mellan papper och data än mellan webb och mail. Det är två grenar på samma träd. Däremot måste man skilja på syftet med webb och mail. Webb står för funktionalitet medan mail förmedlar en känsla. Som alltid så bör man därför tänka på att webben är något man söker upp, medan mail kommer till sina mottagare utan att de nödvändigtvis är förberedda på det. Med läsaren väl framme på webbplatsen går det därför bra att ta plats och att publicera långa artiklar. Hur långa? Så långa som det krävs. En intresserad läsare tar sig gärna tid och vill gärna ha mer. Länka gärna till tidigare artiklar i liknande ämnen. Tänk på att en länk från ett nyhetsbrev ska leda direkt till artikeln eller erbjudandet som du lockar med. Skicka inte dina läsare till förstasidan. Ingen är intresserad av att behöva leta sig fram för att hitta det man är ute efter. Ett framgångsrikt exempel från Apsis nyhetsbrev 5.0 Underskatta inte problemen med spamfilter Varför ska jag som designer tänka på hur ett spamfilter fungerar? Jag tänker ju inte spamma någon? Nej, det tror vi naturligtvis inte. Men du vill att dina brev ska komma fram, och då är det bra att veta en del om hur spamfilter fungerar så att ditt utskick inte fastnar på vägen. Den vanligaste typen av spamfilter kallas bayesiska spamfilter och ett av de vanligaste filtren kallas SpamAssassin. Det filtret och andra av samma typ analyserar innehållet i ett brev och letar efter misstänksamma ord eller kombinationer av ord. Den här typen av spamfilter sitter ofta direkt i e-postklienten eller e-postservern och de lär sig med tiden hur du som användare spamklassar brev. Sedan jämför de tidigare brev du klassat som spam med de inkommande. Spamfiltren letar igenom ämnesraden, textinnehållet, länkar, avsändaren och en rad andra områden. Spammare försöker gå runt dessa filter genom att istället lägga meddelanden i bilder. Ofta är dessa brev rena bildmeddelanden, vilket spamfilterna numera också reagerar på. Därför ska man undvika att skapa e-postutskick som bara bygger på bilder. Det är också viktigt att man har någorlunda bra balans mellan textinnehåll och bilder, att det väger jämnt. Spamfilter kan nämligen reagera på att det är väldigt stora bilder och för lite text. Testa dig fram för att skapa förståelse för hur spamfilter fungerar. Några enkla grundregler är... Inga ord skrivna med versaler i ämnesraden Använd inte rödfärgade bokstäver Se till att inte textversion saknas när du skickar HTML-brev 26 27

15 6.0 Anpassa brevet efter olika e-postklienter Det finns många e-postklienter på marknaden och det finns inte två klienter som tolkar e-post på samma sätt. Det går trots detta alldeles utmärkt att jobba med nyhetsbrev och få dem att se bra ut hos de flesta e-postklienter. I det här kapitlet kommer du att lära dig hur du bygger e-post som fungerar. Ett sätt att lära sig att anpassa sina nyhetsbrev till olika klienter är att ha en lång lista med e-postklient efter e-postklient, och för var och en ange problemområden och möjliga lösningar. Men ett bättre sätt är att lära sig hur man gör för att bygga ett nyhetsbrev som fungerar bra överallt. Vi koncentrerar oss därför på det som krävs för att skapa ett sådant nyhetsbrev. Det här kapitlet är en aning tekniskt med kodexempel för att visa hur man verkligen gör. Gammal teknik fungerar bäst Du som är van att jobba med XHTML och CSS kommer troligvis att bli lite besviken när du börjar jobba med design av e-post. Det är lite som att förflytta sig tio år bakåt i tiden. Det som gäller för nyhetsbrev är gammal HTML med taggar som <table> och <font>. Modern HTML med <div> och CSS-layout fungerar helt enkelt inte särskilt bra i de flesta fall. CSS i nyhetsbrev CSS som är väldigt tidsbesparande och ger enkel och ren HTML-kod har väldigt dåligt stöd i de flesta e-postklienter. CSSpositionering, klasser och ID:n är helt uteslutet. Däremot kan du styra typsnitt, färger och liknande. Men ska du använda CSS är det inline-css som gäller. Alltså: du hårdkodar varje font-tagg så här: <font style= font-family: Verdana, sans-serif; font-size: 11px; >Lorem ipsum dolor sit amet...</font> Vill du trots allt styra vissa detaljer i hela brevet med CSS ska du placera din CSS-kod innanför <body> även om detta egentligen är fel. Vissa klienter klipper nämligen bort den kod som ligger innanför <head> där vi normalt sett har vår CSS. HTML i nyhetsbrev Tabellstrukturen måste vara väldigt enkel för att fungera i alla tänkbara e-postklienter, du ska helst inte ha för många rader och kolumner. Försök hålla nere antalet colspan i dina tabeller och undvik rowspan helt och hållet. Tabellattributet cellspacing fungerar inte heller överallt, det är därför säkrast att utesluta detta också. Vill du ha marginaler och mellanrum som fungerar i alla e-postklienter görs det enklast med små gif-bilder. Du använder en gif-bild som är 1 x 1 pixlar stor, i en tabellcell, och drar ut den så många pixlar som marginalen ska vara. Exempel med 10 pixlar marginal på båda sidor om ett stycke text: <td width= 10 ><img src= pixel.gif width= 10 height= 1 ></td> <td width= 480 >Här kommer innehåll...</td> <td width= 10 ><img src= pixel.gif width= 10 height= 1 ></td> Det hjälper att vara övertydlig. Skriv ut bredd på alla tabeller och tabellceller, framförallt om du jobbar med en design där du är tvungen att ha tabeller i tabeller. Måtten för bilder är också viktiga, både höjd och bredd bör vara angivna på samtliga bilder. Framförallt Lotus Notes har problem med bilder där mått saknas. Har du glömt höjden kan det till exempel hända att bilden antingen bara blir en pixel hög eller lika hög som bilden är bred. Jobbar du i ett system där du inte behöver koda själv men ändå har möjlighet att fylla i mått för bilder, se till att de alltid är ifyllda även här. I vissa fall kan det uppstå en oönskad marginal, eller ett litet glapp, 28 29

16 under vissa bilder i klienten Hotmail. Du löser detta genom att lägga en smula inline-css-kod på bildtaggen. Exempel: Före: <img src= runda_horn.gif > 7.0 Skillnader på olika typer av e-postutskick Efter: <img src= runda_horn.gif style= display:block; > Undvik nästlade tabeller så långt det går. Bäst resultat uppnår du om du delar upp koden i så många fristående tabeller som möjligt, snarare än bakar in allt i en enda stor tabell. Exempel: <!-- sidhuvud --> <table width= 500 cellpadding= 0 cellspacing= 0 border= 0 > <tr> <td width= 500 >Apsis</td> </tr> </table> <!-- innehåll --> <table width= 500 cellpadding= 0 cellspacing= 0 border= 0 > <tr> <td width= 500 >Här kommer innehåll...</td> </tr> </table> <!-- sidfot --> <table width= 500 cellpadding= 0 cellspacing= 0 border= 0 > <tr> <td width= 500 >Baltzarsgatan 31, Malmö</td> </tr> </table> Ett traditionellt nyhetsbrev har en viss regelbundenhet en gång i veckan, eller en gång varannan månad. Ett transaktionsmeddelande kommer på beställning och inbjudningar och kampanjer i samband med en speciell händelse. Men man kan också se en tydlig skillnad i graden av personlighet. Ett traditionellt nyhetsbrev riktar sig till alla mottagare på en prenumerationslista. Ett filtrerat nyhetsbrev kommer till en snävare krets, och ett transaktionsmeddelande har bara en enda mottagare. Design av transaktionsmeddelanden Tansaktionsmeddelanden är ofta rena textmeddelanden, men här kan man bli betydligt mer kreativ. Låt oss säga att du beställt ett paket och det går iväg ett bekräftelsemeddelande när det lämnar lagret. Visst hade det varit trevligare om brevet påminde om det du väntar på snarare än ett rent textmeddelande? Design av inbjudningar och kampanjer Samma sak gäller här, du kan tänja lite på gränserna och släppa på tänket kring traditionella nyhetsbrev. Skickar du ut nyhetsbrev i samband med en högtid eller långhelg räknar folk med att det kan se lite festligare ut än vanligt. Många typer av inbjudningar innehåller ofta anmälningsformulär av något slag, vilket har dåligt stöd i många e-postklienter. Lägg dem istället på webben och länka till dem

17 Traditionella nyhetsbrev Filtrerade nyhetsbrev Det vi kallar traditionella nyhetsbrev är en startpunkt för många som börjar med e-postmarknadsföring. Det är den enklaste formen av brev, där man som avsändare skapar ett brev och skickar det till samtliga adresser på en prenumerantlista. Det kommer i viss mån alltid att finnas generella nyhetsbrev, men mottagare av e-post blir allt mer kräsna med vad som får hamna i inkorgen. Alla vill ha relevant information något som avspeglar sig tydligt i öppningsfrekvensen på nyhetsbrev. Generella nyhetsbrev har en tydligt fallande trend och som avsändare har man mycket att vinna på att anpassa sina utskick efter olika målgrupper. Ett nyhetsbrev som försöker rikta sig till alla riskerar att inte vara helt rätt för någon. Det är därför generella nyhetsbrev har lägst öppningsfrekvens och det är därför man har så mycket att tjäna på att göra sina brev mer personliga. Statistiken talar för sig själv: generella nyhetsbrev öppnas av 28 %, medan transaktionsmeddelanden ligger på 70 %. Nyckeln till en högre öppningsfrekvens ligger i att segmentera sina nyhetsbrev. Vi vet idag att massutskick ligger på en öppningsfrekvens på 26 %. Individutskick, som bekräftelsemeddelanden, ligger på drygt 70 % i öppningsfrekvens. Vi vill naturligtvis närmare de 70 procenten. Men hur? Skalan nedanför ger en del ledtrådar. Nästa kapitel förklarar mer. Massutskick Individutskick För att utveckla sina nyhetsbrev och för att öka chanserna att nå sina mottagare med ett relevant innehåll kan man arbeta med filtrerade nyhetsbrev. Det innebär att man skapar ett antal versioner av sitt brev och att olika grupper på prenumerationslistan får särskilt anpassade brev. Detta kan givetvis göras på ett närmast oändligt antal sätt. Filtrera på demografisk data Ett vanligt sätt att filtrera eller segmentera, som vi ofta säger är att välja ut ett eller flera demografiska attribut. Alltså: stad, ålder, kön eller någon annan egenskap som man bedömer är intressant. Ett bra e-postverktyg låter dig göra filtreringen direkt i nyhetsbrevet. Du behöver alltså inte skapa en mängd olika nyhetsbrev och manuellt välja ut vem som ska ha vilka brev, utan du skapar ett enda långt brev och adresserar sedan olika moduler i brevet till olika grupper av mottagare. Filtrera på statistik Nästa steg mot att skicka mer personliga brev är att anpassa informationen efter vad mottagarna har gjort i tidigare brev. Det kan vara att adressera delar av brevet till de som klickat på en viss modul i förra utskicket eller göra riktade utskick till delar av prenumerantlistan. Generella nyhetsbrev Segmentera, demo. data Segmentera på statistik Info från webb Transaktionsmeddelanden Efter några utskick kommer det att finnas ett antal mottagare som inte klickar på någonting överhuvudtaget. Uppenbarligen gör man något fel för den här gruppen så här är det öppet att experimentera! 32 33

18 Exempel på filter: Ett filtrerat nyhetsbrev som blir tre mottagaranpassade versioner vid utskick Grönsallad med svamp Späda salladsblad är bland det bästa sommaren har att erbjuda. Krydda med smakrik svamp soccé! Läs mer om vår grönsallad med svamp Mexikansk sallad Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Läs mer om vår mexikanska sallad 1 Prenumererar på: Vegetariskt Tipsa en vän Avregistrera dig Kontakta oss Grönsallad med svamp Späda salladsblad är bland det bästa sommaren har att erbjuda. Krydda med smakrik svamp soccé! Läs mer om vår grönsallad med svamp Filter: Vegetariskt Grillad kyckling med nypotatis När solen just börjar dra sig tillbaka från bryggan är det dags att tända grillen och skrubba färskpotatisen... Läs mer om grillad kyckling 2 Grillad kyckling med nypotatis När solen just börjar dra sig tillbaka från bryggan är det dags att tända grillen och skrubba färskpotatisen... Filter: Husmanskost Caesarsallad med stekta räkor En Caesarsallad utan kycklling? Vi söker inspiration i skärgården och bjuder på sallad med havets läckerheter. Låt Caesarsalladen erövra ditt matbord Prenumererar på: Husmanskost Läs mer om kyckling med potatis Mexikansk sallad Mexiko är så mycket mer än tacos och enchiladas. En het men ändå svalkande sallad för sommaren, kanske? Läs mer om vår mexikanska sallad Filter: Vegetariskt Caesarsallad med stekta räkor En Caesarsallad utan kycklling? Vi söker inspiration i skärgården och bjuder på sallad med havets läckerheter. Tomatsoppa Låt Caesarsalladen erövra ditt matbord Fin förrätt eller matig huvudrätt? Soppornas kameleont ändrar karaktär beroende på tillbehören. Läs mer om tomatsoppan Filter: Husmanskost Filter: Soppa Grönsallad med svamp Späda salladsblad är bland det bästa sommaren har att erbjuda. Krydda med smakrik svamp soccé! Läs mer om vår grönsallad med svamp Mexikansk sallad Mexiko är så mycket mer än tacos och enchiladas. En het men ändå svalkande sallad för sommaren, kanske? Läs mer om vår mexikanska sallad Tomatsoppa Fin förrätt eller matig huvudrätt? Soppornas kameleont ändrar karaktär beroende på tillbehören. Läs mer om tomatsoppan 3 Prenumererar på: Vegetariskt och Soppa 34 35

19 Filtrera på webbstatistik Ett mer avancerat sätt att filtrera är att utgå från den statistik man får från sin webbstatistik. Att lära sig mer om vad dina besökare läser på webben kan vara till stor hjälp när du ska förbättra dina utskick. De flesta använder troligen Google Analytics eller något annat analysverktyg se till att använd kunskapen härifrån till att göra bättre brev och glöm inte bort att du kan lära dig att styra dina besökare till rätt sida med hjälp av nyhetsbrevet. Designexempel på ett transaktionsmeddelande: I det här exemplet har vi valt en bild med en stor jämn yta för texten där färgen är jämnt beige. På så sätt kan vi dela bilden i två delar och göra den undre delen som en ruta med bakgrundsfärg istället för bild, vilket man gör med HTML-kod, och endast ha den övre delen som bild. Vi lägger sedan text och logga i den undre rutan. Resultat: Massutskick Individutskick Så här gör du: Generella nyhetsbrev Segmentera, demo. data Segmentera på statistik Info från webb Transaktionsmeddelanden Ditt paket är på väg! Vi kommer att leverera enligt följande: Filtrerade transaktionsmeddelanden Transaktionsmeddelanden ses av många som en sorts elektroniska kvitton och ett nödvändigt ont. Men de har en öppningsfrekvens på inte mindre än 70 % vilket gör det hela mer intressant. Många gånger är det en besvikelse för mottagaren när de får ett rent textmeddelande efter ett köp. Förmodligen har köpet varit en inspirerande upplevelse på webben med trevliga bilder och lockande text. Varför vill inte företaget fortsätta ge den känslan när kunden väl har gjort ett köp? Förutom att fläta in relevant information är det några punkter man ska tänka på för att lyckas med ett transaktionsmeddelande. Ha en tydlig rubrik och fokusera på den förväntade informationen Designen ska fokusera på själva bekräftelsen Ha en fungerande design så att kunden känner att köpet var rätt Ge mervärde Testa Om du lyckas finns det en stor potential att knyta närmare band med dina kunder genom dina transaktionsmeddelanden. Ditt paket är på väg! Vi kommer att leverera enligt följande: Adress: Baltzarsgatan 31 Datum: 21 mars Tid: Salladsskålen Adress: Baltzarsgatan 31 Datum: 21 mars Tid: Med bildblockering: När bildblockering är aktiverat blockeras den övre delen eftersom detta är en bild, samt loggan i den undre delen. Men eftersom den undre delen inte är en bild kommer textmeddelandet fram

20 8.0 Nyhetsbrev ett komplement till webbsidan Det vi har beskrivit så här långt handlar nästan uteslutande om hur du ska bygga upp ditt brev för att det ska locka läsaren att klicka vidare. Alla erbjudanden, alla artiklar och alla formulär finns någon annanstans än i själva brevet. Hur kompletterar de varandra? Frågan är om det är någon skillnad när erbjudandet står i brevet eller på din webbplats. Det är ju samma erbjudande? Det kan verka konstigt att lägga ner stor möda på att göra ett brev så bra som möjligt och sedan hoppas på att läsarna klickar sig bort från det. Men det finns goda skäl till att vi tycker att det är en bra idé att designa ditt brev så att det lockar iväg dina läsare. profil. Bara skymten av ditt brev ska få mottagarna att se vem det kommer ifrån. Det ger trygghet och möjlighet till en fortsatt god kommunikation samt möjlighet att lära känna dina mottagare. Se nyhetsbrevet som en del i din stora marknadsföringsplan. Använd det som en krok för att dra in dem till webben. Kroken ska locka och vara intressant men samtidigt hänga ihop med din övriga marknadsföring. Design av e-post är kul, trots bråkiga e-postklienter och lömska spamfilter. Du märker det när du äntligen får det att fungera och framförallt när du märker hur varje utskick lyfter trafiken på webben. Vi hoppas att du får uppleva tillfredställelsen av ett lyckat utskick som är uppskattat hos mottagarna. Det handlar dels om mätbarhet. Du kan inte se vad någon läser, men du kan se vad de klickar på. Även om någon läser hela ditt brev från början till slut har du ingen aning om vad som var bra eller dåligt. Eller för den delen om de läste mer än första meningen. När du får klick vet du och du får möjlighet att göra ett ännu bättre brev nästa gång. En annan viktig del är att du vill att dina läsare ska vara i en miljö som du kontrollerar. En e-postklient är som regel en visuellt stökig plats där det händer mängder av saker utom din kontroll. På din webbplats är det du som bestämmer. På en webbplats har du också stora möjligheter att locka till vidareläsning. Du kan få dina besökare att spendera mer tid hos dig och du får större möjligheter att berätta om din verksamhet eller om dina erbjudanden. Och glöm inte att se till att dina läsare känner igen sig i din grafiska 38 39