A web fejlődik, a szabványok fejlődnek, a böngészők fejlődnek. A levelezőprogramok is fejlődnek, azonban HTML értelmezési képességük leragadt valahol a 3.2 szabvány környékén. Mit tehetünk annak érdekében, hogy hírlevelünk egyformán nézzen ki mindenféle levelezőprogramban? Erre próbálunk megoldást keresni az alábbi írásban.

Először is felejtsünk el mindent amit a CSS-ről, öröklésről, szeparált megjelenésről tudunk. A levelezőprogramok többsége figyelmen kívül hagyja a külső CSS deklarációkat, de még a hard-coded megoldásokból sem vesznek be mindent. Emiatt célszerű a korábbi szabványok ajánlásait használni a hírlevél készítése során.

Milyen egy jó hírlevél?

Technikai szempontból az alábbiakat érdemes betartani:

  • táblázatos felépítés
  • nem túl nagy méret, max. 2-300Kbyte
  • max. 600px széles
  • a szöveges és képes tartalom megfelelő arányú
  • nem tartalmaz JavaScript-et és/vagy FORM-ot
  • a szerkesztéshez ne használjunk WYSIWYG szerkesztőt, inkább kézzel írjuk a kódot
  • egyformán néz ki a különböző levelezőprogramokban
  • tartalmaz automatizált leiratkozási lehetőséget

Az itt látható mintát fogjuk elkészíteni. Ide kattintva tudod megnézni a kész HTML változatot. A komplett hírlevél mérete forráskóddal és képekkel együtt 45Kbyte.

A leírt módszerrel készített hírlevél egyformán fog kinézni a legnépszerűbb levelezőkben: Thunderbird, Outlook, Gmail, Hotmail, Citromail, Freemail, IndaMail.

A tableless layout ezúttal nem működik

A tartalom felépítéséhez ne használjunk DIV-eket, maradjunk a régen használt táblázatos felépítésnél. Befoglaló DIV helyett most egy komplett táblázatot készítsünk. A hírlevél szélessége ne legyen több, mint 600 képpont. Az ALIGN=CENTER középre igazítja a táblázatot az ablakon belül, a BGCOLOR=#332532 pedig a háttérszín beállítására szolgál.


<table width="600" bgcolor="#332532" border="0" cellpadding="0" cellspacing="0" align="center">
</table>

Az a bizonyos transzparens GIF

Veterán webdesignerek bizonyára emlékeznek még arra az időre amikor az oldalak forráskódjának legnagyobb részét a transzparens távtartók tették ki. A hőskorban ez volt a legbiztosabb megoldás amivel pontos távolságokat tudunk beállítani a cellák között. Ehhez egyetlen 1x1px méretű transzparens GIF-re lesz szükségünk. Általános elnevezése transparent.gif, spacer.gif, spaceholder.gif, de mi most nemes egyszerűséggel t.gif-nek fogjuk hívni, hogy minél kevesebbet kelljen gépelni 🙂

A hírlevélben 20px szélességű margókat fogunk használni. Ehhez 3 cellát kell létrehozzunk, az egyik bal a oldali távtartó, a másik a jobb oldali távtartó, illetve középen lesz a tartalom. Alul és felül pedig egy-egy 20px magasságú egyesített cellát teszünk.


<table width="600" bgcolor="#332532" border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td colspan="3" height="20"><img src="t.gif" width="1" height="20" border="0" style="display:block" alt=""></td></tr>
<tr>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
<td width="560"></td>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
</tr>
<tr><td colspan="3" height="20"><img src="t.gif" width="1" height="20" border="0" style="display:block" alt=""></td></tr>
</table>

Képek használata

A képek beágyazásánál mindig használjuk a WIDTH, HEIGHT, BORDER és ALT attribútumokat. A DISPLAY: BLOCK a Gmail egyik fura bug-ja miatt szükséges. Különösebb magyarázatot nem tudok adni, ha nincs rajta a képen, a Gmail extra térközöket rak a kép köré.

A háttérképeket felejtsük el, a BACKGROUND-IMAGE a legtöbb levelezőben egyáltalán nem működik. Használjunk helyette egyszerű háttérszíneket.

Ne használjunk nagyméretű képeket és mindig tömörítsünk! Ne illesszünk be szöveget képként! A hírlevél semmiképpen ne legyen egy darab kép.

A képek elnevezése legyen rövid és lényegre törő. Ne használjunk szóközt, nagybetűt, speciális karaktert, ékezetes karaktert! A "Kép az üzletről.JPG" elnevezés nem jó, helyette használjuk pl. ebben a formában: "kep-az-uzletrol.jpg".

A képeket küldhetjük beágyazva, vagy külső URL-ről behúzva. Utóbbi előnye, hogy sokkal kisebb a levél mérete, mert a képek fizikailag nem kerülnek kiküldésre, csak a levél megnyitásakor töltődnek le a szerverről. Szintén nem elhanyagolható tényező, hogy a kisebb méret miatt gyorsabb a küldés folyamata is. További előnye, hogy lehetőségünk van utólag is kicserélni egy-egy képet, ha esetleg a küldés után derül ki, hogy valamit elrontottunk (de ilyen ugyebár nem fordulhat elő :)).

Fejléc, lábléc

A fejléchez készítsünk egy újabb táblázatot két cellával. Bal oldalra illesszük a logót, jobb oldalra pedig a hírlevél tárgyát, illetve célszerű a dátumot is feltüntetni. A szöveg formázását közvetlenül a tag-ekre írt stílusokkal oldjuk meg. Alapvető dolog, de sokan elfelejtik: a logó linkeljen a főoldalunkra!

A láblécnek eltérő háttérszínt adtunk meg és kisebb betűméretet.


<table width="600" bgcolor="#332532" border="0" cellpadding="0" cellspacing="0" align="center">
<!-- spacer -->
<tr><td colspan="3" height="20"><img src="t.gif" width="1" height="20" border="0" style="display:block" alt=""></td></tr>
<!-- header -->
<tr>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
<td width="560" height="50">
<table width="560" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="120"><a href=""><img src="logo.gif" width="120" height="50" border="0" style="display:block" alt="Logo"></a></td>
<td width="440" align="right">
<h1 style="font-size:20px;font-family:arial;color:#ff974f;margin:0 0 3px 0;padding:0">Hírlevél minta</h1>
<p style="text-align:right;margin:0;padding:0;color:#cac1b0;font-family:arial;font-size:10px">2012.07.09</p>
</td>
</tr>
<tr><td colspan="2" height="20"><img src="t.gif" width="1" height="20" border="0" style="display:block" alt=""></td></tr>
<tr><td height="2" colspan="2" bgcolor="#644d52"><img src="t.gif" height="2" width="1" border="0" alt="" style="display:block"></td></tr>
</table>
</td>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
</tr>
<tr><td colspan="3" height="20"><img src="t.gif" width="1" height="20" border="0" style="display:block" alt=""></td></tr>
<!-- content -->
<tr>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
<td width="560"></td>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
</tr>
<tr><td colspan="3" height="20"><img src="t.gif" width="1" height="20" border="0" style="display:block" alt=""></td></tr>
<!-- footer -->
<tr><td bgcolor="#644d52" colspan="3" height="10"><img src="t.gif" width="1" height="10" border="0" style="display:block" alt=""></td></tr>
<tr>
<td bgcolor="#644d52" width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
<td bgcolor="#644d52" style="font-family:arial;font-size:11px;color:#a59095">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis interdum purus consectetur semper. Suspendisse tortor mauris, aliquet at condimentum eget, aliquam ac lorem. Sed nec sapien justo, eget cursus mi.</td>
<td bgcolor="#644d52" width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
</tr>
<tr><td colspan="3" height="20"><img src="t.gif" width="1" height="20" border="0" style="display:block" alt=""></td></tr>
</table>

Hasábok

Hasábok létrehozásához újabb táblázatokra lesz szükségünk. A középső cellánkat osszuk ketté úgy, hogy legyen közöttük egy 2px vastagságú vonal. Ezt szintén egy cellával oldjuk meg, a vonal színét pedig BGCOLOR-al fogjuk megadni. A szélességeket úgy számoljuk, hogy 560-ból kivonjuk az elválasztó vonalat és a távtartót, majd az összeget elosztjuk kettővel. Így 259px széles lesz egy hasáb. A cellák tartalmát igazítsuk felülre a VALIGN=TOP beállítással. Adjuk meg az általános stílusokat a TABLE tag-re írva.


<table width="560" border="0" cellpadding="0" cellspacing="0" style="font-family:arial;font-size:12px;color:#cac1b0">
<tr>
<td width="259" valign="top"></td>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
<td width="2" bgcolor="#644d52"><img src="t.gif" width="2" height="1" border="0" style="display:block" alt=""></td>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
<td width="259" valign="top"></td>
</tr>
</table>

Tartalom

Ügyeljünk arra, hogy hírlevelünk megfelelő arányban tartalmazzon szöveges elemeket is. Az alábbi példában termékeket fogunk megjeleníteni. A termékneveket és az árat szöveggel írjuk és egyenként írjuk rá mindegyikre a szükséges stílusokat. A képek és terméknevek mindig linkeljenek! Ha nem szeretnénk, hogy hivatkozásaink aláhúzottak legyenek, mindegyikre külön-külön rá kell írni a TEXT-DECORATION: NONE beállítást.

Használjunk beszédes ALT-okat. Ezek akkor fognak látszódni, ha valakinél alapból nem jelennek meg a képek a levelezőben.


<table width="560" border="0" cellpadding="0" cellspacing="0" style="font-family:arial;font-size:12px;color:#cac1b0">
<tr>
<td width="259" valign="top">
<a href=""><img src="samsung-galaxy.png" alt="Samsung i9300 Galaxy S III 16GB" border="0" width="259" height="100"></a>
<h2 style="font-size:14px;margin:10px 0;padding:0"><a href="" style="text-decoration:none;color:#ff974f;">Samsung i9300 Galaxy S III 16GB<br>Mobiltelefon</a></h2>
<p style="margin:0 0 30px 0;padding:0;font-weight:bold">160.000 Ft</p>
<a href=""><img src="samsung-tv.png" alt="Samsung UE32EH5000 LED TV" border="0" width="259" height="100"></a>
<h2 style="font-size:14px;margin:10px 0;padding:0"><a href="" style="text-decoration:none;color:#ff974f;">Samsung UE32EH5000<br>LED TV</a></h2>
<p style="margin:0;padding:0;font-weight:bold">99.900 Ft</p>
</td>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
<td width="2" bgcolor="#644d52"><img src="t.gif" width="2" height="1" border="0" style="display:block" alt=""></td>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
<td width="259" valign="top">
<a href=""><img src="nikon-d3100.png" alt="Nikon D3100 Digitális fényképezőgép" border="0" width="259" height="100"></a>
<h2 style="font-size:14px;margin:10px 0;padding:0"><a href="" style="text-decoration:none;color:#ff974f;">Nikon D3100<br>Digitális fényképezőgép</a></h2>
<p style="margin:0 0 30px 0;padding:0;font-weight:bold">119.000 Ft</p>
<a href=""><img src="amazon-kindle.png" alt="Amazon Kindle e-book olvasó" border="0" width="259" height="100"></a>
<h2 style="font-size:14px;margin:10px 0;padding:0"><a href="" style="text-decoration:none;color:#ff974f;">Amazon Kindle<br>e-book olvasó</a></h2>
<p style="margin:0;padding:0;font-weight:bold">38.900 Ft</p>
</td>
</tr>
</table>

Komplett forráskód

A lekódolt hírlevet itt tudod megtekinteni.


<table width="600" bgcolor="#332532" border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td colspan="3" height="20"><img src="t.gif" width="1" height="20" border="0" style="display:block" alt=""></td></tr>
<!-- header -->
<tr>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
<td width="560" height="50">
<table width="560" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="120"><a href=""><img src="logo.gif" width="120" height="50" border="0" style="display:block" alt="Logo"></a></td>
<td width="440" align="right">
<h1 style="font-size:20px;font-family:arial;color:#ff974f;margin:0 0 3px 0;padding:0">Hírlevél minta</h1>
<p style="text-align:right;margin:0;padding:0;color:#cac1b0;font-family:arial;font-size:10px">2012.07.09</p>
</td>
</tr>
<tr><td colspan="2" height="20"><img src="t.gif" width="1" height="20" border="0" style="display:block" alt=""></td></tr>
<tr><td height="2" colspan="2" bgcolor="#644d52"><img src="t.gif" height="2" width="1" border="0" alt="" style="display:block"></td></tr>
</table>
</td>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
</tr>
<tr><td colspan="3" height="20"><img src="t.gif" width="1" height="20" border="0" style="display:block" alt=""></td></tr>
<!-- intro -->
<tr>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
<td width="560" style="font-family:arial;font-size:12px;color:#cac1b0;text-align:justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis interdum purus consectetur semper. Suspendisse tortor mauris, aliquet at condimentum eget, aliquam ac lorem. Sed nec sapien justo, eget cursus mi. Proin accumsan sem vitae erat cursus sit amet porttitor elit tincidunt. Aliquam metus quam, semper eu ultrices nec, cursus ac ipsum. Nullam eget lectus felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</td>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
</tr>
<tr><td colspan="3" height="20"><img src="t.gif" width="1" height="20" border="0" style="display:block" alt=""></td></tr>
<!-- content -->
<tr>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
<td width="560">
<table width="560" border="0" cellpadding="0" cellspacing="0" style="font-family:arial;font-size:12px;color:#cac1b0">
<tr>
<td width="259" valign="top">
<a href=""><img src="samsung-galaxy.png" alt="Samsung i9300 Galaxy S III 16GB" border="0" width="259" height="100"></a>
<h2 style="font-size:14px;margin:10px 0;padding:0"><a href="" style="text-decoration:none;color:#ff974f;">Samsung i9300 Galaxy S III 16GB<br>Mobiltelefon</a></h2>
<p style="margin:0 0 30px 0;padding:0;font-weight:bold">160.000 Ft</p>
<a href=""><img src="samsung-tv.png" alt="Samsung UE32EH5000 LED TV" border="0" width="259" height="100"></a>
<h2 style="font-size:14px;margin:10px 0;padding:0"><a href="" style="text-decoration:none;color:#ff974f;">Samsung UE32EH5000<br>LED TV</a></h2>
<p style="margin:0;padding:0;font-weight:bold">99.900 Ft</p>
</td>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
<td width="2" bgcolor="#644d52"><img src="t.gif" width="2" height="1" border="0" style="display:block" alt=""></td>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
<td width="259" valign="top">
<a href=""><img src="nikon-d3100.png" alt="Nikon D3100 Digitális fényképezogép" border="0" width="259" height="100"></a>
<h2 style="font-size:14px;margin:10px 0;padding:0"><a href="" style="text-decoration:none;color:#ff974f;">Nikon D3100<br>Digitális fényképezogép</a></h2>
<p style="margin:0 0 30px 0;padding:0;font-weight:bold">119.000 Ft</p>
<a href=""><img src="amazon-kindle.png" alt="Amazon Kindle e-book olvasó" border="0" width="259" height="100"></a>
<h2 style="font-size:14px;margin:10px 0;padding:0"><a href="" style="text-decoration:none;color:#ff974f;">Amazon Kindle<br>e-book olvasó</a></h2>
<p style="margin:0;padding:0;font-weight:bold">38.900 Ft</p>
</td>
</tr>
</table>
</td>
<td width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
</tr>
<!-- footer -->
<tr><td colspan="3" height="20"><img src="t.gif" width="1" height="20" border="0" style="display:block" alt=""></td></tr>
<tr><td bgcolor="#644d52" colspan="3" height="10"><img src="t.gif" width="1" height="10" border="0" style="display:block" alt=""></td></tr>
<tr>
<td bgcolor="#644d52" width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
<td bgcolor="#644d52" style="font-family:arial;font-size:11px;color:#a59095">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis interdum purus consectetur semper. Suspendisse tortor mauris, aliquet at condimentum eget, aliquam ac lorem. Sed nec sapien justo, eget cursus mi.</td>
<td bgcolor="#644d52" width="20"><img src="t.gif" width="20" height="1" border="0" style="display:block" alt=""></td>
</tr>
<tr><td bgcolor="#644d52" colspan="3" height="10"><img src="t.gif" width="1" height="10" border="0" style="display:block" alt=""></td></tr>
</table>