Designguide för e-post - Apsis
Designguide för e-post - Apsis
Designguide för e-post - Apsis
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
<strong>Designguide</strong><br />
<strong>för</strong> e-<strong>post</strong><br />
Så anpassar du formen efter bildblockering,<br />
spamfilter och bråkiga e-<strong>post</strong>klienter
“<br />
Vad ögat ser har betydelse<br />
<strong>för</strong> hur det smakar...<br />
...räcker det då med bra<br />
innehåll eller påverkar även<br />
formen upplevelsen?<br />
”<br />
Innehåll<br />
1.0 Påverkar designen resultatet? 4<br />
2.0 Nyhetsbrevets beståndsdelar 6<br />
3.0 Att tänka på vid design av e-<strong>post</strong> 8<br />
3.1 Anpassa formen även <strong>för</strong> bildblockering 18<br />
3.2 Undersökning om bildblockering 19<br />
4.0 Texttips till nyhetsbrevsskribenter 24<br />
5.0 Underskatta inte problemen med spamfilter 27<br />
6.0 Anpassa brevet efter olika e-<strong>post</strong>klienter 28<br />
7.0 Skillnader på olika typer av e-<strong>post</strong>utskick 31<br />
7.1 Traditionella nyhetsbrev 32<br />
7.2 Filtrerade nyhetsbrev 33<br />
8.0 Nyhetsbrev - ett komplement till webbsidan 38<br />
9.0 <strong>Apsis</strong> Newsletter Pro 40<br />
9.1 Om <strong>Apsis</strong> 42<br />
3
1.0<br />
Påverkar designen resultatet?<br />
Bra design är ofta avgörande <strong>för</strong> hur väl<br />
e-<strong>post</strong>marknads<strong>för</strong>ing fungerar. Det är lätt att få<br />
intrycket att design <strong>för</strong> e-<strong>post</strong> bara handlar om att<br />
minimera misstag. Att det är tekniska hinder som<br />
dikterar villkoren och att designern i bästa fall kan skapa<br />
något som inte ser allt <strong>för</strong> hemskt ut.<br />
Och visst, generellt sett är e-<strong>post</strong>design betydligt mer begränsad än<br />
modern webbdesign. E-<strong>post</strong>klienter klarar inte av all design och alla<br />
funktioner på samma sätt som en webbläsare gör. Det gäller både<br />
installerade programvaror som Microsoft Outlook, Lotus Notes och<br />
webbaserade lösningar som Hotmail eller Gmail. Man måste där<strong>för</strong><br />
tänka runt problemen <strong>för</strong> att skapa en bra grafisk form.<br />
Samtidigt bör man tänka på att det är olika former av<br />
kommunikation. Ett nyhetsbrev är inte en webbplats, lika lite som<br />
en trailer är en hel film. En trailer lockar och skapar ett intresse,<br />
som filmen följer upp. Man kan inte jäm<strong>för</strong>a dem rakt av, utan man<br />
bör istället konstatera att det är två olika produktioner som drar åt<br />
samma håll.<br />
För designern som ska göra ett nyhetsbrev handlar det där<strong>för</strong> inte<br />
om att göra en sorts sämre webbsida, utan om att göra något som<br />
står på egna ben. Ett nyhetsbrev är ett kraftfullt verktyg som kan<br />
locka till handling – men du som kommunikatör måste bestämma<br />
dig <strong>för</strong> vilken typ av handling du vill få fram.<br />
Den här guiden har vi gjort <strong>för</strong> att hjälpa dig som ska skapa grafiskt<br />
tilltalande e-<strong>post</strong>kommunikation. Vi kommer inte att <strong>för</strong>söka lära<br />
ut något om utseende eller grafisk form – det är vi övertygade om<br />
att du har koll på. Däremot ser vi ofta att goda idéer inte alltid<br />
blir vad designern hade tänkt sig. Det som var snyggt på den<br />
egna datorn riskerar att <strong>för</strong>vandlas på vägen så att brevet ser helt<br />
annorlunda ut i olika e-<strong>post</strong>klienter. Och allt som går snett med<br />
designen påverkar givetvis läsaren. Är det något vi kan vara säkra<br />
på är det att designen har stor betydelse <strong>för</strong> responsen.<br />
Vi har hjälpt många <strong>för</strong>etag att anpassa e-<strong>post</strong>utskick efter<br />
marknadens alla e-<strong>post</strong>klienter, och det är inte lätt alltid. Här<br />
nedan ser du till exempel hur ett utskick kan skilja sig i tre<br />
välkända e-<strong>post</strong>klienter.<br />
Apple Mail<br />
Microsoft Entourage<br />
Du kanske väljer ett rent textmail<br />
<strong>för</strong> att slippa de här problemen.<br />
Men vad vinner du på detta<br />
egentligen? En undersökning som<br />
vi genom<strong>för</strong>t visar att textmail har<br />
30 % lägre öppningsfrekvens än<br />
HTML-brev - och då har vi inte ens<br />
börjat fundera på hur mycket mer<br />
positivt ett snyggt brev tas emot av<br />
läsarna.<br />
Tänk så här: varje medium – vilket<br />
det än är – har sina svårigheter<br />
och sina begränsningar i ena<br />
vågskålen. I andra vågskålen ligger<br />
möjligheterna. När det gäller<br />
e-<strong>post</strong>marknads<strong>för</strong>ing är vågskålen<br />
med möjligheter många, många<br />
gånger tyngre. Den tid du lägger ner<br />
på att lära dig behärska e-<strong>post</strong> har<br />
du igen många gånger om.<br />
För att lyckas behöver du kunna<br />
en hel del om ditt verktyg – vilka<br />
styrkor och svagheter som finns och<br />
vilka möjligheter och begränsningar<br />
e-<strong>post</strong>marknads<strong>för</strong>ingen erbjuder.<br />
Trevlig läsning!<br />
4 5<br />
Gmail
2.0<br />
Nyhetsbrevets beståndsdelar<br />
Caesarsallad, fruktsallad och fänkål.<br />
Månadens fruktsallad<br />
Mmm... melon! Sommarens skönaste frukter i en<br />
svalkande lag med stjärnanis och mynta.<br />
Skapa sommarens bästa fruktsallad<br />
Baltzarsgatan 31, 211 36 Malmö, tel. 040 - 24 97 70.<br />
Webbversion av detta nyhetsbrev<br />
Tipsa en vän<br />
Avregistrera dig<br />
Kontakta oss<br />
Caesarsallad med grillade<br />
räkor och parmesanbröd<br />
En Caesarsallad utan kyckling? Vi söker<br />
inspiration i skärgården och bjuder på sallad<br />
med havets läckerheter.<br />
Låt Caesarsalladen erövra ditt matbord<br />
Veckans grönsak – fänkål<br />
Den lätta lakritsdoften och den härliga knaprigheten gör<br />
fänkålen lätt att älska, både som tillbehör och när den får<br />
spela huvudrollen. Vi visar vägen till fänkålen!<br />
Flera finfina fänkålsrecept<br />
“ ”<br />
Nyhetsbrev kan se ut på många olika sätt, men det finns<br />
vissa element som finns med i så gott som alla brev. Här är<br />
byggstenarna i ett modernt nyhetsbrev.<br />
Preheader. En andra chans till ämnesrad. Preheadern är det <strong>för</strong>sta som<br />
syns i ett nyhetsbrev och bör användas som ett sätt att få fram brevets viktigaste<br />
budskap till de som blockerat bilder.<br />
Länk till webbversion av nyhetsbrevet. Många blockerar bilder<br />
i sin e-<strong>post</strong>klient och vissa <strong>för</strong>edrar att läsa sina brev i en webbläsare. En länk till<br />
webbversion gör det möjligt.<br />
Länkar <strong>för</strong> avregistrering, tipsa en vän och kontakt.<br />
Det är viktigt att visa tydligt hur man som mottagare kan sluta prenumera på<br />
nyhetsbrevet.<br />
Sidhuvud/avsändare. Det som avgör om ett brev blir öppnat eller inte är<br />
oftast att läsaren känner till och litar på avsändaren. Att presentera sitt namn och<br />
sin logotyp i sidhuvudet är en självklarhet, men gå inte till överdrift. Det är innehållet<br />
som är det viktiga – inte logotypen.<br />
Rubrik. Över 40 % av tiden som spenderas på att läsa ett nyhetsbrev läggs på<br />
rubriker, trots att de upptar så liten yta i brevet. Det är väl värt att lägga mycket tid<br />
på att hitta rätta formuleringar till rubrikerna.<br />
Ingresstext. Ingressen väcker intresse och sätter tonen <strong>för</strong> det som händer<br />
efter klicket. En kort ingress är som regel bättre på att locka till klick.<br />
Läs mer-länk. En länk med en tydlig uppmaning eller ett erbjudande ger fler<br />
klick än om man bara skriver ”Klicka här”. Se till att utnyttja länkarna – det finns ofta<br />
många länkar att jobba med i ett nyhetsbrev.<br />
Bild. Nyhetsbrev med bilder ger bättre respons än rena textbrev – plus att de<br />
ser betydligt trevligare ut. Samtidigt är bilder en av designerns största utmaningar,<br />
eftersom det finns en hel del tekniska begränsningar som är unika <strong>för</strong> e-<strong>post</strong>.<br />
Bakgrundsfärg. Bilder eller färger som ramar in brevet ser ofta trevliga ut<br />
på skissblocket, men kräver en del <strong>för</strong> att fungera i verkligheten. Vissa e-<strong>post</strong>klienter<br />
visar inte bakgrundsbilder.<br />
Sidfot med tydliga kontaktuppgifter. Sidfoten markerar slutet<br />
på brevet - och hit är det överraskande många som hittar. Att visa sina kontaktuppgifter<br />
tydligt signalerar att du är en seriös avsändare som gärna bjuder in till dialog.<br />
6 7
3.0<br />
Att tänka på vid design av e-<strong>post</strong><br />
Många som startar nyhetsbrev går in i projektet med stor<br />
entusiasm. Tyvärr fokuserar man ibland väl mycket på att<br />
få detaljerna på plats. Då missar man det som egentligen<br />
har betydelse <strong>för</strong> att utskicken ska komma fram och<br />
allt som är avgörande <strong>för</strong> hur öppningsfrekvensen och<br />
klickstatistiken kommer att se ut efter en tids utskick.<br />
Tänk på formatet<br />
Det <strong>för</strong>sta man bör tänka på är att många läser sina brev i<br />
e-<strong>post</strong>klientens <strong>för</strong>handsgranskningsfönster. Vissa mottagare har<br />
dessutom väldigt små <strong>för</strong>handsgranskningsfönster som ligger<br />
vertikalt längs med ytterkanten. Många e-<strong>post</strong>klienter, bland annat<br />
Microsofts – Outlook, Entourage och Hotmail – erbjuder den här<br />
möjligheten. Hur ser ditt brev ut i <strong>för</strong>handsgranskningsfönstret?<br />
Ett aningen snävt, vertikalt <strong>för</strong>handsgranskningsfönster i Microsoft Entourage.<br />
E-<strong>post</strong>fönstrets totala bredd är i detta fall 1024 pixlar. Viss scrollning i sidled<br />
uppstår trots att nyhetsbrevet endast har en bredd på 560 pixlar.<br />
Om du vill ha ett brett brev måste du räkna med att dina läsare<br />
behöver scrolla i sidled.<br />
Andelen som läser e-<strong>post</strong> i mobiltelefonen eller på handdatorn blir<br />
också fler. Ett nyhetsbrev bör där<strong>för</strong> inte vara mer än 600 pixlar i<br />
bredd. Runt 500 pixlar är optimalt.<br />
Planera den yttre formen<br />
Det är vanligt att man utgår från hemsidan, broschyrer eller<br />
brevpapper <strong>för</strong>sta gången man utformar ett nyhetsbrev. Man<br />
lyfter in hela sektioner från hemsidan eller tung, snygg och<br />
effektfull grafik från trycksakerna. Försök istället se e-<strong>post</strong><br />
som ett eget kommunikationsmedium. Det ligger närmare ett<br />
personligt brev och man har betydligt kortare tid på sig att fånga<br />
uppmärksamheten i ett brev jäm<strong>för</strong>t med en hemsida. Håll formen<br />
enkel och om du har mycket att berätta – se till att länka vidare till<br />
hemsidan.<br />
<strong>Apsis</strong> eye-trackingstudie, en undersökning som visar hur<br />
mottagaren läser e-<strong>post</strong> på datorn, visar följande:<br />
Vänsterspalten får 80 % mer uppmärksamhet än högerspalten<br />
Breven läses i snitt i 11 sekunder<br />
Nästan 40 % av tiden läggs på rubriker<br />
Samtliga personer valde att läsa i <strong>för</strong>handsgranskningsfönstret<br />
8 9<br />
•<br />
•<br />
•<br />
•<br />
Ovanstånde bör inte ses som riktlinjer, bland annat hade<br />
testpersonerna inte valt att prenumerera på just de brev de fick<br />
läsa. Men det är punkter som är väl värda att<br />
tänka på när du skissar upp ditt nyhetsbrev.<br />
Arial<br />
På säkra sidan med grafik och text<br />
Comic Sans MS<br />
Courier New<br />
Snygg och effektfull grafik i form av<br />
Georgia<br />
skuggningar, sektioner som överlappar<br />
Impact<br />
varandra och transparenta block som ligger Times New Roman<br />
i flera lager är vanliga designelement på<br />
Trebuchet MS<br />
webben. Men dessa är svåra att få till i vissa<br />
e-<strong>post</strong>klienter, fram<strong>för</strong>allt på grund av saknat<br />
Verdana
HTML- och CSS-stöd. Skapa istället en enkel form och skilj alltid<br />
på text och bild. Lägg alltså inte text som bilder eller i bilder. Om<br />
du har särskilda typsnitt du brukar använda i dina trycksaker och<br />
på hemsidan kommer dessa troligtvis inte att fungera <strong>för</strong> e-<strong>post</strong>.<br />
Håll dig till de webbsäkra typsnitten.<br />
Två sorters bakgrundsbilder som fungerar<br />
Det finns två typer av bakgrundsbilder du kan använda i e-<strong>post</strong> och<br />
de beter sig lite olika beroende på vilken e-<strong>post</strong>klient mottagaren<br />
sitter på. En del e-<strong>post</strong>klienter, bland annat Outlook 2007 och<br />
Lotus Notes, saknar stöd <strong>för</strong> den ena varianten av bakgrundsbilder.<br />
Just dessa två e-<strong>post</strong>klienter är ganska stora och vanliga i<br />
kontorsvärlden så du gör bäst i att bygga en design som inte är<br />
beroende av att bakgrundsbilder av den här typen fungerar.<br />
Det som händer i e-<strong>post</strong>klienter med saknat stöd <strong>för</strong><br />
bakrundsbilder är att bilderna helt enkelt <strong>för</strong>svinner. De lämnar<br />
dock inga rutor eller röda kryss efter sig som vid bildblockering.<br />
Den ena varianten kan du lägga som en bakgrundsbild bakom<br />
nyhetsbrevet, det vill säga som e-<strong>post</strong>fönstrets bakgrund. Just<br />
denna typen av bakgrund fungerar både i Outlook 2007 och Lotus<br />
Notes, däremot saknar den stöd i många välkända webbaserade<br />
e-<strong>post</strong>klienter som Gmail och Hotmail.<br />
Den andra varianten<br />
lägger du som en eller<br />
flera bakgrundsbilder<br />
i brevet. Du lägger<br />
bilden som bakgrund<br />
på det objekt du vill<br />
ha den, till exempel på<br />
en ruta med text. Det<br />
är den här typen av<br />
bakgrundsbilder som<br />
Outlook 2003<br />
Mmm... melon!<br />
Sommarens skönaste<br />
frukter i en svalkande<br />
lag med stjärnanis och<br />
mynta.<br />
Outlook 2007<br />
Mmm... melon!<br />
Sommarens skönaste<br />
frukter i en svalkande<br />
lag med stjärnanis och<br />
mynta.<br />
är mest användbara, men de <strong>för</strong>svinner i Outlook 2007 och Lotus<br />
Notes. Däremot fungerar de i Gmail, Hotmail och många andra<br />
klienter.<br />
För att sammanfatta är det ofta bäst att låta bli bakgrundsbilder<br />
helt och hållet och sträva efter en design som ser likadan ut i<br />
alla e-<strong>post</strong>klienter. Bakgrundsbilder innefattar även bakgrundsfärgtoningar,<br />
att exempelvis tona en bakgrund från ljust till mörkt.<br />
Animationer och script passar inte i e-<strong>post</strong><br />
GIF-animationer fungerar i de flesta stora e-<strong>post</strong>klienter men<br />
inte i Microsoft Outlook 2007. Första bildrutan syns, men resten<br />
visas inte. Placera där<strong>för</strong> det viktigaste i <strong>för</strong>sta rutan om du tänker<br />
använda GIF-animationer – då syns den som en vanlig bild.<br />
Flash fungerar ytterst sällan i e-<strong>post</strong>. Om du gör ett e-<strong>post</strong>utskick<br />
med Flash-animationer är det väldigt få mottagare som kommer att<br />
se dem på ett korrekt sätt.<br />
Samma sak gäller <strong>för</strong> JavaScript. Även om det finns stöd <strong>för</strong><br />
JavaScript i enstaka klienter blockeras det ofta av säkerhetsskäl.<br />
Formulärkod i form av enkäter, anmälningsformulär, sök- och<br />
inloggningsfält fungerar inte i de flesta e-<strong>post</strong>klienter. Länka vidare<br />
ut på webben till den här typen av innehåll.<br />
Avregistreringslänken bör vara tydlig<br />
En tydlig länk <strong>för</strong> avregistrering är viktig av flera anledningar.<br />
Den skapar ett <strong>för</strong>troende hos mottagaren. Känslan att man<br />
snabbt och enkelt kan avregistrera sig är viktig och bidrar till att<br />
nyhetsbrevet inte upplevs som påtvingande. En positiv bieffekt är<br />
att du minskar risken att bli svartlistad, något som kan hända om<br />
många mottagare hellre markerar ditt brev som spam än letar upp<br />
avregistreringslänken.<br />
Undvik att lägga länken i en bild eller som en bildknapp då många<br />
blockerar bilder. Du vill att mottagaren ska få tillgång till den<br />
oberoende av de tekniska <strong>för</strong>utsättningarna.<br />
Det bästa är att ha en avregistreringslänk både högst upp och<br />
längst ner i e-<strong>post</strong>utskicket.<br />
10 11
“ ”<br />
Bakgrundsbilder på skissbordet: Nyhetsbrev<br />
“<br />
med färgtoning i bakgrunden, tunga bakgrundsbilder,<br />
transparenta, överlappande objekt samt särskilda typsnitt<br />
<strong>för</strong> rubrikerna.<br />
Caesarsallad, fruktsallad och fänkål.<br />
Caesarsallad med grillade räkor<br />
Månadens fruktsallad<br />
Mmm... melon! Sommarens skönaste frukter i en<br />
svalkande lag med stjärnanis och mynta.<br />
Veckans grönsak – fänkål<br />
Baltzarsgatan 31, 211 36 Malmö, tel. 040 - 24 97 70.<br />
Webbversion av detta nyhetsbrev<br />
Tipsa en vän<br />
Avregistrera dig<br />
Kontakta oss<br />
En Caesarsallad utan kyckling? Vi söker inspiration i<br />
skärgården och bjuder på sallad med havets läckerheter.<br />
Låt Caesarsalladen erövra ditt matbord<br />
Skapa sommarens bästa fruktsallad<br />
Den lätta lakritsdoften och den härliga knaprigheten gör<br />
fänkålen lätt att älska, både som tillbehör och när den får<br />
spela huvudrollen. Vi visar vägen till fänkålen!<br />
Flera finfina fänkålsrecept<br />
”<br />
Bakgrundsbilder i e-<strong>post</strong>klienten: Så här ser<br />
det ut i e-<strong>post</strong>klienterna Microsoft Outlook 2007 och Lotus<br />
Notes, då stöd <strong>för</strong> bakgrundsbilder helt saknas och det<br />
valda typsittet inte finns på mottagarens dator.<br />
Caesarsallad, fruktsallad och fänkål.<br />
Caesarsallad med grillade räkor<br />
En Caesarsallad utan kyckling? Vi söker inspiration i<br />
skärgården och bjuder på sallad med havets läckerheter.<br />
Månadens fruktsallad<br />
Låt Caesarsalladen erövra ditt matbord<br />
Mmm... melon! Sommarens skönaste frukter i en<br />
svalkande lag med stjärnanis och mynta.<br />
Skapa sommarens bästa fruktsallad<br />
Veckans grönsak – fänkål<br />
Den lätta lakritsdoften och den härliga knaprigheten gör<br />
fänkålen lätt att älska, både som tillbehör och när den får<br />
spela huvudrollen. Vi visar vägen till fänkålen!<br />
Webbversion av detta nyhetsbrev<br />
Tipsa en vän<br />
Avregistrera dig<br />
Kontakta oss<br />
12 13
“ ” Brevet<br />
Förslag på lösning: Sträva efter balans mellan text<br />
och bild, frilägg alla objekt och använd endast webbsäkra<br />
typsnitt. Nyhetsbrevet nedan ser i stort sett identiskt ut i<br />
alla välkända e-<strong>post</strong>klienter.<br />
Caesarsallad, fruktsallad och fänkål.<br />
Månadens fruktsallad<br />
Mmm... melon! Sommarens skönaste frukter i en<br />
svalkande lag med stjärnanis och mynta.<br />
Skapa sommarens bästa fruktsallad<br />
Baltzarsgatan 31, 211 36 Malmö, tel. 040 - 24 97 70.<br />
Webbversion av detta nyhetsbrev<br />
Tipsa en vän<br />
Avregistrera dig<br />
Kontakta oss<br />
Caesarsallad med grillade<br />
räkor<br />
En Caesarsallad utan kyckling? Vi söker<br />
inspiration i skärgården och bjuder på sallad<br />
med havets läckerheter.<br />
Låt Caesarsalladen erövra ditt matbord<br />
Veckans grönsak – fänkål<br />
Den lätta lakritsdoften och den härliga knaprigheten gör<br />
fänkålen lätt att älska, både som tillbehör och när den får<br />
spela huvudrollen. Vi visar vägen till fänkålen!<br />
Flera finfina fänkålsrecept<br />
Sammanfattning<br />
• bör vara mellan 5-600 pixlar brett <strong>för</strong> att synas i<br />
<strong>för</strong>handsgranskningsfönstret utan att läsaren ska behöva<br />
scrolla i sidled. Det optimala måttet i just detta avseende är<br />
560 pixlar.<br />
• En eye-trackingstudie visar att 80 % av tiden som läggs på ett<br />
nyhetsbrev spenderas i vänsterspalten. Hela 40 % av tiden<br />
läggs på rubriker.<br />
Lägg inte text i bilder. Om bilden blockeras <strong>för</strong>svinner texten –<br />
och ditt brev blir omöjligt att <strong>för</strong>stå.<br />
14 15<br />
•<br />
•<br />
Välj webbsäkra typsnitt.<br />
• Om du vill ha en bakgrundsbild, se till att du anger både<br />
bakgrundsfärg och bakgrundsbild. Då ökar du sannolikheten<br />
<strong>för</strong> att ett av alternativen visas.<br />
• Om du använder en GIF-animation, lägg den viktigaste bilden<br />
<strong>för</strong>st i animationen så att du vet att den visas även om inte<br />
animationen fungerar.<br />
•<br />
Lägg länken <strong>för</strong> avregistering så att den är lätt att se.
“ Slutsatser:<br />
Det här orsakar problem i många<br />
e-<strong>post</strong>klienter.<br />
Caesarsallad med grillade räkor<br />
Månadens fruktsallad<br />
Mmm... melon! Sommarens skönaste frukter i en<br />
svalkande lag med stjärnanis och mynta.<br />
Veckans grönsak – fänkål<br />
Baltzarsgatan 31, 211 36 Malmö, tel. 040 - 24 97 70.<br />
Webbversion av detta nyhetsbrev<br />
Tipsa en vän<br />
Kontakta oss<br />
En Caesarsallad utan kyckling? Vi söker inspiration i<br />
skärgården och bjuder på sallad med havets läckerheter.<br />
Låt Caesarsalladen erövra ditt matbord<br />
Skapa sommarens bästa fruktsallad<br />
Den lätta lakritsdoften och den härliga knaprigheten gör<br />
fänkålen lätt att älska, både som tillbehör och när den får<br />
spela huvudrollen. Vi visar vägen till fänkålen!<br />
Flera finfina fänkålsrecept<br />
Avregistrera dig<br />
”<br />
Vad du kan göra...<br />
Särskilda typsnitt. Typsnittet Savoye LET som används här är<br />
inget standardtypsnitt i Microsoft Windows och kommer <strong>för</strong>modligen inte<br />
att fungera hos de flesta mottagare.<br />
Du kan sätta ut särskilda typsnitt som <strong>för</strong>stahandsval, men ange i så fall<br />
ett webbsäkert typsnitt som andrahandsval.<br />
Bakgrundsbilder bakom brevet. Fungerar inte i Hotmail<br />
och Gmail, bland annat. I det här fallet används en färgtoning.<br />
Om du trots allt vill använda en bakgrund, se till att också ange en<br />
bakgrundsfärg som ersätter bakgrunden om den <strong>för</strong>svinner, såvida du<br />
inte vill ha en vit bakgrund. Det går att gå runt problemet och få till en<br />
bakgrund genom att lägga en omslutande tabell runt brevet och lägga<br />
bakgrunden i denna.<br />
Bakgrundsbilder i brev. Fungerar inte i bland annat Outlook<br />
2007 och Lotus Notes.<br />
Samma sak som beskrivs ovan, du kan lägga bakgrundsfärger på till<br />
exempel textrutor som syns när bakgrunden <strong>för</strong>svinner.<br />
Transparenta objekt. Vanligt <strong>för</strong>ekommande på webben. Kan<br />
göras med CSS och transparenta bilder, ofta PNG-bilder. Effekten <strong>för</strong>svinner<br />
i många e-<strong>post</strong>klienter och lämnar en vit ruta.<br />
Använd bilder i formatet GIF eller JPG.<br />
Svåråtkomlig avregistreringslänk. Det går bra att lägga<br />
länken längst ned i hörnet, men den borde då även ligga högt upp i<br />
brevet.<br />
16 17
3.1<br />
Anpassa formen även <strong>för</strong><br />
bildblockering<br />
Stora, snygga bilder – en självklarhet? Ja, många som<br />
arbetar med att skapa nyhetsbrev vill att de ska se så<br />
bra ut som möjligt. Och alla som prenumererar på<br />
nyhetsbrev vill troligen också ha en bra upplevelse och bli<br />
inspirerade av det som hamnar i inboxen. Att brevet är<br />
relevant, helt enkelt.<br />
Ändå är bilder blockerade som standard i många stora<br />
e-<strong>post</strong>klienter. Anledningen är givetvis säkerhetsskäl. Ett<br />
nyhetsbrev utan bilder känns idag som… kaffe utan latte?<br />
Grundstommen finns kvar, men det som gör att brevet lyfter<br />
saknas.<br />
Det är tveklöst så att bilder till<strong>för</strong> mycket till alla typer av<br />
nyhetsbrev. Många nyhetsbrev är idag helt beroende av att bilderna<br />
syns. Men vad händer om alla bilder <strong>för</strong>svinner? Att det inte ser<br />
lika snyggt ut är självklart, men går det överhuvudtaget att <strong>för</strong>stå<br />
någonting i brevet? Se till att ditt brev går att <strong>för</strong>stå utan bilder<br />
och att du gör vad du kan <strong>för</strong> att locka dina läsare att ladda ned<br />
bilderna. Det handlar inte bara om utseende, eftersom du inte får<br />
någon statistik <strong>för</strong> brev som inte laddar ner bilder.<br />
Ett sätt att <strong>för</strong>medla information även om bilderna<br />
är blockerade är alt-attribut. Det innebär att<br />
man skriver en text som <strong>för</strong>klarar vad bilderna<br />
<strong>för</strong>eställer. Om bilden inte syns, så ser man i<br />
alla fall texten och får en möjlighet att <strong>för</strong>stå<br />
sammanhanget.<br />
<strong>Apsis</strong> egna enkätundersökning om bild-blockering<br />
från 2009 visar att 63 % blockerar bilderna i sina<br />
e-<strong>post</strong>klienter i Sverige. I Norge är siffran 72 %.<br />
63 %<br />
Hela 63 %<br />
blockerar bilder<br />
som standard.<br />
3.2<br />
Undersökning om bildblockering<br />
Vilken e-<strong>post</strong>klient använder du?<br />
Entourage <strong>för</strong> Mac<br />
En känd avsändare<br />
Annan anledning<br />
En bra rubrik på brevet<br />
18 19<br />
Thunderbird<br />
Hotmail<br />
Mail <strong>för</strong> Mac<br />
Gmail<br />
Nej<br />
6 %<br />
5 %<br />
5 %<br />
13 %<br />
63 %<br />
75 %<br />
Lotus Notes<br />
10 %<br />
4 %<br />
16 %<br />
Outlook 2003<br />
10 %<br />
20 %<br />
6 %<br />
11 %<br />
15 %<br />
40 %<br />
Outlook 2007<br />
Laddar din e-<strong>post</strong>klient bilder automatiskt?<br />
Ja, men är osäker på grundinställningen<br />
Ja, jag har ändrat grundinställningen<br />
så att den hämtar automatiskt<br />
Ja, den var inställd så från början<br />
Om du inte laddar bilder automatiskt, vad får dig<br />
att ladda dem?
“ ” “ ”<br />
20<br />
Ej anpassat <strong>för</strong> bildblockering: Nyhetsbrev<br />
med stort sidhuvud, bildrubriker och inga alt-texter <strong>för</strong><br />
blockerade bilder<br />
Caesarsallad, fruktsallad och fänkål.<br />
Månadens fruktsallad<br />
Mmm... melon! Sommarens skönaste frukter i en<br />
svalkande lag med stjärnanis och mynta.<br />
Skapa sommarens bästa fruktsallad<br />
Baltzarsgatan 31, 211 36 Malmö, tel. 040 - 24 97 70.<br />
Webbversion av detta nyhetsbrev<br />
Tipsa en vän<br />
Avregistrera dig<br />
Kontakta oss<br />
Caesarsallad med stekta<br />
räkor<br />
En Caesarsallad utan kyckling? Vi söker<br />
inspiration i skärgården och bjuder på sallad<br />
med havets läckerheter.<br />
Låt Caesarsalladen erövra ditt matbord<br />
Veckans grönsak – fänkål<br />
Den lätta lakritsdoften och den härliga knaprigheten gör<br />
fänkålen lätt att älska, både som tillbehör och när den får<br />
spela huvudrollen. Vi visar vägen till fänkålen!<br />
Flera finfina fänkålsrecept<br />
Anpassat <strong>för</strong> bildblockering: Nyhetsbrev med<br />
litet sidhuvud, textrubriker och alt-texter utskrivna <strong>för</strong><br />
blockerade bilder<br />
Caesarsallad, fruktsallad och fänkål.<br />
Salladsskålen<br />
Caesarsallad<br />
Månadens fruktsallad<br />
Mmm... melon! Sommarens skönaste frukter i en<br />
svalkande lag med stjärnanis och mynta.<br />
Fänkål<br />
Skapa sommarens bästa fruktsallad<br />
Baltzarsgatan 31, 211 36 Malmö, tel. 040 - 24 97 70.<br />
Webbversion av detta nyhetsbrev<br />
Tipsa en vän<br />
Avregistrera dig<br />
Kontakta oss<br />
Caesarsallad med grillade<br />
räkor<br />
En Caesarsallad utan kyckling? Vi söker<br />
inspiration i skärgården och bjuder på sallad<br />
med havets läckerheter.<br />
Låt Caesarsalladen erövra ditt matbord<br />
Fruktsallad<br />
Veckans grönsak – fänkål<br />
Den lätta lakritsdoften och den härliga knaprigheten gör<br />
fänkålen lätt att älska, både som tillbehör och när den får<br />
spela huvudrollen. Vi visar vägen till fänkålen!<br />
Flera finfina fänkålsrecept<br />
21
“ ” “ ”<br />
22<br />
Lösnings<strong>för</strong>slag med bilderna på ena<br />
kanten och texten på andra: Här har vi lagt<br />
alla bilder endast som halva bilder längs högerkanten<br />
vilket innebär att de tar mindre uppmärksamhet när de<br />
blockeras, samt att textlayouten på vänstersidan inte<br />
påverkas av bildblockeringen.<br />
Caesarsallad, fruktsallad och fänkål.<br />
Caesarsallad med grillade räkor<br />
En Caesarsallad utan kyckling? Vi söker inspiration i<br />
skärgården och bjuder på sallad med havets läckerheter.<br />
Månadens fruktsallad<br />
Låt Caesarsalladen erövra ditt matbord<br />
Mmm... melon! Sommarens skönaste frukter i en svalkande lag<br />
med stjärnanis och mynta.<br />
Veckans grönsak – fänkål<br />
Skapa sommarens bästa fruktsallad<br />
Den lätta lakritsdoften och den härliga knaprigheten gör<br />
fänkålen lätt att älska, både som tillbehör och när den får spela<br />
huvudrollen. Vi visar vägen till fänkålen!<br />
Flera finfina fänkålsrecept<br />
Baltzarsgatan 31, 211 36 Malmö, tel. 040 - 24 97 70.<br />
Webbversion av detta nyhetsbrev<br />
Tipsa en vän<br />
Avregistrera dig<br />
Kontakta oss<br />
Lösnings<strong>för</strong>slag med bilderna i botten:<br />
Genom att placera all grafik i botten blir texten det <strong>för</strong>sta<br />
som möter läsaren oavsett om bilderna är blockerade eller<br />
ej. Även i det här fallet <strong>för</strong>blir textlayouten intakt.<br />
Caesarsallad, fruktsallad och fänkål.<br />
Caesarsallad med<br />
grillade räkor<br />
En Caesarsallad utan kyckling?<br />
Vi söker inspiration i skärgården<br />
och bjuder på sallad med havets<br />
läckerheter.<br />
Låt Caesarsalladen erövra ditt matbord<br />
Veckans grönsak – fänkål<br />
Baltzarsgatan 31, 211 36 Malmö, tel. 040 - 24 97 70.<br />
Webbversion av detta nyhetsbrev<br />
Tipsa en vän<br />
Avregistrera dig<br />
Kontakta oss<br />
Månadens fruktsallad<br />
Mmm... melon! Sommarens skönaste<br />
frukter i en svalkande lag med<br />
stjärnanis och mynta.<br />
Skapa sommarens bästa fruktsallad<br />
Den lätta lakritsdoften och den härliga knaprigheten gör fänkålen lätt att älska, både<br />
som tillbehör och när den får spela huvudrollen. Vi visar vägen till fänkålen!<br />
Flera finfina fänkålsrecept<br />
23
4.0<br />
Texttips till nyhetsbrevsskribenter<br />
Rubriker som designelement<br />
Alla <strong>för</strong>står att rubriker är viktiga, men när det gäller nyhetsbrev<br />
är de faktiskt det enskilt viktigaste elementet. <strong>Apsis</strong> eyetrackingstudie<br />
har visat att runt 40 % av tiden som spenderas på ett<br />
nyhetsbrev läggs på att läsa rubriker – även när det finns gott om<br />
annat att titta på i brevet.<br />
Rubrikerna får betydligt mer uppmärksamhet än bilder och övrig<br />
text. Det gör att det är väl värt att lägga tid på att formulera bra<br />
rubriker och också att prova sig fram med upprepade tester.<br />
Ny grönsaksleverantör!<br />
Lorem ipsum dolor sit amet, consectetur<br />
adipisicing elit, sed do eiusmod tempor<br />
incididunt ut labore et dolore magna<br />
aliqua.<br />
Läs mer<br />
Vill du ha ekologiska<br />
grönsaker till bättre priser?<br />
Lorem ipsum dolor sit amet, consectetur<br />
adipisicing elit, sed do eiusmod tempor.<br />
Våra ekopriser hittar du här!<br />
Rubriken måste beröra. Även om det svider en smula kan det vara<br />
bra att komma ihåg att människor inte är särskilt intresserade<br />
av dig och din verksamhet. De är däremot intresserade av hur du<br />
och ditt <strong>för</strong>etag kan påverka dem i deras vardag. Det är en viktig<br />
skillnad. ”Ny grönsaksleverantör” är en rubrik som inte säger<br />
läsaren något, men om du berättar att det gäller något fint till lägre<br />
priser – ja, då lär du få läsare.<br />
Hämta gärna inspiration av hur tidningar tänker när det gäller<br />
löpsedlar och rubriker. De använder inte alltid hela meningar eller<br />
korrekt grammatik. Du kan mycket väl vara kreativ och skriva<br />
överraskande rubriker. Så länge du håller det som rubriken lovar,<br />
<strong>för</strong>stås. Kreativiteten får inte slå över i rena fantasier. Då kommer<br />
du snart att ha <strong>för</strong>brukat ditt <strong>för</strong>troende hos läsarna.<br />
Ingresstexten. Lång eller kort?<br />
Några få korta rader är allt man har, om ens det. Men en bra<br />
ingresstext är guld värd. Den slår an tonen <strong>för</strong> artikeln och kan vara<br />
det som lockar till vidare läsning.<br />
Vad är rätt längd? Det är svårt att säga hur lång en ingress kan<br />
vara. Lagom är lagom och det är bättre att fokusera på innehållet<br />
än på en fast gräns. Men rent allmänt så finns det oftare <strong>för</strong><br />
långa ingresser i nyhetsbrev än <strong>för</strong> korta. Du vill som regel locka<br />
läsaren av ett ett nyhetsbrev till en webbplats, så berätta inte allt i<br />
nyhetsbrevet. Då finns det ingen anledning att klicka vidare.<br />
Använd länktexterna!<br />
Länktexter är viktiga, inte minst som en visuell signal <strong>för</strong> läsaren.<br />
De fungerar som uppmaningar och vi har lärt oss av femton<br />
års surfande att en länk – fram<strong>för</strong> allt om den är blåfärgad och<br />
understruken – betyder att vi ska klicka <strong>för</strong> att läsa mer. Det finns<br />
där<strong>för</strong> ingen anledning att skriva just ”Klicka här” eller ”Läs mer”.<br />
Det vet alla redan.<br />
Använd istället länktexterna till att samspela med rubrikerna och<br />
<strong>för</strong> att upprepa nyckelord och fraser. Uppmana gärna till handling<br />
men var tydlig med vad som händer när man väl har klickat på<br />
länken. Vi ser tydligt att välformulerade länktexter ger fler klick än<br />
om man bara skriver ”Klicka här”.<br />
De tester <strong>Apsis</strong> gjort tillsammans med partners visar att länkar<br />
placerade till höger får mer klick än när de ligger till vänster.<br />
Formen får ofta bättre balans när placering på länkarna är till<br />
höger. Prova själv och utvärdera.<br />
Artiklar i nyhetsbrev. Är det någon skillnad att<br />
skriva på en webbplats och i ett nyhetsbrev?<br />
Om man ska vara krass så finns det i egentlig mening inte artiklar<br />
i nyhetsbrev, utan de ligger i de flesta fall på en hemsida. Kanske<br />
är det bra att se hela nyhetsbrevet som en enda stor ingress? Syftet<br />
24 25
med nyhetsbrevet är ju oftast att uppmana läsaren att göra något –<br />
och denna aktivitet, oavsett om det är att sälja eller informera, sker<br />
så gott som alltid via en hemsida.<br />
Så ja, det är skillnad – men det är större skillnad mellan papper<br />
och data än mellan webb och mail. Det är två grenar på samma<br />
träd.<br />
Däremot måste man skilja på syftet med webb och mail. Webb<br />
står <strong>för</strong> funktionalitet medan mail <strong>för</strong>medlar en känsla. Som alltid<br />
så bör man där<strong>för</strong> tänka på att webben är något man söker upp,<br />
medan mail kommer till sina mottagare utan att de nödvändigtvis<br />
är <strong>för</strong>beredda på det.<br />
Med läsaren väl framme på webbplatsen går det där<strong>för</strong> bra att ta<br />
plats och att publicera långa artiklar. Hur långa? Så långa som det<br />
krävs. En intresserad läsare tar sig gärna tid – och vill gärna ha<br />
mer. Länka gärna till tidigare artiklar i liknande ämnen.<br />
Tänk på att en länk från ett nyhetsbrev ska leda direkt till artikeln<br />
eller erbjudandet som du lockar med. Skicka inte dina läsare till<br />
<strong>för</strong>stasidan. Ingen är intresserad av att behöva leta sig fram <strong>för</strong> att<br />
hitta det man är ute efter.<br />
Ett framgångsrikt exempel från <strong>Apsis</strong> nyhetsbrev<br />
5.0<br />
Underskatta inte problemen med<br />
spamfilter<br />
Var<strong>för</strong> ska jag som designer tänka på hur ett spamfilter fungerar?<br />
Jag tänker ju inte spamma någon? Nej, det tror vi naturligtvis<br />
inte. Men du vill att dina brev ska komma fram, och då är det bra<br />
att veta en del om hur spamfilter fungerar så att ditt utskick inte<br />
fastnar på vägen.<br />
Den vanligaste typen av spamfilter kallas bayesiska spamfilter<br />
och ett av de vanligaste filtren kallas SpamAssassin. Det filtret<br />
och andra av samma typ analyserar innehållet i ett brev och<br />
letar efter misstänksamma ord eller kombinationer av ord. Den<br />
här typen av spamfilter sitter ofta direkt i e-<strong>post</strong>klienten eller<br />
e-<strong>post</strong>servern och de lär sig med tiden hur du som användare<br />
spamklassar brev. Sedan jäm<strong>för</strong> de tidigare brev du klassat som<br />
spam med de inkommande. Spamfiltren letar igenom ämnesraden,<br />
textinnehållet, länkar, avsändaren och en rad andra områden.<br />
Spammare <strong>för</strong>söker gå runt dessa filter genom att istället lägga<br />
meddelanden i bilder. Ofta är dessa brev rena bildmeddelanden,<br />
vilket spamfilterna numera också reagerar på. Där<strong>för</strong> ska man<br />
undvika att skapa e-<strong>post</strong>utskick som bara bygger på bilder.<br />
Det är också viktigt att man har någorlunda bra balans mellan<br />
textinnehåll och bilder, att det väger jämnt. Spamfilter kan<br />
nämligen reagera på att det är väldigt stora bilder och <strong>för</strong> lite text.<br />
Testa dig fram <strong>för</strong> att skapa <strong>för</strong>ståelse <strong>för</strong> hur spamfilter fungerar.<br />
Några enkla grundregler är...<br />
• Inga ord skrivna med versaler i ämnesraden<br />
• Använd inte rödfärgade bokstäver<br />
• Se till att inte textversion saknas när du skickar HTML-brev<br />
26 27
6.0<br />
Anpassa brevet efter olika<br />
e-<strong>post</strong>klienter<br />
Det finns många e-<strong>post</strong>klienter på marknaden och det<br />
finns inte två klienter som tolkar e-<strong>post</strong> på samma<br />
sätt. Det går trots detta alldeles utmärkt att jobba<br />
med nyhetsbrev och få dem att se bra ut hos de flesta<br />
e-<strong>post</strong>klienter. I det här kapitlet kommer du att lära dig<br />
hur du bygger e-<strong>post</strong> som fungerar.<br />
Ett sätt att lära sig att anpassa sina nyhetsbrev till olika klienter är<br />
att ha en lång lista med e-<strong>post</strong>klient efter e-<strong>post</strong>klient, och <strong>för</strong> var<br />
och en ange problemområden och möjliga lösningar. Men ett bättre<br />
sätt är att lära sig hur man gör <strong>för</strong> att bygga ett nyhetsbrev som<br />
fungerar bra överallt. Vi koncentrerar oss där<strong>för</strong> på det som krävs<br />
<strong>för</strong> att skapa ett sådant nyhetsbrev. Det här kapitlet är en aning<br />
tekniskt med kodexempel <strong>för</strong> att visa hur man verkligen gör.<br />
Gammal teknik fungerar bäst<br />
Du som är van att jobba med XHTML och CSS kommer troligvis<br />
att bli lite besviken när du börjar jobba med design av e-<strong>post</strong>. Det<br />
är lite som att <strong>för</strong>flytta sig tio år bakåt i tiden. Det som gäller <strong>för</strong><br />
nyhetsbrev är gammal HTML med taggar som och .<br />
Modern HTML med och CSS-layout fungerar helt enkelt inte<br />
särskilt bra i de flesta fall.<br />
CSS i nyhetsbrev<br />
CSS – som är väldigt tidsbesparande och ger enkel och ren<br />
HTML-kod – har väldigt dåligt stöd i de flesta e-<strong>post</strong>klienter. CSSpositionering,<br />
klasser och ID:n är helt uteslutet. Däremot kan du<br />
styra typsnitt, färger och liknande. Men ska du använda CSS är det<br />
inline-CSS som gäller. Alltså: du hårdkodar varje font-tagg så här:<br />
Lorem ipsum dolor sit amet...<br />
Vill du trots allt styra vissa detaljer i hela brevet med CSS ska du<br />
placera din CSS-kod innan<strong>för</strong> även om detta egentligen<br />
är fel. Vissa klienter klipper nämligen bort den kod som ligger<br />
innan<strong>för</strong> där vi normalt sett har vår CSS.<br />
HTML i nyhetsbrev<br />
Tabellstrukturen måste vara väldigt enkel <strong>för</strong> att fungera i alla<br />
tänkbara e-<strong>post</strong>klienter, du ska helst inte ha <strong>för</strong> många rader och<br />
kolumner. Försök hålla nere antalet colspan i dina tabeller och<br />
undvik rowspan helt och hållet.<br />
Tabellattributet cellspacing fungerar inte heller överallt, det är<br />
där<strong>för</strong> säkrast att utesluta detta också.<br />
Vill du ha marginaler och mellanrum som fungerar i alla<br />
e-<strong>post</strong>klienter görs det enklast med små gif-bilder. Du använder<br />
en gif-bild som är 1 x 1 pixlar stor, i en tabellcell, och drar ut den så<br />
många pixlar som marginalen ska vara.<br />
Exempel med 10 pixlar marginal på båda sidor om ett stycke text:<br />
<br />
Här kommer innehåll...<br />
<br />
Det hjälper att vara övertydlig. Skriv ut bredd på alla tabeller<br />
och tabellceller, fram<strong>för</strong>allt om du jobbar med en design där du<br />
är tvungen att ha tabeller i tabeller. Måtten <strong>för</strong> bilder är också<br />
viktiga, både höjd och bredd bör vara angivna på samtliga bilder.<br />
Fram<strong>för</strong>allt Lotus Notes har problem med bilder där mått saknas.<br />
Har du glömt höjden kan det till exempel hända att bilden antingen<br />
bara blir en pixel hög eller lika hög som bilden är bred. Jobbar du i<br />
ett system där du inte behöver koda själv men ändå har möjlighet<br />
att fylla i mått <strong>för</strong> bilder, se till att de alltid är ifyllda även här.<br />
I vissa fall kan det uppstå en oönskad marginal, eller ett litet glapp,<br />
28 29
under vissa bilder i klienten Hotmail. Du löser detta genom att<br />
lägga en smula inline-CSS-kod på bildtaggen.<br />
Exempel:<br />
Före: <br />
Efter: <br />
Undvik nästlade tabeller så långt det går. Bäst resultat uppnår du<br />
om du delar upp koden i så många fristående tabeller som möjligt,<br />
snarare än bakar in allt i en enda stor tabell.<br />
Exempel:<br />
<br />
<br />
<br />
<strong>Apsis</strong><br />
<br />
<br />
<br />
<br />
<br />
Här kommer innehåll...<br />
<br />
<br />
<br />
<br />
<br />
Baltzarsgatan 31, 211 36 Malmö<br />
<br />
<br />
7.0<br />
Skillnader på olika typer av<br />
e-<strong>post</strong>utskick<br />
Ett traditionellt nyhetsbrev har en viss regelbundenhet<br />
– en gång i veckan, eller en gång varannan månad. Ett<br />
transaktionsmeddelande kommer på beställning och<br />
inbjudningar och kampanjer i samband med en speciell<br />
händelse.<br />
Men man kan också se en tydlig skillnad i graden av personlighet.<br />
Ett traditionellt nyhetsbrev riktar sig till alla mottagare på en<br />
prenumerationslista. Ett filtrerat nyhetsbrev kommer till en<br />
snävare krets, och ett transaktionsmeddelande har bara en enda<br />
mottagare.<br />
Design av transaktionsmeddelanden<br />
Tansaktionsmeddelanden är ofta rena textmeddelanden, men här<br />
kan man bli betydligt mer kreativ. Låt oss säga att du beställt ett<br />
paket och det går iväg ett bekräftelsemeddelande när det lämnar<br />
lagret. Visst hade det varit trevligare om brevet påminde om det du<br />
väntar på snarare än ett rent textmeddelande?<br />
Design av inbjudningar och kampanjer<br />
Samma sak gäller här, du kan tänja lite på gränserna och släppa på<br />
tänket kring traditionella nyhetsbrev. Skickar du ut nyhetsbrev i<br />
samband med en högtid eller långhelg räknar folk med att det kan<br />
se lite festligare ut än vanligt.<br />
Många typer av inbjudningar innehåller ofta anmälningsformulär<br />
av något slag, vilket har dåligt stöd i många e-<strong>post</strong>klienter. Lägg<br />
dem istället på webben och länka till dem.<br />
30 31
7.1<br />
Traditionella nyhetsbrev<br />
Det vi kallar traditionella nyhetsbrev är en startpunkt <strong>för</strong> många<br />
som börjar med e-<strong>post</strong>marknads<strong>för</strong>ing. Det är den enklaste formen<br />
av brev, där man som avsändare skapar ett brev och skickar det till<br />
samtliga adresser på en prenumerantlista.<br />
Det kommer i viss mån alltid att finnas generella nyhetsbrev,<br />
men mottagare av e-<strong>post</strong> blir allt mer kräsna med vad som får<br />
hamna i inkorgen. Alla vill ha relevant information – något som<br />
avspeglar sig tydligt i öppningsfrekvensen på nyhetsbrev. Generella<br />
nyhetsbrev har en tydligt fallande trend och som avsändare har<br />
man mycket att vinna på att anpassa sina utskick efter olika<br />
målgrupper.<br />
Ett nyhetsbrev som <strong>för</strong>söker rikta sig till alla riskerar att inte<br />
vara helt rätt <strong>för</strong> någon. Det är där<strong>för</strong> generella nyhetsbrev har<br />
lägst öppningsfrekvens – och det är där<strong>för</strong> man har så mycket<br />
att tjäna på att göra sina brev mer personliga. Statistiken talar<br />
<strong>för</strong> sig själv: generella nyhetsbrev öppnas av 28 %, medan<br />
transaktionsmeddelanden ligger på 70 %.<br />
Nyckeln till en högre öppningsfrekvens ligger i att segmentera sina<br />
nyhetsbrev.<br />
Vi vet idag att massutskick ligger på en öppningsfrekvens på 26 %. Individutskick, som<br />
bekräftelsemeddelanden, ligger på drygt 70 % i öppningsfrekvens. Vi vill naturligtvis närmare<br />
de 70 procenten. Men hur? Skalan nedan<strong>för</strong> ger en del ledtrådar. Nästa kapitel <strong>för</strong>klarar mer.<br />
Massutskick<br />
Generella<br />
nyhetsbrev<br />
Segmentera,<br />
demo. data<br />
Segmentera<br />
på statistik<br />
Info<br />
från webb<br />
Individutskick<br />
Transaktionsmeddelanden<br />
7.2<br />
Filtrerade nyhetsbrev<br />
För att utveckla sina nyhetsbrev och <strong>för</strong> att öka chanserna att<br />
nå sina mottagare med ett relevant innehåll kan man arbeta<br />
med filtrerade nyhetsbrev. Det innebär att man skapar ett antal<br />
versioner av sitt brev och att olika grupper på prenumerationslistan<br />
får särskilt anpassade brev.<br />
Detta kan givetvis göras på ett närmast oändligt antal sätt.<br />
Filtrera på demografisk data<br />
Ett vanligt sätt att filtrera – eller segmentera, som vi ofta säger – är<br />
att välja ut ett eller flera demografiska attribut. Alltså: stad, ålder,<br />
kön eller någon annan egenskap som man bedömer är intressant.<br />
Ett bra e-<strong>post</strong>verktyg låter dig göra filtreringen direkt i<br />
nyhetsbrevet. Du behöver alltså inte skapa en mängd olika<br />
nyhetsbrev och manuellt välja ut vem som ska ha vilka brev, utan<br />
du skapar ett enda långt brev och adresserar sedan olika moduler i<br />
brevet till olika grupper av mottagare.<br />
Filtrera på statistik<br />
Nästa steg mot att skicka mer personliga brev är att anpassa<br />
informationen efter vad mottagarna har gjort i tidigare brev. Det<br />
kan vara att adressera delar av brevet till de som klickat på en<br />
viss modul i <strong>för</strong>ra utskicket eller göra riktade utskick till delar av<br />
prenumerantlistan.<br />
Efter några utskick kommer det att finnas ett antal mottagare<br />
som inte klickar på någonting överhuvudtaget. Uppenbarligen<br />
gör man något fel <strong>för</strong> den här gruppen – så här är det öppet att<br />
experimentera!<br />
32 33
“ ”<br />
Exempel på filter: Ett filtrerat nyhetsbrev som blir<br />
tre mottagaranpassade versioner vid utskick<br />
Caesarsallad, fruktsallad och fänkål.<br />
Grönsallad med svamp<br />
Späda salladsblad är bland det bästa sommaren har att<br />
erbjuda. Krydda med smakrik svamp – soccé!<br />
Läs mer om vår grönsallad med svamp<br />
Grillad kyckling med nypotatis<br />
När solen just börjar dra sig tillbaka från bryggan är det dags<br />
att tända grillen och skrubba färskpotatisen...<br />
Mexikansk sallad<br />
Läs mer om kyckling med potatis<br />
Mexiko är så mycket mer än tacos och enchiladas. En het men<br />
ändå svalkande sallad <strong>för</strong> sommaren, kanske?<br />
Läs mer om vår mexikanska sallad<br />
Caesarsallad med stekta räkor<br />
En Caesarsallad utan kycklling? Vi söker inspiration i<br />
skärgården och bjuder på sallad med havets läckerheter.<br />
Tomatsoppa<br />
Låt Caesarsalladen erövra ditt matbord<br />
Fin <strong>för</strong>rätt eller matig huvudrätt? Soppornas kameleont ändrar<br />
karaktär beroende på tillbehören.<br />
Läs mer om tomatsoppan<br />
Baltzarsgatan 31, 211 36 Malmö, tel. 040 - 24 97 70.<br />
Webbversion av detta nyhetsbrev<br />
Tipsa en vän<br />
Avregistrera dig<br />
Kontakta oss<br />
Filter:<br />
Vegetariskt<br />
Filter:<br />
Husmanskost<br />
Filter:<br />
Vegetariskt<br />
Filter:<br />
Husmanskost<br />
Filter:<br />
Soppa<br />
Caesarsallad, fruktsallad och fänkål.<br />
Grönsallad med svamp<br />
Späda salladsblad är bland det bästa sommaren har<br />
att erbjuda. Krydda med smakrik svamp – soccé!<br />
Läs mer om vår grönsallad med svamp<br />
Mexikansk sallad<br />
Lorem ipsum dolor sit amet, consectetur adipisicing<br />
elit, sed do eiusmod tempor incididunt ut labore et<br />
dolore magna aliqua.<br />
Läs mer om vår mexikanska sallad<br />
Caesarsallad, fruktsallad och fänkål.<br />
Grillad kyckling med nypotatis<br />
När solen just börjar dra sig tillbaka från bryggan är<br />
det dags att tända grillen och skrubba färskpotatisen...<br />
Läs mer om grillad kyckling<br />
Caesarsallad med stekta räkor<br />
En Caesarsallad utan kycklling? Vi söker<br />
inspiration i skärgården och bjuder på sallad med<br />
havets läckerheter.<br />
Låt Caesarsalladen erövra ditt matbord<br />
Caesarsallad, fruktsallad och fänkål.<br />
Grönsallad med svamp<br />
Späda salladsblad är bland det bästa sommaren har<br />
att erbjuda. Krydda med smakrik svamp – soccé!<br />
Läs mer om vår grönsallad med svamp<br />
Mexikansk sallad<br />
Mexiko är så mycket mer än tacos och<br />
enchiladas. En het men ändå svalkande sallad <strong>för</strong><br />
sommaren, kanske?<br />
Läs mer om vår mexikanska sallad<br />
Baltzarsgatan 31, 211 36 Malmö, tel. 040 - 24 97 70.<br />
Webbversion av detta nyhetsbrev<br />
34 35<br />
Tomatsoppa<br />
Baltzarsgatan 31, 211 36 Malmö, tel. 040 - 24 97 70.<br />
Baltzarsgatan 31, 211 36 Malmö, tel. 040 - 24 97 70.<br />
Fin <strong>för</strong>rätt eller matig huvudrätt? Soppornas<br />
kameleont ändrar karaktär beroende på tillbehören.<br />
Läs mer om tomatsoppan<br />
Webbversion av detta nyhetsbrev<br />
Webbversion av detta nyhetsbrev<br />
1<br />
Prenumererar på:<br />
Vegetariskt<br />
2<br />
Prenumererar på:<br />
Husmanskost<br />
3<br />
Prenumererar på:<br />
Vegetariskt och Soppa
Filtrera på webbstatistik<br />
Ett mer avancerat sätt att filtrera är att utgå från den statistik man<br />
får från sin webbstatistik. Att lära sig mer om vad dina besökare<br />
läser på webben kan vara till stor hjälp när du ska <strong>för</strong>bättra dina<br />
utskick. De flesta använder troligen Google Analytics eller något<br />
annat analysverktyg – se till att använd kunskapen härifrån till att<br />
göra bättre brev och glöm inte bort att du kan lära dig att styra dina<br />
besökare till rätt sida med hjälp av nyhetsbrevet.<br />
Massutskick<br />
Generella<br />
nyhetsbrev<br />
Segmentera,<br />
demo. data<br />
Segmentera<br />
på statistik<br />
Info<br />
från webb<br />
Filtrerade transaktionsmeddelanden<br />
Individutskick<br />
Transaktionsmeddelanden<br />
Transaktionsmeddelanden ses av många som en sorts elektroniska<br />
kvitton och ett nödvändigt ont. Men de har en öppningsfrekvens på<br />
inte mindre än 70 % vilket gör det hela mer intressant.<br />
Många gånger är det en besvikelse <strong>för</strong> mottagaren när de får ett<br />
rent textmeddelande efter ett köp. Förmodligen har köpet varit<br />
en inspirerande upplevelse på webben med trevliga bilder och<br />
lockande text. Var<strong>för</strong> vill inte <strong>för</strong>etaget fortsätta ge den känslan när<br />
kunden väl har gjort ett köp?<br />
Förutom att fläta in relevant information är det några punkter man<br />
ska tänka på <strong>för</strong> att lyckas med ett transaktionsmeddelande.<br />
• Ha en tydlig rubrik och fokusera på den <strong>för</strong>väntade informationen<br />
• Designen ska fokusera på själva bekräftelsen<br />
• Ha en fungerande design så att kunden känner att köpet var rätt<br />
• Ge mervärde<br />
• Testa<br />
Om du lyckas finns det en stor potential att knyta närmare band<br />
med dina kunder genom dina transaktionsmeddelanden.<br />
“<br />
Designexempel på ett transaktionsmeddelande:<br />
I det här exemplet har vi valt en bild<br />
med en stor jämn yta <strong>för</strong> texten där färgen är jämnt beige.<br />
På så sätt kan vi dela bilden i två delar och göra den undre<br />
delen som en ruta med bakgrundsfärg istället <strong>för</strong> bild,<br />
vilket man gör med HTML-kod, och endast ha den övre<br />
delen som bild. Vi lägger sedan text och logga i den undre<br />
rutan.<br />
Så här gör du:<br />
Ditt paket är på väg!<br />
Vi kommer att leverera enligt följande:<br />
Adress: Baltzarsgatan 31<br />
Datum: 21 mars<br />
Tid: 12.00<br />
Salladsskålen<br />
Ditt paket är på väg!<br />
Vi kommer att leverera enligt följande:<br />
Adress: Baltzarsgatan 31<br />
Datum: 21 mars<br />
Tid: 12.00<br />
36 37<br />
Resultat:<br />
“ ”<br />
Med bildblockering: När bildblockering är aktiverat<br />
blockeras den övre delen eftersom detta är en bild, samt<br />
loggan i den undre delen. Men eftersom den undre delen<br />
inte är en bild kommer textmeddelandet fram.<br />
”
8.0<br />
Nyhetsbrev – ett komplement till<br />
webbsidan<br />
Det vi har beskrivit så här långt handlar nästan<br />
uteslutande om hur du ska bygga upp ditt brev <strong>för</strong> att det<br />
ska locka läsaren att klicka vidare. Alla erbjudanden, alla<br />
artiklar och alla formulär finns någon annanstans än i<br />
själva brevet. Hur kompletterar de varandra?<br />
Frågan är om det är någon skillnad när erbjudandet står i brevet<br />
eller på din webbplats. Det är ju samma erbjudande? Det kan verka<br />
konstigt att lägga ner stor möda på att göra ett brev så bra som<br />
möjligt och sedan hoppas på att läsarna klickar sig bort från det.<br />
Men det finns goda skäl till att vi tycker att det är en bra idé att<br />
designa ditt brev så att det lockar iväg dina läsare.<br />
Det handlar dels om mätbarhet. Du kan inte se vad någon läser,<br />
men du kan se vad de klickar på. Även om någon läser hela ditt<br />
brev från början till slut har du ingen aning om vad som var bra<br />
eller dåligt. Eller <strong>för</strong> den delen om de läste mer än <strong>för</strong>sta meningen.<br />
När du får klick vet du – och du får möjlighet att göra ett ännu<br />
bättre brev nästa gång.<br />
En annan viktig del är att du vill att dina läsare ska vara i en miljö<br />
som du kontrollerar. En e-<strong>post</strong>klient är som regel en visuellt stökig<br />
plats där det händer mängder av saker utom din kontroll. På din<br />
webbplats är det du som bestämmer.<br />
På en webbplats har du också stora möjligheter att locka till<br />
vidareläsning. Du kan få dina besökare att spendera mer tid hos dig<br />
och du får större möjligheter att berätta om din verksamhet eller<br />
om dina erbjudanden.<br />
Och glöm inte att se till att dina läsare känner igen sig i din grafiska<br />
profil. Bara skymten av ditt brev ska få mottagarna att se vem det<br />
kommer ifrån. Det ger trygghet och möjlighet till en fortsatt god<br />
kommunikation samt möjlighet att lära känna dina mottagare.<br />
Se nyhetsbrevet som en del i din stora marknads<strong>för</strong>ingsplan.<br />
Använd det som en krok <strong>för</strong> att dra in dem till webben. Kroken ska<br />
locka och vara intressant men samtidigt hänga ihop med din övriga<br />
marknads<strong>för</strong>ing.<br />
Design av e-<strong>post</strong> är kul, trots bråkiga e-<strong>post</strong>klienter och lömska<br />
spamfilter. Du märker det när du äntligen får det att fungera och<br />
fram<strong>för</strong>allt när du märker hur varje utskick lyfter trafiken på<br />
webben. Vi hoppas att du får uppleva tillfredställelsen av ett lyckat<br />
utskick som är uppskattat hos mottagarna.<br />
38 39
9.0<br />
<strong>Apsis</strong> Newsletter Pro – lättanvänt<br />
och kraftfullt verktyg <strong>för</strong><br />
e-<strong>post</strong>marknads<strong>för</strong>ing<br />
<strong>Apsis</strong> Newsletter Pro är en lösning byggd på erfarenheter<br />
från en mängd stora och små kunders arbete med<br />
nyhetsbrev och annan e-<strong>post</strong>kommunikation. Sedan<br />
vi startade <strong>Apsis</strong> 2001 har vi lärt oss mycket om olika<br />
kunders behov vid denna typ av arbete, lärdomar som<br />
vi omvandlat till ett effektivt, kraftfullt och fram<strong>för</strong>allt<br />
lättarbetat verktyg.<br />
<strong>Apsis</strong> Newsletter Pro bygger på tre huvudingredienser –<br />
användarvänlighet, läs- och leveransbarhet samt detaljerad<br />
statistik.<br />
Vi lägger ner mycket tid och resurser på att kontinuerligt <strong>för</strong>enkla<br />
och utöka verktyget. Det gör att du utan tekniska <strong>för</strong>kunskaper<br />
kan göra allt från att enkelt sätta ihop brev med hjälp av drag- och<br />
släppfunktion till mer avancerade<br />
moment som att segmentera på<br />
målgrupper och aktivitet.<br />
Vårt verktyg har hög kapacitet och<br />
flera funktioner som säkerställer<br />
att brevet ser korrekt ut när det<br />
hamnar i mottagarens inkorg.<br />
Statistiken presenteras på en rad<br />
olika sätt, helt efter dina behov.<br />
Du kan få en överskådlig sammanfattning eller en detaljerad<br />
rapport i siffror.<br />
Du har stora möjligheter att anpassa <strong>Apsis</strong> Newsletter Pro efter<br />
olika behov och din verksamhets storlek. Verktyget hjälper dig på<br />
alla plan, från att regelbundet skicka ut månatliga nyhetsbrev till<br />
att integrera e-<strong>post</strong>marknads<strong>för</strong>ingen med CRM-system, XML- och<br />
RSS-flöden samt Google Analytics.<br />
Som användare av <strong>Apsis</strong> Newsletter Pro får du tillgång till såväl<br />
professionella analysverktyg som engagerad support – allt du<br />
behöver <strong>för</strong> att maximera effekten av dina e-<strong>post</strong>utskick.<br />
Kontakta oss gärna <strong>för</strong> mer information, info@apsis.se eller besök<br />
oss på www.apsis.se.<br />
40 41
9.1<br />
Om <strong>Apsis</strong><br />
<strong>Apsis</strong> levererar verktyg och tjänster <strong>för</strong> kostnadseffektiv<br />
Internetmarknads<strong>för</strong>ing. Vi startade vår verksamhet<br />
hösten 2001 och är idag Skandinaviens ledande<br />
leverantör av lösningar <strong>för</strong> legitim e-<strong>post</strong>marknads<strong>för</strong>ing.<br />
Vår lösning, <strong>Apsis</strong> Newsletter Pro, används idag av en rad<br />
stora och små <strong>för</strong>etag och organisationer.<br />
Vi är inte en reklam- eller webbyrå, utan en teknisk leverantör som<br />
gärna samarbetar med byråer <strong>för</strong> att leverera starka totallösningar<br />
till gemensamma kunder.<br />
Läs mer om oss på www.apsis.se – och hör gärna av dig om du har<br />
frågor eller funderingar.<br />
Håll dig uppdaterad inom internetmarknads<strong>för</strong>ing genom att<br />
prenumerera på <strong>Apsis</strong> nyhetsbrev!<br />
Lär dig mer om<br />
e-<strong>post</strong>marknads<strong>för</strong>ing<br />
<strong>Apsis</strong> Handbok i e-<strong>post</strong>marknads<strong>för</strong>ing<br />
innehåller erfarenhet och praktiska<br />
exempel från 1 miljard skickade<br />
e-<strong>post</strong>meddelanden och samarbete<br />
med några av Sveriges skickligaste<br />
marknads<strong>för</strong>are inom e-<strong>post</strong>.<br />
Beställ ett kostnadsfritt exemplar på:<br />
www.nyhetsbrev.biz<br />
Ett sätt att gå runt spamfilter,<br />
bildblockering och bråkiga<br />
e-<strong>post</strong>klienter<br />
Vi avslutar med ett exempel där vi vill leverera ett tungt<br />
grafiskt brev. Vi vill inte att det fastnar i spamfilter som<br />
blockerar stora bilder eller att budskapet <strong>för</strong>svinner<br />
vid bildblockering. Vi vill också att det ska fungera i alla<br />
e-<strong>post</strong>klienter.<br />
När det når mottagaren ser det<br />
ut som en enda stor bild, men är<br />
egentligen flera små bilder och<br />
text på en bakgrundsfärg. Om<br />
mottagaren har bildblockering<br />
aktiverat kommer textbudskapet<br />
fortfarande fram.<br />
Det här är en ganska vanlig lösning<br />
och det är ofta så här man får tänka<br />
vid design av e-<strong>post</strong>. Experimentera<br />
gärna själv <strong>för</strong> att hitta vägar runt<br />
spamfilter, bildblockering och<br />
bråkiga e-<strong>post</strong>klienter. Lycka till!<br />
Vi letar upp en bild med en stor jämn<br />
färgyta och delar upp<br />
bilden i rutor (flera<br />
bilder) och <strong>för</strong>söker få<br />
ut en så stor yta som<br />
möjligt <strong>för</strong> texten. Den<br />
här rutan kommer<br />
inte att bli en bild utan<br />
ett textområde med<br />
bakgrundsfärg.<br />
Känner du någon som<br />
behöver den här guiden?<br />
42 43<br />
Maila:<br />
info@apsis.se<br />
Känner du någon som<br />
behöver den här guiden?<br />
Maila:<br />
info@apsis.se
“<br />
Malmö (huvudkontor)<br />
tel. 040 - 24 97 70<br />
Stockholm<br />
tel. 08 - 50 00 77 66<br />
Göteborg<br />
Det här brevet har blivit<br />
längre än vanligt, <strong>för</strong> jag har<br />
inte haft tid att skriva kort.<br />
Blaise Pascal (1623-1662)<br />
Känner du någon som behöver den här guiden?<br />
tel. 031 - 761 81 10<br />
Maila: info@apsis.se<br />
”<br />
www.apsis.se<br />
info@apsis.se<br />
support@apsis.se<br />
partner@apsis.se