HTML alapú e-mail sablon elkészítésének szabályai

Szerző: Bundi 2015.09.09. Kreatív 0 Hozzászólás

I. Bevezető

Mindent, amit megtanultál eddig a modern weboldalfejlesztési technológiákról, azt most felejtsd el egy pár percre. Az e-mail kliensek ugyanis csak a legalapvetőbb utasítás készleteket képesek megfelelően értelmezni. A sablon forráskódjának kialakításához éppen ezért előnyösebb egy egyszerű szövegszerkesztő használata, mint az elterjedt WYSIWYG (What You See Is What You Get) típusú HTML szerkesztők (DreamWeaver, Word, stb...). Ezek ugyanis a szerkesztés során teleírják a forráskódot "felesleges" paraméterekkel.

Levelezőprogramok sajátosságai

Az elterjedt levelezőprogramokat 2 fő csoportba bothatjuk: online vagy webes kliensek (Gmail, Yahoo! Mail, Apple Mail, stb...), illetve asztali kliensek (Outlook, ThunderBird, stb...).

Az online levelezők a lehető legkevesebb HTML elemből próbálják megjeleníteni az e-mailt. Ennek oka, hogy a levél forráskódja ne akadhasson össze még véletlenül se a megjelenítő kliens forráskódjával. Ezt többnyire úgy érik el, hogy az e-mail sablonból kiszűrik a <html>, <head> illetve <body> elemeket. Tehát, ha egy stílus formázást teszünk a <body> elemre, az nagy valószínűséggel nem fog érvényre jutni. Bizonyos elemek eltávolítása pedig biztonsági szempontból fontos. A kliensnek mindenképp meg kell előznie azt, hogy a levélben akaratlanul olyan kódrészlet is lefusson, ami kárt okozhat felhasználó számára. Éppen ezért az űrlap elemek és a flash tartalmak is eltávolításra kerülnek.

Az asztali levelezők igen eltérő megjelenést eredményezhetnek, hiszen más motort használnak ehhez. A régebbi Outlook (2003) az Internet Explorer-t hívta segítségül a megjelenítéshez, míg az újabb verziók már a Microsoft Word HTML motorját. Erről viszont az érdemes tudni, hogy gyakorlatilag a 90-es években ismert HTML és CSS utasításokat ismeri csak. A CSS2 és CSS3 lehetőségeit jóformán teljes egészében el is felejthetjük.

II. Általános irányelvek

Mivel igen korlátozottak a formázási lehetőségeink, így törekedjünk a minél egyszerűbb megjelenésre. Ami még mindig a leginkább bevállt módszer a táblázatos elrendezés. Tehát készíts egy táblázatot a fejléc számára, egyet a tartalom számára és még egyet a lábléc számára. Majd ezt a 3 táblázatot tedd bele egy befoglaló táblázatba. Ez utóbbi formázásával lehet majd a sablonnak háttérszínt adni, illetve beállítási a tartalmi táblázatok pozícióját. Az alkalmazott HTML elemek alapértelmezett attribútumait érdemes csak alkalmazni, melyek a border, bgcolor, size, face, valign, align, cellpadding, cellspacing.

Design alapelvek

Méretek

Ahhoz, hogy a levelünk ne essen szét, érdemes minden HTML elemnek megadni a méretét. A befoglaló táblázat szélességét érdemes 98%-ban meghatározni. Azért éppen ennyiben, mert tapasztalatok szerint a Yahoo! Mail-nek kell 1% margó mindkét oldalon ahhoz, hogy jól jelenítse meg az e-mail-t. A tartalmat formázó táblázatok esetén pedig előnyösebb ha fix értékekkel dolgozunk. Kalkuláljuk bele azt is, hogy a használt levelező kliensnek van egy kezelőfelülete is, mely behatárolja a megjelenítási felület méretét. Éppen ezért bevett szokás, hogy maximum 600px szélesnek formázzuk a tartalmi táblázatokat, illetve azoknak a tartalmát. A betűméretek a sablon designjától függően változhatnak, viszont a legelterjedtebb méretek a folyószöveg esetén a 12px, míg a címsorok esetén a 16-20px. Bár nem a mérethez kapcsolódik, de a betűtípusok kiválasztásakor törekedjünk a legelterjedtebb típusok használatára, mint a Times New Roman, Arial, Verdana, Gerogia.

Képek

A képek mindig feldobják a levelek megjelenését, de számolnunk kell azzal a kellemetlenséggel is, hogy a egyes levelezők nem hajnalndóak automatikusan megjeleníteni a képeket. Szerencsére a Gmail kivétel ezalól. Mivel ez a lehetőség fennáll kerüljük a képen ábrázolt kulcsfontosságű üzenet elhelyezését. Minden esetben töltsük ki a kép "alt" attribútumát, mert ha a kép nem is jelenik meg, a helyettesítő szöveg legalább jelezni tudja a kép mondanivalóját. Cég logo esetén például a cég nevét szokták kiírni. A kép elérési útja legyen minden esetben abszolút hivatkozás a kép elérhetőségéhez.

HTML


<img src="http://www.demooldal.hu/images/ceglogo.jpg" alt="Demo Kft." width="60" height="30" />

Érdemes megadni továbbá a kép méreteit is, a pontos megjelenítés érdekében.

Háttérképek alkalmazását pedig mellőznünk kell, mert az Outlook nem jeleníti meg. Ellenben más levelező programok képesek rá. Így ha ragaszkodsz a háttérkép használatához, akkor használj mellé háttérszínt is, melyett CSS helyett HTML attribútumként adj meg (bgcolor="#ff0000"). A kép megjelenítése, helyett ugyanis akkor az fog megjelenni.

Azok a levelek, amik képeket tartalmaznak nagyobb valószínűséggel kerülhetnek spam, vagy promóciós mappába. Így tömeges kiküldés előtt érdemes tesztelni a sablont.

Ha tesztelés során a beillesztett kép körül van egy 1px-es hézag, akkor az általában azért van, mert a HTML kódban a képet befoglaló <td> elem záró eleme egy sorral az <img> elem alatt van. Ennek elkerüléséhez próbálja meg közvetelenül az <img> elem zárása után tenni a záró </td> elemet.

HTML


<td><img src="http://www.demooldal.hu/images/ceglogo.jpg" alt="Demo Kft." width="60" height="30" /></td>

A legtöbb e-mail kliens biztosít a felhasználó számára egy olyan lehetőséget, mellyel engedélyezheti a levél képes tartalmának megjelenítését. Általában ezt a levél megnyitásakor ajánlja fel az olvasónak. Ezzel a beállítással engedélyezheti az olvasó, hogy a tőlünk kapott levelek esetén a képmegjelnítés engedélyezve legyen. Ha biztosra szeretnénk menni érdemes a levélbe belefohalmazni egy felhívást erről.

Csatolja vagy linkelje a képeket?

Ma már a legelfogadottabb, hogy a képeket abszolút hivatkozással szúrjuk be a forráskódba. Ezzel a levél méretét is jelentősen csökkentjük, illevte csökkentjük annak a kockázatát, hogy a levél fennakadjon egy esetleges spam szűrőn.

Kódolási alapelvek

CSS formázás használata

CSS formázásból a következő lehetőségekre vagyunk korlátozva: betűtípus, betűvastagság, betűméret, szín, szélesség, keret, háttérszín, azt is inline stílusban. A külsőleg belinkelt CSS-t egyáltalán nem, a beágyazottat pedig csak hellyel-közzel ismerik fel az e-mail kliensek. Ha már van egy kész, beágyazott CSS utasítás készletünk, akkor a Premailer nevű program segtségével könnyen átalakíthajuk inline formára azt. Itt lehet elérni a programot: http://premailer.dialect.ca/

Táblázatok

Ha szeretnél biztosra menni, mindenképp <table> elemet használj <div> helyett, ugyanis csak ezt kezeli tökéles biztonsággal minden levelező.

A táblázatok esetén mindenképp töltsd ki a cellspacing, cellpaddding, width és border paramétereket. A fő befoglaló táblázat esetén a javsolt szélesség 98%, míg a belső tartalmi táblázatok esetén maximum 600px.

Érdemes kerülni a sor- illetve oszlopösszevonásokat (rowspan, colspan), mert a levelező kliensek eltérő mdon értelmezhetik azokat. Helyettük javasolt inkább további belső táblázatok kialakításával létrehozni a megfelelő formázást. Túlzásba azért ne essünk a táblázatok mélységét illetően.

Távolságok

Míg a Gmail látszólag jól kezeli a padding és margin attribútumok használatát, az Outlook teljes káoszba képes átmenni. Éppen ezért a távolságok meghatározására érdemesebb inkább egy üres tábla cellákat létrehozni.

HTML


<table cellpadding="0" cellspacing="0" width="600" border="0">
	<tr>
		<td width="440" valign="top">[bal oldali hasáb tartalma]</td>
		<td width="20">&nbsp;</td>
		<td width="140" valign="top">[jobb oldali hasáb tartalma]</td>
	</tr>
	<tr>
		<td height="20">&nbsp;</td>
		<td height="20">&nbsp;</td>
		<td height="20">&nbsp;</td>
	</tr>
	<tr>
		<td width="440" valign="top">[bal oldali hasáb tartalma]</td>
		<td width="20">&nbsp;</td>
		<td width="140" valign="top">[jobb oldali hasáb tartalma]</td>
	</tr>
</table>

Pozícionálások

Az abszolút pozíciók meghatározása (style="position:absolute;top:10px), vagy float parancs használata sajnos nem alkalmazható. Helyette érdemesebb a <table>, <td>, <img> HTML elemek egy "align" attribútumot adni. Ha pedig egy cellán belül szeretnénk a szöveget rendezni, akkor használjuk a befogadó cellán inline formában a "text-align" CSS parancsot.

Ha a levél teljes tartalmát szeretnéd középre igazítani, akkor készíts egy 98%-os szélességű, mindent magában foglaló táblázatot, melynek három oszlopa van, de csak a középső oszlop szélességét határozza meg, a bal illetve jobb oldali oszlopokat pedig hagyd üresen.

HTML


<table cellpadding="0" cellspacing="0" border="0" width="98%">
	<tr>
		<td>&nbsp;</td>
		<td width="600">[ide jön a levél tartalma]</td>
		<td>&nbsp;</td>
	</tr>
</table>

Lehetőleg kerüld az úgynevezett "spacer" képek használatát a sortávok meghatározására. A bemutatott példa sokkal célravezetőbb és hatékonyabb.

Elérési útvonalak, hivatkozások

Mind a képek, mind a kimenő linkek esetén kizárólag abszulót hivatkozást érdemes használni. Ellenkező esetben nem garantálható, hogy a link elejét nem egészíti ki automatikusan egy online levelező kilens. Ez esetben pedig ugye nem megfelelő helyre mutatna a link. Linkek esetén érdemes kitölteni a "target" attribútumot is, hogy az online leveleő kliens a link kattintását követőe ne az adott ablakot frissítse, hanem nyisson egy fület a megjelenítéshez.

HTML


<img src="http://www.demooldal.hu/images/ceglogo.jpg" alt="Demo Kft." width="60" height="30" />
<a href="http://www.demooldal.hu/cikk" title="Cikk Címe" target="_blank">Kattintson a cikk elolvasásához!</a>

Média

Szkriptek, flash tatalom, bármely audió- és videó tartalom használata értelmetlen, ezek ugyanis 98%-os valószínűséggel fennakadnak bármely e-mail kliens spamszűrőjén.

Gmail felhasználók esetén a Youtube videó linkjét képes átalakítani beágyazott videóként, ellenben más levelező programok továbbra is csak a linket fogják tudni megjeleníteni.

Azonban van egy HTML 5 trükk beágyazott videó használatára. Azon e-mail kliensekben, melyek támogatják a HTML 5-öt, mint az AppleMail és iPhone kliensek a lejátszható videó jelenik meg. Amelyek viszont nem támogatják ott egy kép fog megjelenni a beágyazott videó helyén.

HTML


<video width="640" height="360" poster="http://www.demooldal.hu/images/helyettesito.jpg" controls="controls">
	<source src="http://www.demooldal.hu/video.mp4" type="video/mp4" />
	<a href="http://www.demooldal.hu/" target="_blank"><img src="http://www.demooldal.hu/images/helyettesito.jpg" width="640" height="360" /></a>
</video>

A helyettesito.jpg kép fog megjelenni (amikor a képek megjelenítését engedélyezi a címzett) az összes HTML5-öt nem támogató kliensen. A HTML5-öt támogató klienseken pedig a lejátszható videó.

A DOCTYPE fontossága

A <html> elem előtt érdemes feklarálni a DOCTYPE-ot. Ez ugyanis a legtöbb e-mail kliens esetén meghatározza a HTML kód értelmezését és megjelenítését. Éppen ezért fontos, hogy a megfelelő DOCTYPE típust használjuk.

HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Egyes levelezők viszont kicserélik a saját DOCTYPE típusukra:

E-mail kliens	DOCTYPE
AOL, Android Gmail Lotus Notes 6.5,7,8 és 8.5 Outlook 2007 és 2010 Thunderbird 2 és 3, Yahoo New	Lecserélik vagy figyelmen kívül hagyják
Android Mail Client Entourage 04 and 08 iPad and iPad Gmail iPhone and iPhone Gmail Live Mail Outlook 2003 Outlook Express Windows Mail	Elfogadják a DOCTYPE deklarációt
Gmail & Hotmail Eltávolítják a DOCTYPE-ot és lecserélik az alábbira: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Yahoo Classic Eltávolítják a DOCTYPE-ot és lecserélik az alábbira: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Mivel a legtöbb e-mail kliens böngésző alapú HTML megjelenítőt használ vagy teljesen böngésző alapú böngészőtől függően más és más dolog történik.

Internet Explorer 8-ban a táblázat paddingjai 0px–esek lesznek.
A center tag, ha definiálva van width szélesség paraméter, többé nem rendez középre.
Internet Explorer-ben az üres blokk elem magassága 19px lesz.
Live Mail-ben minden <img> tag alatt egy kis rés fog látszódni. Ezt helyre lehet hozni ha style="display:block" stílusdefiníció alkalmazásával az img tag-en belül.

Tesztelés és rémület

Érdemes alaposan letesztelni az elkészült e-mail sablont. Első körben próbljuk meg megjeleníteni DOCTYPE deklaráció nélkül az ismertebb böngészőkben, mint a Chrome, Firefox, Safari, Internet Explorer. Ha ezekben minden nagyjából egységes formában jelenik meg a sablon, akkor jó úton járunk. Érdemes leellenőrzni a a W3C HTML validátorával, hogy van-e esetleges kódolási hiba. Amennyiben akad azt mindenképp érdemes javítani.

Ezt követően pedig, érdemes minden ismertebb levelező kliensen megnézni a levelet. Ha betartod az eddig leírtakat feltehetően kevés hibával fogsz találkozni.

Legvégül küldd el a levelet saját magadnak és ellenőrizd le a megjelenést a leggyakoribb webes és asztali kliensekkel. Érdemes először Gmailen és Outlookon megnézni a levelet. Mivel, ha ezeken jól jelenik meg, akkor nagy valószínűséggel a többin is jól fog. Így az esetleges javítandó részekre hamar fény derül.

Leveleinket egyre többen nézik mobiltelefonon is. Az IOS, Android, Windows operációs rendszerű telefonok megjelenése előtt teljes káosz volt ezen a területen. Ezután azonban egyre inkább külön területként kell kezelni a mobiltelefonos klienseket. Az egyik legfontosabb szabály az eddig említettek betartásán túl, hogy ezen telefonok kijelzőinek szélessége 320px – 480px között van általában. Ha a leveled nem szélesebb 600px-nél, akkor valószínű még olvasható lesz ezeken az eszközökön is lekicsinytve.

Leiratkozás lehetőségének biztosítása

Ma már jogszabály írja elő, hogy az olvasónak lehetőség legyen a hírlevélről leiratkozni. Ehhez biztosítanunk kell a levél tartalmában, szokás szerint a lábléc környékén egy leiratkozás linkre. Ezt többnyire úgy oldják meg, hogy a címzett azonosítója, vagy e-mail címe át van alakítva egy titkosított karakterláncnak és azt hellyezik el a linkben. Majd a linkelt weboldal adott része ezt felismeri és megfelő módon lekezeli azt.

HTML


<a href="http://www.demooldal.hu/leiratkozas.php?user=fc2a9e8f88fd3e32bfa7a0f1e393f796" target="_blank">Leiratkozás</a>

Az ehhez tartozó jogszabályokat és azoknak módosításait érdemes mindig nyomonkövetni itt: http://net.jogtar.hu/jr/gen/hjegy_doc.cgi?docid=A1100112.TV
Ez a bejegyzés Mail Master Tudásbázis anyagának nyomán készült el.

Leírásaink azon kezdő és haladó programozóknak nyújtanak segítséget, akik már minimális szinten foglalkoztak weboldalkészítéssel. Ha szeretnél jobban elmélyülni a témában, vagy elsajátítani alapokat, még tovább fejlődni, akkor nézz körbe tanfolyam kínálatunkban, ahol a kezdőtől a profi szintig nyújtunk képzéseket a számodra.