Alla inlägg i kategorin ‘Design’
onsdag, 25 augusti 2010, 18:47
Jag gillar när det är enkelt och stilrent. Filippa K:s brev som jag fick idag är just detta. Men jag tycker att brevet tappar lite på de tekniska bitarna. Framförallt tror jag att de går miste om klick och får inte riktigt till den effekt som de kunde ha fått om de optimerat vissa delar.
De länkar exempelvis till video i brevet, men det framgår väldigt otydligt. Det ligger nästan osynligt som en vanlig textlänk. Jag själv missade den när jag skummade igenom brevet. Jag läser nämligen inte texterna, utan kollar bara på bilderna. Det är väl lite tanken också att man ska göra eftersom bilderna är det som är utmärkande och produkterna man marknadsför är kläder och sinnesintryck.

Sarah och jag plöjde intensivt igenom allt vi kunde hitta om video i e-post en period när vi jobbade med just detta. Hur man bör göra på bästa sätt. Och hur man lockar till fler klick. Ni kan se resultatet i Sarahs artikel här eller se Sarah demonstrera detta på film här.
Sen är det då det här med preheaders som både Sarah och jag ofta nämner. Man utnyttjar inte toppen på brevet när det finns så mycket yta över att jobba med:

Den här ytan blir speciellt trist när man öppnar upp brevet med bildblockering:

Titta gärna på artikeln här hur man kan förbättra toppen på ett nyhetsbrev när man måste använda stora bilder.
Det jag tycker Fillippa K gör väldigt bra däremot är att synka utskicket med hemsidan. Nyhetsbrevet driver en aktuell kampanj/period istället för att leva ett eget liv.
Så här ser hemsidan ut idag – precis som nyhetsbrevet:

Jag ger Filippa K 3 hjärtan av 5 möjliga.

söndag, 22 augusti 2010, 15:11
The Email Marketer’s Club är en internationell samlingsplats och diskussionsforum för e-postmarknadsförare. Jag tyckte det var värt att kolla upp så jag anmälde mig helt enkelt. Både som nyhetsbrevsprenumerant och forummedlem.
Det är tydligt att de har lagt tid på att göra anmälningsprocessen så enkel som möjligt. Allra högst upp till vänster, det första man ser, är just en anmälningsruta för nyhetsbrev i sin enklaste form (resterande personuppgifter fyller man i vid ett senare tillfälle):

Att uppmana prenumeranten, som man gör här, att direkt gå till inkorgen efter en anmälan kan vara avgörande för om prenumeranten hamnar på listan eller inte:

Får man inte prenumeranten att gå direkt till inkorgen och leta efter bekräftelsemailet för anmälan går denne förmodligen förlorad om mailet hamnar i skräpposten, vilket det gjorde i mitt fall:

The Email marketer’s Club är extra tydliga på den här punkten. Anmäler man sig som forummedlem och anger en Gmail-adress, känner processen av detta och uppmanar en att gå till just Gmail.com:

Små detaljer kan vara avgörande.
söndag, 15 augusti 2010, 21:42
Microsofts senaste uppdatering av Windows Live Hotmail ställer till det för många då den vanligaste metoden för att ange bakgrundsfärger i e-post slutat fungera.
Ni som har en bakgrundsfärg i era nyhetsbrev och tycker det är viktigt att det ser bra ut, kika gärna på brevet i Hotmail.
Har ni problem med detta och tycker att det ser tråkigt ut, be någon kodkunnig att fixa med hjälp av Campaign Monitors guide.
Kan ingen hjälpa, kan ni maila mig.
tisdag, 6 juli 2010, 03:09
En av de senaste trenderna inom webbdesign är något man kallar dynamisk eller responsiv design.
Responsiv webbdesign går ut på att få innehållet att anpassa sig efter bredden på webbläsarfönstret. Med denna designlösning spelar det ingen roll om användaren har en smartphone, en liten netbook eller en stor stationär datorskärm. Webbsidan anpassar sig – i realtid.
Ett snyggt exempel är colly.com. Prova att minska bredden på webbläsarfönstret. Sidan ”bygger om sig” i realtid från 4 spalter, till 2 spalter, till 1 spalt.

Kan vi då inte använda det här för nyhetsbrev?
Jo visst kan vi det!
Det eviga tjatet om anpassning efter smala förhandsgranskningsfönster, mobila klienter och alla hundratals olika e-postklienter kan vi lägga på hyllan.
Vi låter breven anpassa sig efter bredden på e-postfönstret istället.
Med ett enkelt test får jag följande resultat:
I Gmail anpassar sig bredden på mitt dynamiska testmail automatiskt till 556 pixlar. Alldeles lagom.

I e-postklienter med smala vertikala förhandsgranskningsfönster, Microsoft Outlook till exempel, drar brevet ihop sig och anpassar sig till den smala bredden.

I e-postklienter med breda, horisontella förhandsgranskningsfönster blir brevet ganska utdraget. Inte riktigt lika snyggt, men det duger.

Och öppnar jag upp brevet i ett separat fönster, anpassar det sig till fönstret såklart. Snyggt!

På en smartphone, precis som i Outlook, drar brevet ihop sig och blir riktigt smalt. Perfekt!

Det här är gammal teknik som fler borde prova, det är som gjort för nyhetsbrev.
Vill du ha HTML-koden för min dynamiska testmall att bygga vidare på finns den att ladda ner i vårt första e-brev som dyker upp nästa månad. Koden är skriven och anpassad för e-postklienter.
Med vårt e-brev kommer även ett par andra hjälpsamma dokument som Sarah och jag har satt ihop. Anmäl dig till vårt e-brev.
Behöver du hjälp med dynamiska e-postmallar i ditt e-postverktyg, eller e-postmallar överhuvudtaget, kan du kontakta mig: christopher@iloveemail.se.
onsdag, 16 juni 2010, 12:00
Campaign Monitors guider till mobil e-postdesign blir fler och fler och är riktigt bra.
Här är ytterligare en.
Intressant är att dagens smartphones, iPad och andra kommande pekskärmsdatorer har de mest avancerade e-postklienterna (vad avser stöd för webbinnehåll) med stöd för både HTML5 och CSS 3. Detta banar väg för mer avancerade utskick och integrationer med webben och sociala medier.
E-postklienterna på datamaskinen, som norrmännen kallar den, är långt efter.
Jag tror inte det finns någon marknad för skrivbordsklienter om ett par år. För en del företagsanvändare såklart, men inte för hemanvändare. Vi konsumenter kommer att läsa e-post och nya medier på mobila enheter med pekskärm.

tisdag, 8 juni 2010, 00:05
Den här artikeln på Style Campaign visar 11 exempel på smala nyhetsbrev. Det enklaste sättet att anpassa ett nyhetsbrev för mobila klienter och små förhandsgranskningvyer.
Snyggast och smartast lösning tycker jag AIDA har. De fyller ut de tomma ytorna på kanterna, som blir på en dator, med hjälp av en bakgrundsbild.

onsdag, 26 maj 2010, 09:55
Jag tänker jämföra två nyhetsbrev. Det ena nyhetsbrevet kommer från svenska Loopia och det andra från amerikanska The eMail Guide.
Nyhetsbreven är ungefär lika långa och har liknande syften. Breven är innehållsrika och levererar många tips och ideer kring vad företagen kan bäst. Loopia är Sveriges främsta leverantör av webbhotel och domännamn och The eMail Guide vill gärna vara främst på e-postmarknadsföring. Loopia har fått utmärkelsen ”Sveriges bästa webbhotel” och the eMail Guide liknar sig själva vid ninjor på e-post.
Som det tydligt framgår här nedan är breven väldigt långa. Så långa att jag fått klippa dem i tre delar och lägga upp dem i spalter för att visa.
Loopia

The eMail Guide

Hur har de då löst det här med att presentera mycket innehåll i ett litet e-postfönster?
Om vi kollar på Loopias brev så bygger det på en enda lång spalt. Brevet är smalt, 550 pixlar, och det finns inget som distraherar i toppen förutom en annons som ligger till höger. Och de har en tydlig innehållsförtecking över hela brevet.

Brevet från The eMail Guide är väldigt likt i upplägg, fast 100 pixlar bredare. Det bygger också på en spalt och det ligger en annons på samma ställe som i Loopias brev. Men det saknar innehållsförtecking. Dessutom har man ett siduvud uppdelat i flera block som innehåller länkar och slogans.

Jag tycker det Loopia gör är bra. Innehållsföreteckning är ett måste om man ska skicka så här mycket i ett mail. Nyhetsbrevet skickas lagom ofta och med bra tips. Designen är enkel och stilren, typsikt nordisk. Det finns inte mycket mer att påpeka.
Tre hjärtan får Loopia:

Ninjorna däremot lägger fälleben på sig själva. De förlitar sig på att jag ska scrolla igenom hela brevet för att skaffa mig en uppfattning om vad de levererar. De har förmågan att leverera mycket och ofta, men är dåliga på att strukturera. Speciellt sidhuvudet känns rörigt.
Två hjärtan får The eMail Guide:

tisdag, 25 maj 2010, 09:13
Hittade det här nyhetsbrevet som jag tyckte var bra.

Det är inte bara ett stilfullt brev med noga utvalda färger som matchar utan det är också väldigt tydligt brev. Färgerna signalerar var man ska titta någonstans i brevet, tydliga ”call-to-actions”. De har också varit tydlig med länkarna längst upp till hemsidan, bloggen, twittret och till ”Hjälp” – vilket är ovanligt. Under ”Myster Shopper” presentationen på ”Nordic E-Commerce Summit” så fick vi se tydliga siffror på hur dåliga vi är i Sverige på att låta kunder kontakta oss och få hjälp. Klickar du på ”Help” uppe i detta brevet kommer du till en otroligt avancerad sida där du enkelt kan söka på ditt problem. De har verkligen lagt tid på att förklara alla scenarior.
Längst ner i brevet är det en stor lila knapp för att ladda ner Alfred och det kommer efter att det berätta vad du behöver veta samt vad som kommer i framtiden.
Tänk på att detta brev innehåller bara värde eftersom det är ett uppföljningsmail till dem som redan har Alfred. Brevet hjälper mottagaren när de ska uppdatera Alfred. Så… syftet är helt rätt och man har lagt ner tid på att göra ett riktigt bra brev till dem som redan är kunder. Det ni!
Det enda som jag tycker det hade kunnat tänka på är att skaffa en pre-header och göra brevhuvudet en aningen mindre så att mottagare snabbt fastnar i texten nedtill utan att behöva scrolla… men det är petitesser. Jag ger detta brevet 4 hjärtan av 5 möjliga!

Snälla, snälla, snälla, snälla ge mig tips på bra nordiska nyhetsbrev, vet att ni finns där ute men jag hittar er inte…
torsdag, 29 april 2010, 21:33
Det trevliga nyhetsbrevet från panic som jag postade igår ser ut så här i Microsoft Outlook 2010:
(klicka för att förstora bilden)

Det här är säkerligen dem på Panic medvetna om, men de bryr sig inte. Panics brev bygger på avancerad CSS-kod och är lite av en uppvisning på vad man kan ådstakomma i en e-postklient med stöd för moderna webbstandarder (exempelvis Apple Mail). Det finns en omfattande genomgång av deras experiment på Campaign Monitors blogg för den som är intresserad av e-postdesign:
What you can learn from Panic’s approach to email marketing
Windows-användare är dessutom inte Panics målgrupp.
Anledningen till att det ser hopplöst ut i Outlook 2010 är att e-postklienten, precis som sin föregångare Outlook 2007, inte renderar (ritar upp) mail med en webbläsarmotor. Man utnyttjar tekniken som ordbehandlaren Word använder.
Trist att Microsoft har valt att gå vidare med denna lösning, det finns inget att göra åt saken mer än att klicka på webbversionlänken och läsa nyhetsbrevet i webbläsaren istället.
Det är betaversionen av Outlook 2010 jag testar för tillfället, och jag tycker den nya versionen för övrigt är stökig. Det är ganska friskt pyntat med rattar, spakar, knappar och rullistor i nya Outlook (jag har inte gjort några inställningar eller anpassningar).
Exempelvis förstår jag inte varför man väljer att visa fyra stycken ”inbox” i vänstra sidopanelen. Det är på sätt och vis en och samma inbox, jag förstår detta, men långt ifrån alla kommer att förstå varför de får flera inboxar på en och samma e-postadress. Jag tycker inte det är en snygg lösning. Det här är dessutom den enklare hem- och kontorsversionen av Outlook 2010. Det är idiotiskt.
Varför vill man inte göra det enkelt för användaren?

onsdag, 28 april 2010, 16:19
Lite nördvarning på mig nu kanske, med alla små exempel på ”appar” och Mac-verktyg. Men det är inte bara verktyget som gör att jag gillar det här nyhetsbrevet utan sättet det är gjort på. Hur företaget marknadsför nya produkter utan att verka billiga eller ”säljiga”.
Produktnyheten kommer i form av ett personligt brev i berättande form, med en av företagsgrundarna som avsändare. Utformat som ett traditionellt brev med en personlig underskrift och företagsstämpel. Det är också stilrent och snyggt utformat.


Och sen den lilla detaljen längst ner som jag speciellt gillar. En liten ikon i form av en varningsskylt som tydligt markerar att jag kan avregistrera mig om jag vill och förklarar hur jag hamnat på utskickslistan för detta brev.
Det här är ett typiskt utskick från Panic. De är väldigt personliga och ärliga i allt de gör, vilket ger ett seriöst intryck.
Fem hjärtan!
