Alla inlägg i kategorin ‘Design av e-post’
onsdag, 27 oktober 2010, 22:54
Många e-postmarknadsförare skickar fortfarande nyhetsbrev med enbart stora bilder. Detta är inte bra, men jag är säker på att det finns flera förklarliga anledningar. E-postleverantörer som levererar tjänster för e-postutskick saknar kanske kunskapen, eller glömmer sälja in denna när de tar in nya kunder. En del e-postleverantörer kanske inte har intresset av att utbilda sina kunder på området e-postdesign. Förmodligen har en del svårt att se hur det skulle vara deras skyldighet. Och det kanske inte är konstigt egentligen. Det är ofta byråer som designar e-postutskicken. E-postdesign är lite speciellt. Det kan vara så att traditionella reklambyråer som tar sig an e-postdesign har liten kunskap om e-postutskick. Hur som helst, den omedvetne kunden blir säkert nöjd, men hur är det med kundens kunder? Slutanvändaren det vill säga. Det är ju vi det.
Här är fyra saker att tänka på vad gäller bilder och e-post.
1. Det här är bildblockering
Din e-postklient är rädd om dig, den tycker inte du ska ha elaka virus på datorn. Den värnar om din integritet, den vill inte att det ska registreras någonstans vad du öppnar för e-post om du inte vill detta. Den blockerar därför bland annat bilder. Svårare än så är det inte. Så länge bilderna är blockerade sitter du ganska säkert.
Du behöver inte förstå tekniken bakom detta. Bara ha det i åtanke när du utformar nyhetsbrev.
Ett fint reklamerbjudande om svenskodlade apelsiner, som kanske fungerar bra i tryck eller som en stor bild på webben, skulle kunna se ut så här:
Skulle vi skicka samma budskap som en bild i ett e-postmeddelande skulle det däremot se ut så här för många mottagare, om de har bilder blockerade:
Alla känner nog igen detta vid det här laget.
Måste du trots allt använda dig av stora bilder i toppen av ett nyhetsbrev kan en väl planerad preheader vara till hjälp.
2. Avdramatisera och försköna bildblockering
Det ser inte speciellt snyggt ut med alla tomma rutor som dyker upp när bildblockeringen slår till. Det ser snarare ut som att något är fel än att något hjälpt mottagaren undvika både den ena katastrofen efter den andra. Men detta går att lätta upp med en så kallad ALT-text. Lägger du en ALT-text på bilden syns denna för många mottagare när bilden är blockerad.
En ALT-text kan vara en beskrivande text eller en uppmaning, beronede på vad du vill ådstakomma. Är det viktigt för dig att mottagaren ska agera, använda en uppmaning. Vill du ha en bra ursäkt till varför bilden är borta, använd en beskrivande text.
Du kan även exeperimentera med bakgrundsfärger, bakom bilderna. I vissa e-postklienter kommer dessa att synas och kan ge en bättre känsla av det bilden förmedlar. Färgen orange för apelsiner till exempel:
3. Bilder och spamfilter
Din e-postklient är troligtvis utrustad med ett och annat spamfilter. Spamfilter finns i många olika utföranden och skyddar dig mot skräpmail av alla de slag. Det är framförallt två saker du ska tänka på vad avser bilder och spamfilter.
a) Simpla spammare lägger inte ner tid på att konstruera luriga skräpmail utan nöjer sig med att skicka just en enda stor bild. De flesta spamfilter kommer att reagera på detta. Men spammare vet att om 1 man på 100 saknar spamfilter eller trots allt öppnar mail som ligger spamkorgen, och nappar på erbjudandet, kommer det generera försäljning på alla de miljoner spam man skickar. Det här, förutom bildblockering, är ännu en orsak att inte skicka ebart en bild i ett mail.
b) En del spamfilter är riktigt griniga. Om text och bild väger väldigt ojämnt åker mailet kanske i skräpposten. Sträva gärna efter en bra balans mellan grafik och text för att undvika detta.
4. Hitta rätt bilder
Jobbar du med segmenterad e-postmarknadsföring? En och samma typ av bild passar kanske inte alla. Du har möjlighet att skicka olika bilder till olika kön och målgrupper med enkla knep. Ta reda på vilken typ av bilder som lockar till klick och att lär känna mottagarna. Det är något du faktiskt kan experimentera med själv. Du behöver inte köpa dyra studier och analyser som kanske ändå inte funkar för just det du skickar ut. Utvärdera var mottagarna klickar och skapa dina egna heatmaps. Du har stora möjligheter att hitta egna framgångskoncept. Du har bäst förutsättningar att bli expert på vad dina kunder vill ha, helt enkelt.
söndag, 21 mars 2010, 18:00
Den här artikeln författades av Christopher Månsson för Apsis Sweden AB, 2007 – 2009.
Du har säkert stött på hemsidor med väldigt mycket innehåll, där man hjälper dig som läsare att hitta rätt med hjälp av interna länkar, så kallade ankarlänkar. Länkar som tar dig vidare till en viss sektion på samma sida.
Ofta brukar dessa länkar ligga inledningsvis, som en innehållsförteckning. Du klickar exempelvis på länken som heter ”Till Kapitel 2” och webbläsaren skickar dig längre ner till just kapitel 2 på samma sida.
Det här är så klart väldigt användbart i många fall. Man uppnår ett upplägg som inte är beroende av undersidor. Perfekt för långa mail helt enkelt, för visst fungerar det här även i mail? Ja, för en gångs skull.
Det finns alltid risk att enskilda e-postklienter kommer att protestera, men vanligtvis är ankarlänkar inga problem. Ett litet test på hur bra stödet är följer lite längre ner i artikeln.
Tänk på att du i normala fall inte får någon klickstatistik på ankarlänkar. Tänk också på att du introducerar ytterligare ett sätt för läsaren att navigera sig fram i ett mail. Det är inte säkert att ankarlänkar upplevs så självklart i ett mail som de upplevs på webben.
Så här gör du ankarlänkar (med HTML):
Du sätter ett ankare på den sektion du vill att man ska kunna hoppa till. I det här fallet döper vi ankaret till ”kapitel2″ och lägger det runt rubriken:
<a name=”kapitel2”></a>
Ankaret ser nästan ut precis som en länk, men har attributet ”name” istället för ”href”.
För att hoppa till denna sektion med en vanlig länk skriver vi en brädgård och ”kaptiel2″ som adress i länken:
<a href=”#kapitel2”>Kapitel 2</a>
Svårare än så här är det faktiskt inte.
Ankarlänkar i ett mail
Koden bakom
Har du redan ankare på hemsidan kan du skicka läsaren till dessa från nyhetsbrevet på samma sätt genom att lägga till hemsideadressen i länken, innan brädgården:
<a href=”http://www.till-min-hemsida.se#kapitel2″>Kapitel 2</a>
Ett test i 9 välkända e-postklienter gav positivt resultat. Ankarlänkar fungerade i samtliga.
- Outlook 2002
- Outlook 2007
- Hotmail
- Gmail
- Yahoo Mail
- Apple Mail
- iPhone Mail
- Telia Webmail
- Lotus Notes 8.5
söndag, 21 mars 2010, 12:43
Den här artikeln författades av Sarah Wittbom för Apsis Sweden AB, 2007 – 2009.
Brev med bildblockering är ungefär som caffe latte utan mjölk. Så har vi lite drastiskt sagt förut, men svaren på vår undersökning om hur våra läsare använder sina e-postklienter är minst lika dramatiska.
Det första man ofta lägger märke till när man testar sina nyhetsbrev i olika e-postklienter är hur mycket av designen och budskapet som försvinner när bilderna är blockerade hos mottagaren.
Att bygga upp hela sin design på bilder och att lägga text i bilder är därför inte att rekommendera om man vill fånga mottagarens intresse på ett effektivt sätt.
Ändå så är det många stora företag från hela världen som har brev som är helt beroende av att bilder visas. Man ser till och med brev med en enda stor bild. Så varför pratar vi så mycket om att ni som läser ska utforma brev som fungerar som textmail? Jo, för att många mottagare blockerar bilder.
Vi visste att det var en stor andel som inte ser bilder, och för att lära oss mer genomförde vi en undersökning på vår webbplats och i vårt eget nyhetsbrev. Den innehöll tre enkla frågor. Den första var:
Laddar din e-postklient bilder automatiskt?
Svaret? Hela 65 % säger ”Nej”. De har alltså bilderna blockerade.
Det är sant att många i denna grupp väljer att ladda bilder manuellt, men det ligger ett större ansvar på alla e-postmarknadsförare att motivera läsarna till att klicka på länken för att hämta bilder. Ett sätt är att lägga en preheader. För att lära dig mer om detta, läs här om hur du skapar en preheader. Även om det är mottagaren som laddar bilderna manuellt så är det intressant att veta vad det är som gör att han eller hon hämtar bilderna.
På frågan om du inte laddar bilder automatiskt, vad får dig att hämta hem dem? så svarar 75 % att en känd avsändare är avgörande för att man ska hämta bilderna. Förtroendet och relationen till företaget är också avgörande för att brevet ska presenteras på rätt sätt.
Vi var också intresserade av att veta vilken e-postklient som för närvarande är dominant. Det visade sig att trots missnöje i början så har nu Outlook 2007 blivit den dominerande e-postklienten med 42 % följt av Outlook 2003 med 17 %.
Vad lär vi oss av detta? Bildblockering är en viktig faktor som vi behöver ta i beaktande för varje brev vi skickar ut. Var aktiv och testa hur brevet ser ut i olika e-postklienter med bildblockering aktiverad. Förstår mottagaren vad du vill, även utan bilder? Lägger ni ner den tid som är nödvändig på ämnesrad för hela brevet, rubriker i brevet och en intressant pre-header? Det kan nämligen vara avgörande för att ni ska få era mottagare att ta del av hela ert brev.
söndag, 21 mars 2010, 12:43
Den här artikeln författades av Christopher Månsson för Apsis Sweden AB, 2007 – 2009.
Det har väl inte undgått någon att man kan spara bilder i olika filformat, till exempel GIF eller JPG. Vilket format man väljer att spara en bild i beror på hur och var man tänkt använda den. Formaten har olika för och nackdelar, och jobbar man med bilder i e-post går det inte att använda vad som helst. Hur ska vi då spara bilder som ska användas i e-postutskick? Idag är det ungefär samma tumregler för både e-post och webb.
Bildformaten PNG, JPG och GIF är de tre vanligaste och lämpligaste för webb. Vi kommer strax in på vad de olika formaten har för egenskaper. För e-post är de två vanligaste JPG och GIF. PNG är alltså inte särskilt vanligt i e-post men har ändå ganska utbrett stöd i e-postklienter idag och skulle kunna användas betydligt mer. PNG-bilder har dessutom en egenskap som JPG och GIF saknar – vi kommer också in på detta strax.
GIF-bilder
Enkla illustrationer och logotyper sparas lämpligast som GIF-bilder då de kräver mindre antal färger. En GIF-bild kan nämligen innehålla maximalt 256 färger. Med en GIF-bild får du rena färgytor med tydliga och skarpa kanter. GIF-bilder blir ofta väldigt lätta i filstorlek och stöds i alla stora e-postklienter.
JPG-bilder
Fotografier har i stort sett alltid mer än 256 färger, och sparas därför lämpligast som JPG-bilder. JPG-bilder kan komprimeras i olika grad för att justera filstorleken, alltså tiden det tar för besökaren eller e-postmottagaren att ladda bilden. JPG-bilder förlorar dock kvalitet när de komprimeras. Komprimerar man bilden för mycket blir den otydlig och skarpa kanter försvinner. JPG-bilder stöds också i alla stora e-postklienter.
PNG-bilder
PNG-bilder kan användas för flera ändamål men är vanligast när man har avancerad grafik med skuggor och transparenta effekter. Formatet är inte lämpligt för rena fotografier då JPG-formatet i detta fall ger mindre filstorlek. Däremot går det utmärkt att ersätta GIF-bilder på webben med PNG-bilder. PNG-bilder stöds i de flesta stora e-postklienter men saknar stöd i Lotus Notes.
Transparens i bilder
För att använda transparens och äkta skuggor som faller över bakomliggande objekt krävs något som kallas alpha-transparens. Detta stöd finns i just PNG-bilder men saknas i både JPG oh GIF. GIF-bilder kan ha en viss typ av transparens men lämnar ofta tydliga spår av att det inte fungerar som det var tänkt. I exemplet här nedan har vi lagt en frilagd figur på en bakgrund som tonar från ljust till mörkt. Det framgår tydligt att det inte fungerar särkilt bra med vare sig GIF eller JPG men går utmärkt med PNG.
I GIF-bilden får figuren vita kanter och skuggeffekten under figuren ser inte naturlig ut. I JPG-bilden blir det en vit ruta bakom figuren eftersom stöd för transparens saknas helt och hållet. I PNG-bilden flyter figuren naturligt samman med bakgrunden.
PNG-bilder fungerar som sagt i de flesta stora e-postklienter, så använd dem gärna om det behövs.
söndag, 21 mars 2010, 12:43
Den här artikeln författades av Sarah Wittbom för Apsis Sweden AB, 2007 – 2009.
Länkar till film kan ge dina e-postutskick ett rejält lyft i öppningsfrekvens. Rörlig bild i e-post är en lockande tanke – men svår att genomföra i verkligheten. Vi visar vad som är möjligt och vad du kan göra i dina brev!
I förra nyhetsbrevet hade vi en artikel om hur rörlig bild fungerar i e-post. Det var ganska dyster information, som i grund och botten berättade att det inte är praktiskt möjligt att spela filmsekvenser direkt i ett e-postmeddelande. Såväl våra egna tester som amerikanska tester visar att e-postklienter är mycket restriktiva med vad de tillåter, eftersom de inte vill släppa genom skadlig kod. Det är lätt att tycka att e-postklienterna i vissa fall är överdrivet restriktiva, men samtidigt måste vi som användare acceptera att verkligheten ser ut som den gör.
Innebär det då att man ska ge upp innan man ens har börjat? Nej, naturligtvis inte! Jämför det med att lära sig trafikreglerna innan man får köra. Vissa regler kanske man har svårt att förstå meningen med – men de finns, och du kan inte protestera mot dem eller ignorera dem. Gör du det riskerar du att råka ut för en olycka eller en böteslapp.
Struntar du i e-postreglerna är risken ganska stor att ditt brev ser konstigt ut, att det inte kommer fram eller att det fastnar i ett spamfilter.
En slutsats man kan dra av diagrammet nedan är att animerade GIF-bilder skulle kunna fungera (undantaget Outlook 2007, där endast första bildrutan i animationen kommer att synas). Och ja, formatet passar bra för vissa saker, exempelvis banner-annonser. Men det är några saker du bör känna till och utvärdera när det gäller att använda animerade GIF-bilder i e-post.
En första viktig punkt är animationen inte syns om mottagaren har bildblockering – något som du kan läsa om här. Om så är fallet är det viktigt att använda alt-texter och en preheader. Bildkvaliteten är dessutom betydligt sämre i GIF-format. Du kan exempelvis bara använda 256 färger, vilket kanske låter mycket – men om man jämför med andra format med miljontals färger så blir skillnaden ganska stor. Animationen tar tid på sig att ladda beroende på hur stor den är och mottagaren har inte någon möjlighet att kontrollera filmens uppspelning då en GIF-animation inte kan läggas i en filmspelare. Det gör i sin tur att mottagaren kanske inte ser delar av filmen och inte kan se den en andra gång. Alternativet är att lägga filmen så att den spelas om och om igen, men det är inte heller önskvärt. Det som hamnar i vår inkorg vill vi gärna kunna kontrollera och känna att vi styr helt och hållet.
Slutligen så finns inget stöd för ljud som ofta är viktigt när man vill visa film.
Min rekommendation är att ni istället lägger lite tid på att presentera en länk till rörlig bild på bästa möjliga sätt. Vi provade att göra det till vår senaste inbjudan till seminarium och märkte en betydligt bättre respons mot när vi tidigare bara har haft en vanlig textlänk. Av brevets totala klick så fick bildlänken till rörlig bild hela 29 % mot 5 % som vi fått när vi bjudit in med bara en textlänk.
Hur presenterar man en filmsekvens på bästa sätt? Ja, kort och gott skulle man kunna säga att det handlar om att vara övertydlig och pedagogisk. Det behöver man vara eftersom vi i Sverige inte är allt för bortskämda med länkar till rörlig bild. Nedan följer några steg som gör det enkelt och konkret för mottagaren.
- Börja med att ta en skärmdump på en uppseendeväckande del av filmsekvensen. Gärna så att mottagaren förstår att det är på väg att hända något eller då talaren är mitt uppe i en mening. Lägg länken till filmsekvensen i bilden.
- Lägg bilden i en spelare så man ser hur lång filmen är och att man kan kontrollera den själv.
- Lägg en tydlig ”play-ikon” mitt i bilden.
- Bilden lägger du i brevet. Skriv en bra rubrik ovanför bilden. Rubriker är otroligt viktiga i e-postsammanhang – särskilt med tanke på att många blockerar bilderna.
- Av just det skälet är det viktigt att du också har en textlänk till filmsekvensen
- Glöm inte att använda er av en preheader som gärna pratar om just filmsekvensen. ALT-texter ska beskriva vad bilden innehåller om mottagaren inte ser bilden. Utforma gärna ALT-texten som en uppmaning.
Jag följer en blogg där Anna Yeaman berättar om hur hon hjälpte en kund förbättra sin e-postmarknadsföring. Vid ett tillfälle testade hon att länka en av sina kunders brev till rörlig bild. Resultatet blev förbluffande bra. Från att ha haft en ”click-through-rate” på 20-27 % steg siffrorna till att konstant ligga på 51-65 % är fantastiskt bra siffror. Och siffrorna höll sig på samma goda nivå till ett år senare när hon la upp resultaten på bloggen.
Slutsatsen blir: grubbla inte varför trafikreglerna för e-post är så restriktiva och tråkiga. Vänd dem till din fördel och länka till rörlig bild i e-post. Effekterna och de goda resultaten är alldeles för bra ut för att inte utnyttjas.
Vill du se delen i vårt senaste seminarium som handlade om just detta så klicka här.
