Designguide för e-post - Apsis

6.0
Anpassa brevet efter olika
e-postklienter
Det finns många e-postklienter på marknaden och det
finns inte två klienter som tolkar e-post på samma
sätt. Det går trots detta alldeles utmärkt att jobba
med nyhetsbrev och få dem att se bra ut hos de flesta
e-postklienter. I det här kapitlet kommer du att lära dig
hur du bygger e-post som fungerar.
Ett sätt att lära sig att anpassa sina nyhetsbrev till olika klienter är
att ha en lång lista med e-postklient efter e-postklient, och för var
och en ange problemområden och möjliga lösningar. Men ett bättre
sätt är att lära sig hur man gör för att bygga ett nyhetsbrev som
fungerar bra överallt. Vi koncentrerar oss därför på det som krävs
för att skapa ett sådant nyhetsbrev. Det här kapitlet är en aning
tekniskt med kodexempel för att visa hur man verkligen gör.
Gammal teknik fungerar bäst
Du som är van att jobba med XHTML och CSS kommer troligvis
att bli lite besviken när du börjar jobba med design av e-post. Det
är lite som att förflytta sig tio år bakåt i tiden. Det som gäller för
nyhetsbrev är gammal HTML med taggar som och .
Modern HTML med och CSS-layout fungerar helt enkelt inte
särskilt bra i de flesta fall.
CSS i nyhetsbrev
CSS – som är väldigt tidsbesparande och ger enkel och ren
HTML-kod – har väldigt dåligt stöd i de flesta e-postklienter. CSSpositionering,
klasser och ID:n är helt uteslutet. Däremot kan du
styra typsnitt, färger och liknande. Men ska du använda CSS är det
inline-CSS som gäller. Alltså: du hårdkodar varje font-tagg så här:
Lorem ipsum dolor sit amet...
Vill du trots allt styra vissa detaljer i hela brevet med CSS ska du
placera din CSS-kod innanför även om detta egentligen
är fel. Vissa klienter klipper nämligen bort den kod som ligger
innanför där vi normalt sett har vår CSS.
HTML i nyhetsbrev
Tabellstrukturen måste vara väldigt enkel för att fungera i alla
tänkbara e-postklienter, du ska helst inte ha för många rader och
kolumner. Försök hålla nere antalet colspan i dina tabeller och
undvik rowspan helt och hållet.
Tabellattributet cellspacing fungerar inte heller överallt, det är
därför säkrast att utesluta detta också.
Vill du ha marginaler och mellanrum som fungerar i alla
e-postklienter görs det enklast med små gif-bilder. Du använder
en gif-bild som är 1 x 1 pixlar stor, i en tabellcell, och drar ut den så
många pixlar som marginalen ska vara.
Exempel med 10 pixlar marginal på båda sidor om ett stycke text:
Här kommer innehåll...
Det hjälper att vara övertydlig. Skriv ut bredd på alla tabeller
och tabellceller, framförallt om du jobbar med en design där du
är tvungen att ha tabeller i tabeller. Måtten för bilder är också
viktiga, både höjd och bredd bör vara angivna på samtliga bilder.
Framförallt Lotus Notes har problem med bilder där mått saknas.
Har du glömt höjden kan det till exempel hända att bilden antingen
bara blir en pixel hög eller lika hög som bilden är bred. Jobbar du i
ett system där du inte behöver koda själv men ändå har möjlighet
att fylla i mått för bilder, se till att de alltid är ifyllda även här.
I vissa fall kan det uppstå en oönskad marginal, eller ett litet glapp,
28 29