Alla inlägg i kategorin ‘Design av e-post’
söndag, 21 mars 2010, 12:43
Den här artikeln författades av Sarah Wittbom för Apsis Sweden AB, 2007 – 2009.
Rörlig bild i e-post är en spännande möjlighet. Det är inte konstigt med tanke på YouTubes popularitet. Hur är det möjligt att ett klipp på en helt okänd Susan Boyle kan gå från 0 till 48 miljoner klick på mindre än två veckor? Och finns det en möjlighet att utnyttja kraften i det här mediet?
Allt eftersom vi får tillgång till allt större bandbredd och ägnar mer och mer tid åt Internet, så blir allt fler intresserade av att marknadsföra sig, kommunicera eller genomföra utbildningar med film.
Men hur passar det i e-post? Alla som arbetar med e-postmarknadsföring vet vilken utmaning det kan vara bara att få ett vanligt brev att se korrekt ut i olika e-postklienter. Så även om det kan vara en lockande tanke att få en filmsekvens att spela i samma stund som brevet öppnas eller att ha en banner med flera bilder som följer efter varandra kommer ju frågan direkt: fungerar det?
Våra tester i Hotmail/MSN, Yahoo, Gmail, Outlook 2002/2007, Telia webbmail, Entourage och Apple Mail visar att det inte är helt enkelt. Vi provade film i formatet Flash, eftersom det är det vanligaste på webben. Filmen spelades bara i Apple Mail och det var tack vare att bilderna inte var blockerade. När vi provade att lägga en film i Quicktime fick vi samma resultat.
När det inte fungerade – alltså i nästan alla klienter – så var breven helt vita och tomma. Slutsatsen är alltså att det inte är att rekommendera att lägga rörliga bilder som ska spelas utan en aktivering på något sätt.
Ett sätt att komma runt detta kan vara att lägga animerade GIF-bilder istället för flash.
Det fungerar i det flesta e-postklienter förutom Outlook 2007. I den klienten visas den första bilden du lagt i serien. Så väljer man att använda sig av animerade GIF-bilder så är det alltså viktigt att lägga lite extra tid och kraft på den första bilden.
Hur är det då med en iframe? Det är ganska logiskt att tänka att man löst problemet på detta sätt eftersom en iframe är som att klippa ut ett fönster i ett nyhetsbrev och i fönstret visa en webbsida med exempelvis en filmsekvens. Har vi löst problematiken då? Tyvärr så blir det samma resultat eftersom det fortfarande är e-postklienten som visar upp innehållet. Det är fortfarande e-postklientens villkor, ”webbkod” fungerar inte alltid i e-post, kort och gott.
Att få en film att spelas i ett mail är näst intill omöjligt. Så för dig återstår det att presentera ett filmklipp så attraktivt att mottagaren motiveras att klicka på bilden eller på länken.
lördag, 20 mars 2010, 12:43
Den här artikeln författades av Christopher Månsson för Apsis Sweden AB, 2007 – 2009.
Med 140 miljoner licenser och 46 000 företag som användare är Lotus Notes en vanlig syn på kontor runt om i världen.
Precis som andra sviter av kontorsprogram strävar Lotus Notes efter att vara ett flexibelt system med många funktioner i ett och samma system: e-post, kalender och schemahantering bland annat. Möjligheterna till personlig anpassning är stora – något som kan vara både positiv och negativt.
I vissa fall har nämligen funktionaliteten en baksida. Vi på Apsis har många kunder som brottas med problem kring e-postklienten Lotus Notes. Breven ser inte ut som man vill, och vissa attribut (kommandon) i kodningen hoppas helt enkelt över. Om man exempelvis ställer in en annan höjd och bredd på en bild så visas ändå den ursprungliga bildstorleken, vilket inte passar brevet alls. Detta beror mycket på inställningar, naturligtvis, men vi har tittat lite närmare på vad som händer med breven och vad som ställer till det utseendemässigt på dem.
När det gäller HTML-mail är Lotus Notes egentligen en ganska mottaglig e-postklient. Merparten av de nyhetsbrev vi på Apsis testar i e-postklienten ser ungefär ut som de ska och de regler som gäller för formgivning av nyhetsbrev är jämförbara med reglerna för Outlook 2007. Det innebär att bland annat bakgrundsbilder, skuggeffekter och färgtoningar ställer till problem.
Trots det hyfsade HTML-stödet bör man tänka till om man funderar på att formge nyhetsbrev för Lotus Notes-mottagare. Detta på grund av de ofantligt många olika inställningar mottagaren kan tänkas ha. Ofta sitter han eller hon bakom stängda dörrar i en Lotus Domino-miljö och det innebär att man omöjligt kan gissa sig fram till hur breven ser ut när de kommer fram. I denna artikel har vi gjort tester mot en och samma version av Lotus Notes för att ge en bild av hur olika breven kan se ut när de når mottagaren.
1. Apsis nyhetsbrev sett i en e-postklient med fullständigt HTML-stöd och normala inställningar (Apples Mail). Nyhetsbrevet ser ut exakt som det ska.
2. Apsis nyhetsbrev ser i stort sett ut som det ska med enbart Lotus Notes och standardinställningar. Det enda fel man kan urskilja är en vit linje längs brevets högerkant vilket syns tydligt i brevets övre högra hörn. Problemet uppstår förmodligen av att någon del i nyhetsbrevet trycker ut brevet 1 pixel. Justeringar kan möjligtvis göras för att få det helt bra, men resultatet är helt acceptabelt.
3. Apsis nyhetsbrev i samma version av Lotus Notes hos en annan mottagare med särskilda inställningar i antingen e-postklienten eller globala serverinställningar för inkommande mail. Här trycks brevets bredd ut till 100 % av e-postläsarens fönster. Vilka inställningar just den här mottagaren har vet vi inte exakt men justeringar och tester till den här mottagarens klient kan göras för att förbättra resultatet. I värsta fall får man skala ner brevet utseendemässigt så att den bakomliggande koden blir enklare.
De metoder vi på Apsis tillämpar är bland annat att testa brevet mot den aktuella mottagargruppens miljö och sedan koda om brevet och skicka ett antal gånger tills det ser korrekt ut. Men en enklare lösning är att släppa alla höga layoutambitioner och utgå från ett traditionellt brev, en enskild textspalt med avsändarens logga och kanske enstaka bilder. Komplexa former med flera spalter, boxar, rutor, ramar och detaljgrafik ställer nämligen oftast till det rejält hos vissa mottagare.
Att tänka på när du planerar dina Lotus Notes-brev:
- Sträva efter den enklaste formen
- Skriv alltid ut mått för både höjd och bredd på dina bilder
- Undvik layout som kräver en HTML-struktur med tabeller i tabeller
- Undvik ramar, bakgrundsbilder, skuggeffekter, färgtoningar och detaljgrafik
lördag, 20 mars 2010, 12:43
Den här artikeln författades av Christopher Månsson för Apsis Sweden AB, 2007 – 2009.
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 och missar något av det mer grundläggande.
Vi kommer till våren att sammanställa en mer omfattande designguide för utformning av nyhetsbrev, men här är redan nu några goda råd för hur du kan tänka kring design och layout. Det första tipset fokuserar på processen när det är dags att ta fram en mall för dina framtida nyhetsbrev och de två andra tipsen hjälper dig när du redan är igång.
1. Tips för layout och innehåll
Det finns säkerligen inte en universell, optimal form som fungerar för alla typer av e-postutskick. Skulle den mot förmodan existera skulle mottagarna troligen tröttna i längden på att alla nyhetsbrev såg likadana ut. Lek gärna lite med tanken på att ett nyhetsbrev inte behöver vara ett brev med nyheter. Det kan i stort sett innehålla vad som helst så länge det ger mottagaren något av värde.
Vad som funkar bäst får man helt enkelt testa sig fram till.
Det finns däremot ett par enkla riktlinjer att fästa sig vid om man känner att man inte har några idéer alls.
En layout med en spalt fungerar bra i de flesta fall. Du styr läsaren att läsa uppifrån och ner, en artikel i taget och kan på så sätt välja vad läsaren ser först. Dessutom förvillar du inte läsaren. Brevet känns mer som ett e-postmeddelande och blir därmed mer personligt. Ett upplägg med många spalter kan lätt bli rörigt i ett e-postklientfönster. Brev som liknar hemsidor vill vi undvika.
Driver du en tidning med annonser, blogginlägg, reportage etc. är det däremot en bra idé att ha två spalter. Du lägger huvudnyheterna på vänster sida och övrigt innehåll på högra sidan. Koncentrera dig gärna på rubrikerna och ha väldigt korta eller inga ingresser så att mottagaren direkt ser så många nyheter som möjligt.
Bredden på ett e-postutskick bör vara högst 600 pixlar brukar man säga. Men runt 500 pixlar är nog mer optimalt med tanke på att många läser sin mejl i förhandsgranskningsläget. Det finns amerikanska studier som visar på att spaltlbredden på texter spelar stor roll för läsbarheten. Skickar du ut information som du vill att läsaren snabbt ska ta till sig, till exempel internutskick i säljorganisationen, använd en spaltbredd på runt 100 tecken per rad. För publika utskick, där tyngden snarare ska ligga på att läsaren uppfattar innehållet på ett trevligt sätt – använd 55 tecken per rad.
Om du har färre än tio artiklar i form av korta nyhetspuffar – använd gärna bilder intill artiklarna. En färgstark bild som kan förknippas med rubriken eller ingressen, lyfter artikeln. Undvik gratisbilder eller clipart-bilder.
Skriv helst inte ”Läs mer” i länken efter varje ingress. Skriv om läs mer-länken till en mening istället. Exempel: Lär dig planera ditt nyhetsbrev här…
Säljer du fysiska produkter? Då vill mottagaren se dem. Undvik textmejl som berättar för mycket. Visa istället och låt produktbilder dominera. I normala fall är det ingen bra idé att inleda ett nyhetsbrev med en stor bild, men i detta fall kan det fungera.
Skickar du personliga brev? Scanna in din signatur och lägg den i brevet.
2. Avregistrering
Med tanke på all den skräppost dina mottagare tar emot dagligen har de flesta förmodligen blivit ganska effektiva på att rapportera misstänksamma brev. För att undvika att ditt brev blir markerat som skräppost hos mottagaren bör du lägga en länk för avregistrering antingen i början av brevet eller så att den syns tydligt. Det kan verka trist för dig som avsändare men du vill hellre att mottagaren avregistrerar sig än markerar dig som spammare. Du riskerar annars i det långa loppet att få dåligt rykte och om du har otur slutar dina brev till slut att nå vissa mottagare.
Det är också viktigt att länken för avregistrering är just en textlänk och inte en bildlänk då de flesta e-postklienter blockerar bilder när de når inkorgen.
3. Text och bild
Spamfilter går igenom textinnehållet i dina brev och letar efter misstänksamma ord. Exempel på misstänksamma ord kan du hitta i din skräppost. Gå igenom skräpposten och kolla vad det är för typ av brev som hamnat där. Något du lär uppmärksamma ganska snabbt är att många ämnesrader där påminner om varandra.
Undvik knallröda texter i dina brev. De används ofta i billiga säljmejl och det finns därför spamfilter som triggas av dessa. Undvik även alltför liten textstorlek. Minsta storlek du kan använda är 10 pixlar.
Balansen mellan text och bild är viktig. Spamfilter kan reagera på om brevet bara innehåller bilder och klassar det då som skräp.
Och till sist, glöm inte att göra en ren textversion av ditt brev när du är klar!
torsdag, 25 februari 2010, 10:52
Många som läser bloggen är intresserade av exempel på nyhetsbrev, så jag tänkte visa ett eget, mer detaljerat sådant.
Jag satte nyligen ihop e-postmallar för ett par olika e-postutskick till Wipcore och tänkte berätta lite om hur jag gick tillväga. Hur jag tänker när jag formger ett e-postutskick för att det ska vara optimalt för e-postklienter och e-postmottagare.
Jag går inte in på hur jag skriver HTML för e-post, det får bli i ett senare inlägg, jag koncentrerar det här inlägget på formen.
Wipcores grafiska profil på webben är enkel och tydlig. De har tre snarlika profiler beroende på vilken produkt de presenterar, där de använder sig av tre olika profilfärger och randiga bakgrunder i grått.
De här tre olika profilerna ska jag använda i respektive e-postutskick så att mottagaren direkt känner igen sig.
Profilerna för e-postutsicken blir så här:
Till skillnad från webben, där vi har flera sidor på oss att presentera alla grafiska element i en profil, har vi i ett e-postutksick ”en enda sida”. Det är viktigt att vara extra tydlig. Men utan att man trycker in alla grafiska element bara för sakens skull. Då blir det lätt rörigt.
Men det är också ganska vanligt att ett typiskt nyhetsbrev kan kännas trist och allmänt, rent utseendemässigt, om man är för försiktig. Det gäller att hitta rätt balans.
I Wipcores brev förstärker jag de tre profilfärgerna genom att lägga bilderna lätt tonade i respektive färg. Det skapar en enhetlig känsla i breven men skiljer dem samtidigt från varandra så att det tydligt framgår att det är olika brev. De två stora breven hade i det här fallet annars blivit för lika varandra.
För att förstärka brevkänslan undviker jag att packa ihop innehållet för mycket. Mycket luft och breda marginalar fungerar bra. Att rama in brevet så att det verkligen blir ett brev och inte en hemsida, fungerar också bra. Ett annat sätt att undvika hemsideutseende är att undvika spalter. Ett brev där innehållet ligger i en enda bred spalt tycker jag i de flesta fall fungerar bäst.
När jag designar innehåll för datorskärmen, vare sig det är hemsidor, webbapplikationer eller e-postutskick brukar jag jobba mot att uppfylla tre krav. Det ska kännas enkelt, kontrastrikt och enhetligt. När jag tycker dessa tre element framgår balanserar och finslipar jag i efterhand genom att antingen tona ner/skala av eller förstärka/bygga på.
Bra design i mina ögon är inte alltid lika med häftig grafik och starka färger och i dagens mediebrus är det allt oftare det enkla som sticker ut.
Börjar man enkelt och sparsmakat med e-postutskicken riskerar de inte att förknippas med allmänna reklamutskick eller spam.
Vad gäller textinnehållet så gör man rätt i att även hålla detta väldigt nedskalat och enkelt. Små, korta textstycken som snabbt tar läsaren vidare till hemsidan är att rekommendera.
En annan anledning att hålla en enkel stil vid just e-postutskick är bildblockering. Dagens e-postklienter har som standardbeteende att blockera bilder. Baserar du hela ditt utskick på tung grafik ser det ganska taskigt ut och uppmuntrar kanske inte mottagaren att ens bry sig om att ladda bilderna. Allt som påminner om tung grafik, flash och animationer förknippar många internetanvändare med en långsammare upplevelse och kan vara en direkt avskräckande faktor.
Wipcores fyra brev blev efter ett par timmars design och HTML-kod så här:
Om du är intresserad av allt kring e-handel, anmäl dig gärna till Wipcores kunskapsbrev på www.wipcore.se.
måndag, 1 februari 2010, 20:14
Jag har bloggat kortfattat tidigare om vad en preheader är för något, men tänkte visa lite fler exempel varför vi bör ha den i åtanke när vi optimerar våra utskick.
Preheader brukar man kalla den textrad som kommer först i ett e-postutskick. De flesta har något slags sidhuvud i sitt utsick med en länk ovanför som säger något i stil med ”klicka här om du inte kan läsa detta mail” eller ”läs webbversionen av detta mail”.
Ett typsikt sidhuvud med länk till webbversion kan se ut så här:
Om en sådan länk är det första du har i ditt utskick, är detta din preheader. Men det är ingen bra preheader. Skjut den här länken åt sidan och gör plats för ett meddelande istället.
Exempel:
Vi säger att vi ska skicka ett e-brev för I love e-mail där vi pratar om etisk e-postmarknadsföring. Det här kan vi enkelt förmedla via ämnesraden. Alla kommer att se detta innan de öppnar mailet. Men vi har även en omfattande del som handlar om preheaders vilket vi inte vill att någon ska gå miste om. Vi vill inte riskera att någon slänger e-brevet för att de tror att det uteslutande handlar om etisk e-postmarknadsföring, om det här nu inte intresserar dem.
Då utnyttjar vi vår preheader. Vi skriver meddelandet ”Lär dig allt om preheaders” helt enkelt.
Preheadern skulle istället kunna se ut så här:
Anledningen till varför vi väljer att göra detta är för att den text som ligger först i ett mail, dvs i preheadern, syns direkt i vissa kända e-postklienter. Vissa e-postklienter förhandsgranskar alltså den första biten på mailet och visar den direkt efter ämnesraden i inkorgen.
Kolla exempelvis på inkorgen i Gmail:
Eller inkorgen på en iPhone:
Väldigt smart, eller hur? Det blir som en extra ämnesrad. Och det här kan vi utnyttja till egentligen vad som helst. Funderar man en stund kommer man säkert på en hel del.
Exempel:
Vi vill göra ett trevligt utsick i formen av ett vykort. Men vi kan helt enkelt inte ha med någon text, utan måste lägga kortet som en enda stor bild.
Hur ser det egentligen ut när mottagaren öppnar mailet. Jo, förmodligen är bilden blockerad, vilket de flesta idag har som standardbeteende i sin e-postklient.
I det här fallet, innan mottagaren har bestämt sig för att ladda ner bilden, har denne ingen aning om vad mailet handlar om. Bortsett från att vi kanske nämner det i ämnesraden. Eller hur?
Men lägger vi dit samma textmeddelande i preheadern, som ligger i bilden, framgår det tydligare vad mottagare kan förvänta sig genom att ladda ner bilden.
Vill vi sedan gardera oss använder vi ett ALT-attribut på bilden, som syns när bilden är blockerad. ALT-attribut fungerar inte i alla e-postklienter men är klart värt att alltid ha med ändå.
Preheadern kan verka vara en betydelselös liten detalj. Men den kan ha avgörande betydelse, och kan användas i flera syften. Det är en viktig detalj som absolut bör få en plats i vårt designtänk oavsett vilken typ av e-postutskick vi gör.
Designonline.se, för att nämna ett verkligt exempel, använder sin preheader som en fortsättning på ämnesraden och informerar om att det just nu är fri frakt vid köp över 499kr. Man ger direkt den intresserade ytterligare en anledning till att handla just nu, förutom de 20-70% rabatt man flaggar med i ämnesraden.
