CSS 3 i e-post – fungerar det?

Många designers önskar att e-post kunde vara lite mer som vanliga webbsidor. Det finns så mycket man kan göra på en webbplats – och i jämförelse är allt enklare. Det finns färre klienter att anpassa sig till och möjligheterna att skapa spännande och dynamisk design är större.

Det är helt klart att e-post erbjuder en större utmaning för en designer. Men det är viktigt att komma ihåg att webbsidor och nyhetsbrev har olika funktioner. Nyhetsbrevet ska locka till vidare läsning, men behöver kanske inte innehålla alla funktioner som en webbplats har.

Med det sagt: visst vore det trevligt med större flexibilitet även för oss som arbetar med nyhetsbrev – men vi ska också vara medvetna om att de möjligheter som finns idag räcker mycket långt om vi använder dem rätt.

Ett bra sätt att skapa webbsidor på är CSS (Cascading Style Sheets). Nu sjösätts den senaste versionen, CSS 3. Vad betyder det för oss som arbetar med nyhetsbrev?


Möjligheter med CSS 3
CSS kallas ofta stilmall på svenska. Det är ett sätt att beskriva olika designelement i ett dokument som exempelvis typsnitt, textstorlek eller färg. Tekniken är ett sätt att anpassa dokumentet med hänsyn till datortyp, skärmupplösning, färgdjup och installerade typsnitt.

Poängen är att man skapar ett utseende – eller en stilmall – som sedan kan återanvändas på flera dokument med olika innehåll.

CSS 3 är en utveckling av CSS som kommer att ge designern ännu mer flexibilitet i sitt arbete och möjligheten att välja ännu fler grafiska element, som genomskinlig text eller skuggad text.

Mycket av det som blir möjligt med CSS 3 har tidigare krävt att man infogat en bild – något som kräver mer arbete för att fungera bra.


Resultat i e-postläsare
Men hur fungerar det i e-post? Tyvärr måste vi nog säga att stödet för CSS 3 är svagt i de flesta e-postläsare. Men det är egentligen ingen större överraskning, då grundstödet för CSS också är tveksamt.

Här är några bilder som visar hur det fungerar!

Så här ser det ut i en helt CSS3-kompatibel webbläsare eller e-postklient. En svart box med orange ram med rundade hörn och en skugga.
Här visas en webbläsare eller e-postklient som inte kan hantera CSS3 korrekt (t.ex. alla versioner av Internet Explorer och Outlook). Boxen ser fortfarande OK ut, men inte lika spektakulär.
I en helt CSS3-kompatibel webbläsare eller epostklient ser allt bra ut. Här är en bakgrundsbild med rundade hörn och en text ovanpå med en mörk skugga för att förbättra läsbarheten.
I en webbläsare eller e-postklient som inte kan hantera CSS3 blir det inte lika bra. Här visas vanliga raka hörn och skuggan på texten har försvunnit, så att det gröna i bilden flyter ihop med texten.
Så här blir resultatet i e-postklienter som varken kan hantera CSS3 eller bakgrundsbilder (t.ex. Outlook 2007 & 2010).

Några få saker fungerar i alla klienter – annars är stödet störst i Apple Mail och den mobila versionen som finns i iPhone. Det är tydligt att man som designer inte kan lita på att CSS 3 ska fungera i ett bredare spektrum av e-postklienter.

Alternativa lösningar
I e-post fungerar CSS 3 bäst för dekorativa ändamål, som att lägga en skugga eller för att göra knappar som annars skulle göras med hjälp av bilder.
Det mest logiska är därför att använda bilder om du är osäker. Om du vill använda CSS 3 till text, se till att den är läsbar även om inte den effekt du ville ha fungerar.

Slutsatser
• Prova gärna med CSS och även CSS 3 – men prova på ”säkra” ställen. Se till att texten syns även om allt annat skulle försvinna eller blockeras.
• Håll designen enkel – nyhetsbrevets uppgift är ofta att dra besökare till en webbplats. När dina besökare har kommit till webbplatsen kan du ha en mer avancerad design.
• Om du har speciella önskemål om design på dina nyhetsbrev, tala gärna med vår produktionsavdelning.

Dela med dig på:

Facebook

Twitter