Hírlevél készítés

Szerző:   |   2012-07-09

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>

12 hozzászólás

  1. 2017. augusztus 21. hétfő - 11:10

    Helló,
    Hírlevél küldő szoftvert tudtok ajánlani amit esetleg prémium nélkül is ki lehet próbálni?
    Mint például a madmimi.com.

    Esetleg ha időd engedi Tamás, nem tudnál egy videót arról hogyan küldjünk el saját magunk által készített html hírlevelet?

    • 2017. október 6. péntek - 14:49

      Olyat nem fogsz találni ahol ingyen tudsz küldeni leveleket, a hírlevél küldő erőforrást mindenhol meg kell fizetni. Olyan viszont biztos van, ahol magát a felületet ki tudod próbálni előfizetés nélkül is. Azoknál a cégeknél ahol eddig dolgoztam, mindenhol saját fejlesztésű hírlevél küldő rendszer volt, ezért nem igazán ismerem a piacon található előfizetéses rendszereket. A Maileon-t láttam működés közben, illetve a Webgalambról hallottam még hazai viszonylatban. És persze a MailChimp amit világviszonylatban a legtöbben használnak.

  2. 2014. május 20. kedd - 15:40

    Ha én csak 1 embernek szeretném elküldeni akkor azt hogy?

    • 2014. május 28. szerda - 19:24

      Használd a kreativitásodat 🙂 Csináltam már olyat, hogy beleraktam az egészet egy HTML fájlba, képeket feltöltöttem szerverre és onnan hivatkoztam rájuk, majd ezt a HTML fájlt beállítottam a Thunderbird-ben aláírásnak. Így amikor nyitsz egy új levelet, egyből a hírleveled lesz a tartalma. Nem szép megoldás, de működik.

  3. 2014. április 20. vasárnap - 20:13

    Ez mind szép és jó, de ezt hogy lehet elküldeni 1 embernek pl gmail-on?

    • 2014. április 27. vasárnap - 10:40

      A kiküldés egy más téma. Venni vagy bérelni kell valamilyen tömeges levélküldésre alkalmas hírlevélküldő szolgáltatást. Több ezer címzettes hírlevelet nem lehet ingyen küldeni sehol, ahhoz minőségi és megbízható szolgáltató kell, olyan akinek a levélküldő szerverei nincsenek fekete listán a spam szűrőkben 🙂

  4. 2013. április 23. kedd - 18:49

    Na, ennek szerintem hasznát is fogom venni. Köszönöm! 🙂

  5. 2012. szeptember 2. vasárnap - 19:00

    Egyre kevesebb új tutorial, a régieket szinte mind megnéztem. Mikor lesz új tutorial?

  6. 2012. július 25. szerda - 20:35

    Kedves cyrex

    Elsősorban nagyon szépen köszönöm a sok leírást és videót amit készítettél nagyon sok hasznos dolgot tanultam tőled. Szeretném megkérdezni , hogy mi a pluginnak a neve amivel a forrás kódot beilleszted? Előre is nagyon szépen köszönöm. Tetszik ez a hírlevél leírás lehet hamarosan hasznát is tudom venni.

    • 2012. július 26. csütörtök - 16:42

      Most éppen a Crayon Syntax Highlighter-t használom. De van ezer féle.

  7. 2012. július 12. csütörtök - 11:47

    Gratula Cyrex, jóó nagyon mint mindig!!

  8. 2012. július 11. szerda - 20:34

    Köszönjük szépen, nagyon jó lett 🙂

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Bootstrap carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...

  • HTML5 + CSS3 menü

    Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet :(...

  • Responsive menü

    Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat. Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb e...

  • Scrollbar színezgetés CSS-sel

    Érdekes felvetés, sosem foglalkoztam ezzel. Most ahogy megnéztem pár weboldalt teljesen véletlenszerűnek tűnik, hogy mikor tűnik el az address bar és ...

  • Bootstrap carousel

    Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block...

  • A flexbox model

    Lesz. Folyamatban van....

  • Scrollbar színezgetés CSS-sel

    Meglesni, megtanulni, továbbadni. Ez a helyes sorrend :)...

  • A villanyszerelés örömei panelben

    A legjobb, hogy múltkor akartam venni egy B10-est kismegszakítót. Megkérdezték a boltban, hogy mekkora a főmegszakítóm. Mondom 16-os. Erre rám akarták...

  • A villanyszerelés örömei panelben

    Örülök, hogy nem C16 Amperes az összes kismegszakító, sajnos ez manapság " divat " ! A világításra bőven elég a B6 Amperes kismegszakító, főleg azért ...

  • Scrollbar színezgetés CSS-sel

    Hali. Már régebb óta követlek, és rengeteget tanultam a videóidból, a szakmai tudásom alapjait, és még az alapokon túli tudásom jelentős részét is től...

  • HTML + CSS űrlap

    Hali, programozáshoz nem értek, de most a kliensoldali templétezés a divat. Vue JS, Angular, stb....

  • HTML + CSS űrlap

    Szia Tamás! Nagyon sokat segítettek a videóid. Köszönöm! Nem tudtam eldönteni melyik blogba írjak, ezt választottam. Azt szeretném kérdez...