MailEasy bloggar

När det kommer till den visuella delen av er brevmall listas nedan ett par rekommendationer att ha i åtanke liksom ett antal riktlinjer som bör följas.

Tänk enkelt
Ett nyhetsbrev är och fungerar inte som en webbplats, alltså bör inte heller designen se likadan ut. Anledningen är dels att ett nyhetsbrev bör vara kort och koncist, det ska först och främst göra mottagaren intresserad och leda vidare, då kan också värdefull statistik erhållas. Dessutom finns det, i tidigare inlägg omnämnda, tekniska begränsningar vad gäller inläsningen av e-post i diverse klienter (fasta likväl som webbaserade). De fungerar inte på samma sätt som en webbläsare för en webbsida.

Undvik helst detta
Kort sagt finns det vissa designgrepp som bör undvikas när det kommer till nyhetsbrev. Vi har gått igenom ett par av den redan, men vi tar det igen.

• Bakgrundsbilder (Bilden läses inte in och lämnar ett vitt fält som inte kan påverkas.)
• Rörlig media (Flash-filer eller GIF-animationer är inte att rekommendera eftersom de inte läsas in och också kan försvåra framkomligheten.)
• Formulär (De innehåller oftast PHP-kod för att hämta eller skicka information mellan databaser, vilket inte godkänns av e-postklienter.)
• Bredd över 660 pixlar (Det blir problem för mottagare att se hela brevet utan att scrolla i sidled om brevet är för brett.)
• Grafik som bygger på höjden av brevets ytterkanter. (Dessa ger en låst höjd som inte kan upprepas dynamiskt efter brevets längd. Detta på grund av begränsat HTML-stöd i flertalet e-postklienter.) Undantagsfallet för detta är enfärgade ramar som fungerar utan problem. Ramar så som skuggeffekter och andra grafiska element är alltså inte att rekommendera.
• Överlappande grafiska objekt (Att lägga olika objekt på varandra för att skapa djup). Denna effekt kan endast åstadkommas genom att layouten gjorts utanför MailEasy och läggs in som en låst bild.

Runda hörn
Det är vanligt att önska rundade hörn i sin layout. Detta för att få en mindre stel och kantig känsla. Då e-postklienter inte godkänner rundning av hörn genom CSS, vilket fungerar på webbsidor, kommer en förklaring om hur ni kan gå tillväga nedan:

Det behövs två till tre vertikala rader (celler) i en tabell. Se bilden nedan samt beskrivande text under.

I den övre raden läggs toppbilden som har rundade överkanter. Bilden är skapad i ett bildredigeringsprogram där denna effekt lagts till. Den läggs alltså in i MailEasy som en färdig bild.

Den mellersta raden är en tom cell med aktuell bakgrundsfärg, vilket görs inne i MailEasy (det vill säga genom HTML). Där ställer ni in de cellegenskaper innehållet ska ha. Det kan gälla text likväl som en bild (logotyp eller liknande).

En nedre, tredje rad behövs om ni även önskar en rundad nederkant. Det kräver en en färdig bild där nederkanterna är rundade.

Detta kan antingen användas för en separat kolumn i brevet för särskilda nyheter eller för hela nyhetsbrevets topp och botten.

Sammanfattning
Väl utformade layouter för e-postutskick ska inte ha objekt som låser höjden på brevet. Det som fungerar är enfärgade kantlinjer som ger en dynamisk layout – den kan ökas eller minskas i höjd beroende på innehåll. Använd ej heller bakgrundsbilder som utgångspunkt för layouten. Att använda sig av rundade hörn och kantlinjer är ej heller att rekommendera eftersom rundade hörn inte kan skapas genom CSS för e-postutskick utan måste läggas in via färdiga bilder i topp och botten. Undvik att arbeta med CSS för stilmallar och positionering, gå tillbaka till att styra stilen med HTML.

Det vi gått igenom ovan är riktlinjer och rekommendationer. De kanske inte passar in perfekt på den layout ni funderar på för ert nyhetsbrev. Ni är alltid välkomna att kontakta vår support för råd och tips gällande er layout, hur den kan anpassas och utvecklas för olika e-postklienter.

Stort lycka till!
/MailEasy

Detta är sista delen av tre om hur ni skapar brevmallar för e-postutskick.

Om vårt förra inlägg handlade om utformningens DO’s är detta tillägnad DONT’s. Sådant ni bör undvika att få in i era nyhetsbrevsmallar.

Undvik helst detta
Ni bör inte lägga in bakgrundsbilder i era mallar. Detta eftersom de flesta e-postklienter, exempelvis Gmail, inte läser in dessa utan lämnar bakgrunden vit och tom. Läggs en bakgrundsbild in som bakgrund går det heller inte att ange en bakgrundsfärg bakom denna bild som ersättning om bakgrundsbilden inte läses in, bakgrunden blir helt vit. Måste ni ändå använda bakgrundsbilder undvik då att skriva vit text ovanpå eftersom denna då blir osynlig gentemot den vita bakgrunden om bakgrundsbilden inte läses in vid utskick.

Att använda sig av bilder/fotografier anpassade för tryck vid e-postutskick ökar endast storleken på utskicket och därmed också risken att klassas som skräppost av olika filter. Hur ni anpassar bilder för webben kan ni läsa mer om i ett separat blogginlägg här.

Är er design skapad utanför MailEasy och läggs in som en färdig bild rekommenderar vi er att dela upp bilden i flera mindre delar och lägga in. Det är dock ingen optimal utformning för e-postutskick och risken för framkomlighetsproblem kan öka. Optimalt för HTML-utskick är alltså att blanda text med mindre bilder i en tabellstruktur. Sådana utskick anses mer seriösa av spamfilter.

”Osynliga bråkmakare”
Formaterad text
Lägger ni in text från en extern källa så som Microsoft Word är det extremt viktigt att se till att denna text är oformaterad när den läggs in i er mall. Det enkla och säkra sättet att säkerställa detta är att mellanlanda (klistra in och klippa ut) i programmet ”Anteckningar” (på PC) eller ”Textredigeraren” (på Mac). Programmet tar bort samtliga formateringar och på så sätt får texten i mallen endast de formateringar ni ställt in i cellernas formateringar. Glöms detta bort kan brevet smittas ner av de formateringar texten hade i Microsoft Word och utskickets utseende kan variera mellan e-postklienter. Det är också viktigt att känna till att sådana formateringar inte försvinner automatiskt när den formaterade texten raderas utan ligger inne i brevets källkod och måste rensas ut manuellt. Sådant arbete kan vår support hjälpa med om olyckan varit framme.

UTF-8
Detta är en teckenkodning som ofta används på webbsidor. Den stödjer inte ÅÄÖ eller andra specialtecken som då måste ersättas med ”HTML Entity Names” så som Ä istället för Ä, exempelvis. Denna teckenkodning följer dock med texten in i nyhetsbrevet och kan medföra att ÅÄÖ försvinner vid utskick. Det som då måste göras är att ersätta UTF-8 med ISO-8859-1. Behöver ni hjälp med detta kan ni höra av er till vår support. Ni undviker dock detta genom att se till att texten är oformaterad när den läggs in i MailEasy, på samma sätt som under ”Formaterad text” ovan.

Skype
Vi rekommenderar att ni loggar ut från/stänger av programmet Skype när ni är inne och arbetar i MailEasy. Detta på grund av att Skype lägger in injektioner av kod i brevens källkod (likt ett virus) vilket kan påverka brevens utseende men framför allt framkomligheten.

I nästa inlägg tar vi upp riktlinjer för en brevmalls visuella form.

Som ny kund hos MailEasy ingår ofta en mall för brevutskick vilken vår designavdelning skapar utifrån grafisk profil och testar innan den levereras.

I de fall våra kunder på egen hand eller med hjälp av en reklambyrå utformar egna mallar finns det en rad punkter att gå igenom och fundera på.

Att skapa en mall optimerad för e-post och så många klienter som möjligt kräver kunskap och förståelse för mediet. Dessutom handlar det som med all visuell kommunikation om att få fram sitt budskap och varumärke.

Vi går nedan igenom dels de tekniska aspekter som påverkar skapandet av en brevmall men också vissa riktlinjer gällande den visuella formen.

Källkod
Ber ni en reklambyrå eller annan webbprogrammeringskunnig person skapa er mall är det inte ovanligt att de skapar den utanför MailEasy, i någon slags program för webbpublicering (exempelvis Adobe Dreamweaver). Det är då viktigt att påpeka att ett e-postutskick varken fungerar eller beter sig på samma sätt som en webbsida. Ni får tänka er ett antal år tillbaka i utvecklingen där HTML styrde även det som gemene man idag använder CSS för.

Vissa förespråkar inline CSS (det vill säga att CSS-kod skrivs in i head-taggen som ett style-attribut istället för att länkas till i ett separat dokument). Det fungerar i viss utsträckning men kräver dock en del testande gentemot olika e-postklienter för att garantera att nyhetsbrevets layout bibehålls vid utskick. Istället förespråkar vi i dagsläget att i så stor utsträckning som möjligt hålla sig till att styra också stilen på innehållet genom HTML.

MailEasy är byggt för att icke HTML- och CSS-kunniga på ett enkelt sätt ska kunna skapa e-postoptimerade brevmallar genom vårt CMS-system. Tvärtom mot vad riktlinjer för webbdesign menar ska e-postutskick fortfarande byggas upp av tabellstrukturer och celler som sedan ges specifika egenskaper för innehållet.

Bredd och höjd
Tänk på att inte göra er brevmall för bred. Vi rekommenderar en bredd på 600-660 pixlar. Detta beror på att e-postklienter som visar en förhandsgranskning av brevet (exempelvis Microsoft Outlook) ska kunna visa hela brevet utan att mottagaren ska behöva scrolla i sidled. Gällande höjd är det en fördel att ange att höjden justeras efter innehållet. Det vill säga att brevets höjd anpassas efter om innehåll läggs till eller tas bort mellan utskicken.
Formatera tabeller och celler korrekt
Arbetar ni med tabellstrukturer i er mall måste samtliga tabeller och celler formateras via tabell- och cellegenskaper för att marginaler, teckenformatering och bakgrundsfärger med mera ska visas korrekt vid utskick. Mer om detta i vår övergripande manual för MailEasy som finns att ladda ner under ”Kundservice” på vår hemsida.
GLÖM INTE
Glöm inte att lägga in en tydlig länk för avanmälning. Avanmälningslänken är viktig, dels för att den minskar risken att klassas som spam och dels för att det förhindrar upprörda mottagare som mot sin vilja inte kan avanmäla sig. Görs utskick utan en sådan länk inlagd lägger MailEasy automatiskt in en avanmälningslänk, oformaterad, eftersom det enligt lag måste finnas möjlighet att avanmäla sig från nyhetsbrev. Vill ni kunna formatera denna länk som ni själva önskar rekommenderar vi er alltså att länka passande text/bild till: @@unsubscribe. Märk väl att inget http://-prefix ska anges på avanmälningslänken då detta är en intern tagg i systemet.

En länk för webbversion av brevet kan vara en god idé att infoga med tanke på att vissa sitter med e-postklienter som inte kan visa HTML-kodade brev korrekt. Genom att klicka på en sådan länk öppnas då istället ett webbläsarfönster hos mottagaren där nyhetsbrevet visas. För denna funktion länkar ni texten/bilden till: @@page. Märk väl att inget http://-prefix ska anges på avanmälningslänken då detta är en intern tagg i systemet.

Testskicka
Glöm heller aldrig bort att testskicka er nya mall till olika e-postklienter. En riktlinje är att åtminstone skicka testutskicken till en fast klient (så som Microsoft Outlook/Mac Mail) och till en webbklient (så som Gmail/Hotmail) för att se om layouten skiljer sig åt.

I nästa inlägg fokuserar vi på vad som bör undvikas i er design på grund av begränsningar i e-postklienter.