HTML e-mail és e-mail sablon készítés szabályai

Ez a Tudásbázis bejegyzés a levél sablonok készítésének szabályairól szól, amely haladó ismereteket igényel. Csak akkor kezdjen bele, ha rendelkezik a megfelelő ismeretekkel.

A "hétköznapi" felhasználók számára ezt a bejegyzést ajánljuk:
Levélsablon létrehozása a SalesAutopilot beépített sablonjaiból (sablonszerkesztővel, "hétköznapi" felhasználók számára) (7:29 perc videó)

Ha a levelek létrehozásában van szüksége segítségre, a következő bejegyzéseket javasoljuk:

HTML és TEXT levél (email) létrehozása, szerkesztése és egyéb funkciói

Igényes levelek létrehozása EDM Designerrel

HTML email készítés EDM Designer használatával - meglévő sablonból (23:53 perc videó)

PDF változat letöltése
(fájlméret: 1,25 MB)

I. Bevezető

Html e-mail sablon készítéskor az utóbbi évek minden fejlett technikáját el kell felejtenie, ezentúl ajánlott egy egyszerű szövegszerkesztőt használni az e-mail sablon készítéséhez a legjobb hatás elérése érdekében. Az úgynevezett WYSIWYG (What You See Is What You Get) HTML szerkesztők (pl. DreamWeaver, Word, stb.) használata HTML e-mail készítéséhez szigorúan tilos, ugyanis ezek elárasztják a kódot mindenféle felesleges kóddal és paraméterrel, amitől nem lesz két olyan e-mail kliens, amelyik ugyanúgy jeleníti meg az általunk készített HTML e-mail-t.

Levelezőprogramok sajátosságai

A manapság (2010 környékén) leginkább kedvelt levelezőprogramokat alapjában két csoportra bonthatjuk: online vagy webes kliensek (Hotmail, Yahoo! Mail, Apple Mail, Gmail) illetve asztali kliensek (Outlook, Lotus Notes, ThunderBird). Az online kliensek a lehető legkevesebb HTML elem alapján próbálják megjeníteni a leveleket azért, hogy a megjelenített HTML e-mail kódja nehogy „összeakadjon" a kliens szoftver HTML kódjával. Ezt pedig úgy érik el, hogy a <html>, <head> illetve <body> elemeket alapból kiszűrik az e-mail-ekből (pl. a <body> elemben meghatározott háttérszín nem fog érvényesülni). Az elemek eltávolításnak másik oka a biztonság, nehogy a levélben a kliens gépen károkozásra alkalmas kód legyen a levélben. Ezért a webes kliensek többsége kiszűri a levélből a javascript, flash illetve form elemeket.

A másik típusa az e-mail klienseknek az úgynevezett asztali kliensek, melyeket a számítógépére telepítve használhat. Ezek között az eltérést a különböző megjelenítési „motor", az úgynevezett renderelés jelenti. Az Outlook 2003 és a Lotus Notes legtöbb verziója az Internet Explorer-t, az Outlook 2007 és 2010 a Microsoft Word-öt használja a HTML e-mail-ek megjenítéséhez. A Word HTML „motorja" gyakorlatilag a 90-es években alkalmazott technikákat ismeri (felejtse el a CSS 99%-át).

II. Általános HTML e-mail sablon készítési irányelvek

Ahhoz tehát, hogy a HTML e-mail-ek minden e-mail kliensen ugyanúgy, vagy legalábbis közel hasonlóan jelenjenek meg egy pár szabályt be kell tartania. Az első és talán legfontosabb, hogy törekedjen az egyszerűségre! Amikor egy HTML e-mail-t programoz, akkor a legjobb, ha először begépeli a szöveges változatot, és arra „húzza rá" a HTML kódot.
Arra is figyeljen, hogy ne bonyolítsa túl az e-mail-t. A legmegbízhatóbb, ha levele nem áll többől mint egy fejléc, egy tartalmi blokk, amely maximum kettő hasábos, illetve egy lábléc.

Egy HTML e-mail általában véve a következő szisztéma szerint készül el:

Készít egy táblázatot a fejlécnek, egyet a tartalomnak és egyet a láblécnek. Ezt a három táblázatot tegye bele egy befoglaló táblázatba aminek majd a pozícionálásnál illetve a háttérszín megadásnál lesz jelentősége. Az alkalmazott HTML elemek alapértelmezett attribútumait (border, valign, align, cellpadding, cellspacing, stb.) nagy biztonsággal használhatja. Ha kéthasábos tartalmat szeretne, akkor a középső táblázatban helyezzen el egy újabbat, aminek két oszlopa van, ez lesz a két hasáb (ne felejtse el megadni a szélességüket!)

A. Design alapelvek

Méretek

Ahhoz, hogy ne „csússzon szét" a dizájn, a legjobb, ha minden HTML elemnek, aminek csak lehet, megadja a méretét. A levél teljes tartalmát helyezze el egy befoglaló HTML elembe, aminek adjon 98% szélességet (Yahoo! Mail-nek kell 1% margó mindkét oldalon ahhoz, hogy jól jelenítse meg az e-mail-t), és minden egyéb tartalmat ezen belül helyezzen el. Ezen kívül lehetőleg sehol máshol ne használjon %-os méretadást, mert az eltorzíthatja a megjelenést az e-mail kliens ablakának méretétől függően.

Fontos: az e-mail kliensek megjelenítési felülete jóval kisebb, mint egy böngészőnek, ezért az e-mail tartalmi mondandójának a maximális szélessége 600px legyen.

A harmadik, mérettel kapcsolatos tudnivaló pedig, hogy a legjobb, ha hagyományos 12px méretet alkalmaz normál szöveg esetében és a címsorok használatakor sem haladja meg a 16-20px-es betűméretet.

Képek

A következő HTML elem, amit érdemes megemlítenünk a kép, vagyis az <img> elem. Weboldalakon gyakran képekkel helyettesítjük azokat a szöveget, amiket nem széleskörben alkalmazott (Times, Arial, Verdana, Gerogia) betűtípussal írtunk. Képek használata csak abban az esetben ajánlott HTML e-mail szerkesztésekor, ha a képként megjenített szöveg nem tartalmaz kulcsfontosságú információt, ugyanis a legtöbb e-mail kliens alapértelmezetten letiltja a képek megjelenítését (a webes és asztali kliensek is). Továbbá az is fontos, hogy mindig adja meg az <img> elem alt attribútumát (ami a kép alternatív szövege vagyis a képet helyettesítő szöveg, amely akkor jelenik meg, ha a kép valamiért nem), hiszen ezt az e-mail kliensek is megjelenítik, és ezáltal azok számára is elérhetővé válik a tartalom, akik nem tudják vagy nem akarják megjeleníteni a képeket. Bevált megoldás példul, hogy a céglogót tartalmazó <img> elem alt paraméterének értéke a cég neve (<img src="http://www.mintavallalat.hu/images/ceglogo.jpg" alt="Mintavállalat Zrt.." width="60" height="30" />). Ugyanígy kötelező pontosan megadni a width és height attribútumok értékét is!

Képek alkalmazásaval ne essen túlzásokba. Úgy érdemes terveznie a HTML e-mail-t, hogy az képek nélkül is elfogadhatóan jelenjen meg és a lehető legjobban adja át a tartalmi mondanivalót. Többek között ezért sem javallot a csak és kizárólag képekből összeállított HTML e-mail készítése.

Háttérképek alkalmazását pedig próbálja elkerülni, mert pl. az Outlook 2007 egyáltalán nem jeleníti meg a háttérképeket!
Ha mégis szeretne háttérképet alkalmazni, akkor a HTML elem background paraméterét használja a CSS formázás helyett, mert valószínűbb, hogy a többi kliens azt megjeleníti.

Abban az esetben, ha mégis képekből állítja össze a HTML e-mail-t, mindenképpen készítsen egy online verziót is a levélből, melyenek az elérési útvonalát szövegesen belinkeli a levél elejére, azonban az ilyen típusú e-mail-ek a legtöbb spam szűrőn fenn fognak akadni, mivel a képekből álló leveleket a spam szűrők nem tudják tartalmilag elemezni, ezért nagyobb valószínűséggel jelölik meg spam-nek.
Erre vonatkozóan példát a dokumentum végén találhat.

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ó zárójele után tenni a záró </td> elemet.

A legtöbb e-mail kliensben van olyan beállítási lehetőség, hogy az adott feladóhoz a jövőben mindig engedélyezze a képek megjelenítését. Általában a levél megnyitásakor ezt fel is ajánlja. A levél elején elhelyezhet egy ilyen üzenetet a címzett számára, hogy „Adjon hozzá levelezőprogramjában a biztonságos feladók listájához, hogy a jövőben mindig megjelenjenek a leveleinkben küldött képek az Ön számára."

Csatolja vagy linkelje a képeket?

Manapság teljesen elfogadott és működő gyakorlat, hogy a levelekhez nem csatolja a képeket hanem linkeli azokat (abszolút képhivatkozással). Ennek okai: a) a csatolt képek jelentősen megnövelik a levél méretét, b) ügyes hackerek képnek tudnak álcázni kártékony programokat, ezért a spam szűrők nagyobb eséllyel szűrik ki a csatolt képeket tartalmazó e-maileket.

B. Kódolási alapelvek

CSS-ből csakis a minimálisat alkalmazza (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. A Dialect cég által ingyenesen online közzétett Premailer nevű szoftver elvégzi Ön helyett a CSS inline-osítását ha már van egy olyan kódja, amely beágyazott CSS-t tartalmaz. http://premailer.dialect.ca/

Táblázatok

Míg HTML oldal készítésekor <div>-eket használ, addíg HTML e-mail készítéséhez a <table> elemet használja, ugyanis ezeket renderelik csak helyesen az e-mail kliensek.

Táblázatoknál minden esetben adjon értéket a következő paramétereknek: cellspacing, cellpaddding, width és border. Amint azt már korábban említettük, a legbiztonságosabb eljárás, ha a <body> elem után elhelyezünk egy <table> elemet, melynek a szélességét vagy 98%-ra (ha esetleg szeretné középre elhelyezni a levél tartalmát) vagy pedig 600px-re állítja.

Kerülje a sor- illetve oszlopösszevonásokat (rowspan, colspan), mert ezeket szintén különbözőképpen értelmezik az e-mail kliensek. Helyette alkalmazzon beágyazott táblázatokat, de ezt sem ajánlott három-négynél mélyebb szintre vinni. Ha ennél mélyebben kell táblázatokat egymásba ágyaznia, akkor lehet, hogy érdemes újratervezni az e-mail megjelenését, esetleg tartalmát is.

Távolság

Padding használata egyáltalán nem, margin-é pedig csak nagyon kis mértékben ajánlott HTML e-mail készítésekor. Míg a Gmail-ben látszólag ugyanúgy néz ki az elkészített levél mint a böngészőben, az Outlook 2007-ben máris megjelennek a dupla margin-ok, illetve bizonyos helyekről pedig teljesen eltűnnek.

Amennyiben képek körül szeretne egy bizonyos távolságot hagyni, hogy a szöveg ne „folyjon" rá a képre, akkor érdemes a képeket úgy elmentenie, átalakítani, hogy azok már eleve tartalmazzák a szükséges távolságot maguk körül.

Táblázatok esetében például egy kéthasábos dizájnnál ahhoz, hogy a hasábok között legyen egy 20px széles hely, szúrjon be még egy oszlopot, aminek a szélessége 20px.

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

Ha a táblázat alatt szeretne egy 20px-es távolságot, akkor a következő "trükköt" alkalmazza:
a táblázatba illesszen be még egy sort, és annak egyik cellájába helyezzen el egy <p> elemet, melynek line-height attribútumát inline css-sel állítsa 20px-re.

Pozícionálás

A CSS-sel történő pozicionálás (pl.: style="position:absolute;top:50px") és a float-olás használata értelmetlen.

Ha egy képet szeretne valamelyik oldalra igazítani úgy, hogy a szöveg körbefolyja, akkor az <img> elem align attribútumának adjon értéket.

Szöveg pozícionálásához adjon értéket a szöveget befoglaló blokk elem text-align stílus attribútumának.

Ha levele teljes tartalmát szeretné középre igazítani, akkor készítsen 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 hagyja üresen.

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

Kerülje az úgynevezett spacer image-ek használatát!

Elérési útvonalak, hivatkozások

Amennyiben linkeket vagy képeket is tartalmaz levele, akkor mindkét HTML elem esetében abszolút hivatkozást használjon, máskülönben nem lesznek elérhetőek sem a képek, sem a hivatkozott linkek.

Egy másik fontos alapelv, hogy - bár a legtöbb online e-mail kliens helyesen kezeli, azt asztali kliensekre pedig nem is vonatkozik -, hogy linkek beillesztésekor fontos megadnuk a "<a>" html elem 'target' attribútumának a '_blank' értéket annak érdekében, hogy egyes online levelező kiszolgálók minden esetben külön ablakban vagy fülön nyissák meg a tartalmat, amire a beillesztett link mutat

<a href="http://www.mintavallalat.hu/jelentkezes" title="Jelentkezzen most" target="_blank">Kattintson a jelentkezéshez!</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.

Van néhány speciális eset. Például Gmail-t használók esetében, ha a levélben elhelyez egy Youtube videóra mutató linket, akkor a Gmail webes kliens automatikusan a video előnézetét jeleníti meg, amire kattintva a videó elindul. Viszont fontos figyelembe vennie a következőket: nem minden @gmail.com című feliratkozó olvassa Gmail-ben a leveleit. Sokan továbbítják a leveleket pl. saját AppleMail-es vagy egyéb e-mail fiókjukba. Náluk továbbra is csak a videó linkje fog megjelenni.

HTML5-ben van egy technika beágyazott videó használatára. Azon e-mail kliensekben melyek támogatják a HTML5-öt (jelenleg csak az AppleMail ésiPhone kliensek – amelyek elterjedtsége már Magyarországon is rohamosan nő) a lejátszható videó jelenik meg. Azon klienseken melyek nem támogatják a HTML5-öt pedig egy megadott kép fog megjelenni. Erre egy példa:

</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 nyitó tag előtt szereplő DOCTYPE deklaráció kihatással van arra, hogy a különböző e-mail kliensek miképp értelmezik a HTML kódot. Ezért fontos, hogy a megfelelő DOCTYPE típust használjuk a levél HTML forráskódjában.

Először is mindenképp legyen DOCTYPE deklaráció. Bár néhány e-mail kliens kicseréli a sajátjára, a többi e-mail kliensnél kihatással van a megjelenítésre.

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">

Mi történhet ha a DOCTYPE deklaráció eltávolításra kerül?

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.
IE-ben az üres blokk elem magassága 19x 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.

És még jónéhány változatos jelenség.

Mi a megoldás?

Mielőtt a levelet különböző levelezőklienseken tesztelné vegye ki a DOCTYPE deklarációt és ellenőrizze a megjelenést Internet Explorer 6,7,8, Firefox, Chrome és Safari böngészőkben. Ha mindegyik böngészőben jól jelenik meg így is, akkor javasolt levelezőkliens előnézet tesztet is futtatni. Az előnézet teszt során kód elemzés is történik – a megadott DOCTYPE alapján. Ajánlott a jelzett hibák javítása HTML kódban.

C. Tesztelési alapelvek

HTML levél teszteléséhez küldjön tesztlevelet a legelterjedtebb e-mail kliensekre. Mielőtt elküldi a tesztlevelet ellenőrizze a HTML e-mail megjelenését böngészőjében, hiszen ha már abban sem úgy jelenik meg, ahogyan azt szeretné, akkor a levelező programban végképp nem a várt eredmény fogja fogadni. Ha a HTML levél elkészítésekor a fenti alapelveket betartotta és a levél jól mutat Firefox-ban, akkor nagy valószínűséggel jól fog megjelenni Gmail-ben és Yahoo! Mail-ben is. Ha Outlook 2003-ra is tesztelni kíván, akkor nyissa meg az e-mail-t Internet Explorer 6-tal, mert ezt használja a levél renderelésekor az Outlook 2003-as verziója.

Ne felejtse, hogy a HTML e-mail egy bizonyos háttérszín (alapértelemezetten fehér) előtt fog megjelenni, ezért, ha levelének háttérszíne is fehér, és nincsenek keretek, vagy behatároló eszközök, akkor az egybe fog olvadni az e-mail kliens fehér hátterével. Hacsak nem ez a célja, akkor érdemes vagy keretet adnia a 600px széles befoglaló táblázatnak, vagy pedig háttérszínt beállítani a 98% széles táblázatnak.

<table width="600" cellpadding="0" cellspacing="0" border="1"> vagy
<table width="600" cellpadding="0" cellspacing="0" style="border: 1px solid #333333;"> vagy
<table width="98%" cellpadding="0" cellspacing="0" style="background-color:#999999;">

Teszteléskor a következő lépés, hogy távolítsa el az összes <img> elem src paraméterének az értékét az e-mail-ből, és nézze meg az így kapott eredményt. Levelének így is a lehető legjobban kell mutatnia! (ez a módszer arra is jó, hogy felfedje, hol nem adott értéket a width és height paramétereknek <img> elemeknél).

Legvégül küldje ki a levelet saját magának és ellenőrizze a megjelenést leggyakoribb webes és asztali kliensekkel.

Jelenleg legelterjedtebb asztali kliensek Magyarországon:

Outlook 2003

Outlook 2007

Mozilla Thunderbird

Apple Mail

Legelterjedtebb webes kliensek Magyarországon:

Freemail

Citromail

Gmail

Yahoo

Hotmail

Először tesztelje le Gmail-el és Outlook 2007-el a levelet. Mivel ha ezeken jól jelenik meg akkor nagy valószínűséggel a többin is. Így az esetleges javítandó részekre hamar fényt deríthet.

Leveleiket egyre többen nézik mobiltelefonon. Az iPhone, Android, Blackberry, Palm 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. Ha levele nem szélesebb 600px-nél akkor valószínű még olvasható lesz ezeken az eszközökön is valamelyest lekicsinytve.

Meg kell még említenünk a levél előnézet generáló (vagy content checker) alkalmazásokat. Ezek a webes alkalmazások egyszerűen legenerálják a levelek megjelenését a különböző webes és asztali levelezőkliensekben. Ez a szolgáltatás a SalesAutopilot-ba is be van építve, a SalesAutopilot-ban lévő leveleket - adott feliratkozóra megszemélyesítve - egy gombnyomással lehet tesztelni. A szolgáltatás minimális díjért – levelenként 800 Ft-ért vehető igénybe.

Amennyiben sablont készít, és azt majd valaki más fogja saját cégéhez alakítani, akkor okvetlen tesztelje legalább a következő e-mail kliensekben a sablonból készített HTML e-mail megjelenését: Outlook 2007, Gmail (ha tudjuk, hogy a sablon felhasználója nagyvállalati e-mail címekre is el fogja küldeni az e-mail-t, akkor nem hagyhatja ki a tesztelést Lotus Notes-al sem, hiszen ez még a mai napig elterjedt levelező rendszer nagyvállalati környezetben).
Azokban HTML e-mail sablonokban, melyeket nem az Ön saját ügyfelei számára készít, hanem bármely SalesAutopilot felhasználó számára elérhetővé kíván tenni, mindenképp' helyezze el a SalesAutopilot logót, és annak jobb oldalán a saját logóját, vagy cégnevét!
[Hamarosan példát is mellékekünk ehhez!]

III. HTML e-mail illetve e-mail sablon készítése SalesAutopilottal

Levélmegnyitások mérése

Az eddigieken felül a sablon minden esetben kell, hogy tartalmazza a [checkopen] elemet, lehetőleg a záró </body> tag előtt. Ez lehetővé teszi, hogy a SalesAutopilot követni és egyben mérni tudja a levélmegnyitásokat, melyből hasznos statisztikai adatokat állít elő a felhasználó számára, amik elérhetőek a levél adatainak áttekintése képernyőn, az adott levél nevére kattintva.
A [checkopen] mezőkódot a levél kiküldésekor a SalesAutopilot egy 1 x 1px-es „láthatatlan" képre cseréli, amely letöltését a SalesAutopilot figyeli és rögzíti. Ez a kép nem fog látszani egyetlen levélben sem kiküldés után, tehát a design tervezésekor nem kell figyelembe venni!

A levélmegnyitás mérés nem egy 100%-ban pontos mérőszám, mivel a levélben elhelyezett láthatatlan kép letöltését méri, de a jelenlegi e-mail kliensek nagy része alapértelmezetten nem jeleníti meg a képeket, így a levélmegnyitás mérő képet sem. Tehát úgy fogalmazhatnánk, hogy a megnyitás mérőkód azt méri, hányan nyitották meg a levelet akik engedélyezték a levélben lévő képek megjelenítését.

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

A legtöbb esetben szükség van egy olyan linkre, amire kattintva a feliratkozó egy gombnyomásra leiratkozhat. Ezt a lábléc zárószövegében helyezze el a többi „kisbetűs" szöveggel együtt. Ennek beillesztéséhez a következő kódrészletet kell beszúrnunk:

[unsubscribe] A leiratkozáshoz kattintson ide. [/unsubscribe]

A két SalesAutopilot elem közötti szöveg természetesen szabadon szerkeszthető. A levél kiküldésekor a SalesAutopilot le fogja cserélni a két elem közötti részt egy linkre, amire kattintva a felhasználó a leiratásra kerül az adott e-mail listáról és megjelenik számára egy ezt megerősítő üzenet.

A leiratkozó link szövegét az [unsubscribe] [/unsubscribe] mezőkódok közé bárhova elhelyezett span HTML taggel tudja formázni (betűszín, típus, méret stb.).

E-mail sablon létrehozása SalesAutopilot-tal

A SalesAutopilot-ban nem csak egyedi levelek, hanem levélsablonok létrehozására is van lehetőség. A levélsablon tulajdonképpen egy kiinduló állapot az egyedi levél elkészítéséhez. Tehát nem olyan értelemben sablon amelynek csak bizonyos részeit tudjuk módosítani, hanem abban segít, hogy ne mindig a nulláról kelljen elkezdeni felépíteni a levelet. Az elkészített levél és sablon között nincs semmilyen kapcsolat. Vagyis a sablon módosítása nincs hatással a korábban belőle készített levelekre.

A SalesAutopilot szoftverben egy e-mail sablon létrehozása a követekezőképpen zajlik:
A bal oldali menüből a Beállítások menüpontban található Levélsablonok kezelése likre kattintva érheti el azt az oldalt, ahol új levélsablont tud létrehozni, illetve a már meglévőket szerkeszteni.

Új sablon hozzáadása, meglévő sablon szerkesztése

1. Kattintson az Új levélsablon létrehozása gombra

2. Adjon nevet a levélsablonnak

3. Válassza ki a sablon típusát (HTML vagy Szöveges)

4. Másolja be a sablon HTML kódját a megfelelő mezőbe

6. Opcionális: alkalmazza saját stílusait

Abban az esetben, ha azt szeretné, hogy a sablonnal készített levelek szerkesztésekor a felhasználónak rendelkezésére álljanak úgynevezett előre definiált stílusformák, akkor jelölje be a "Saját stílus alakalmazása" négyzetet, és az ott található útmutatót követve írja be a stílusdefiníciókat.
Egy példa a formai szabályokra:

{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', styles : {color: '#00FF00', fontSize: '15px', textDecoration: 'underline'}},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', styles : {backgroundColor: '#CCC'}}

A title elem értéke lesz az, amely megjelenik majd a felhasználónál a legördülő menüben, ezért érdemes úgynevezett „beszédes" elnevezést alkalmaznia, mint például „Kiemelés sárgával" vagy „Zöld oldalsáv", stb. Ha csak a title elem értékét adja meg, akkor az úgy fog megjelenni, mint a <select> elem esetében az <optgroup> elem, tehát nem kiválasztható.
A selector elem értéke az a HTML elem, amelyre érvényesül az azt követő CSS formázás. Tehát, ha a selector értéke ’tr’ de a felhasználó egy <p> vagy egy <h2> elemre akarja azt alkalmazni, akkor nem fog történni semmi, csak akkor, ha egy <tr> elemet kijelölve választja az adott formázási stílust.
A styles elem értékei hagyományos CSS elemek annyi eltéréssel, hogy javaScript szintaktikával kell azokat megadnia, tehát ami a CSS-ben kötőjellel van írva, az itt kötőjel nélkül és a kötőjel utáni szó kezdőbetűje nagybetűre változik, így lesz a font-style-ból fontStyle és a background-color-ból backgroundColor.

Amikor a felhasználó levél szerkesztésekor ezt a sablont választja, az itt definiált stílusok automatikusan betöltődnek a SalesAutopilot HTML szövegszerkesztőjébe, ahonnan egyetlen kattintással elérhetőek lesznek a Stílusok legördülő menüből.

7. Végül töltsek fel a levélsablon előnézeti képét, ami alapján a felhasználó ki tudja választani levélszerkesztéskor az adott sablont. Lehetőleg olyan képet töltsön fel, amely 190x190 pixel méretben is kellően „bemutatja" a sablont (érdemes a levél egy részét crop-olni és valamelyest lekicsinyíteni, nem pedig az egész levelet összenyomni 190x190px-re).

Egy már meglévő sablon szerkesztéséhez egyszerűen kattintson a szerkeszteni kívánt sablon melletti Szerkesztés linkre.

E-mail sablon felkészítése SalesAutopilot-ban történő felhasználásra

A SalesAutopilotba feltöltött és ott alkalmazott levélsablonok elkészítésekor tertsa szem előtt az egyszerűen szerkeszthetőséget. Valószínűleg több olyan felhasználó is szeretne levelet létrehozni az Ön által készített sablonból, aki nem ért a HTML kódoláshoz és a MaiMasterbe beépített HTML szerkesztőre lesz utalva.
Nagyon fontos, hogy a levélsablon ne csak jól nézzen ki, de a felhasználó által egyszerűen szerkeszthető legyen. Ezt a célt teszik könnyebben elérhetővé a már korábban említett előre definiált stílusok, de ezen kívül még az alábbi dolgokra is figyeljen oda:

ha például van egy levele, aminek a tartalmi részében minden elem 10px-lel a bal margótól kezdődik, akkor ne a tartalmi elemek mindegyikének adjon 10px bal margin-t, hanem hozzon létre egy 10px széles oszlopot a tartalmi blokktól balra. Ezzel egyszerűvé teszi a felhasználónak, hogy további tartalmi elemeket hozzon létre, melyek ugyanott fognak kezdődni ahol a többi is, hiszen amikor a felhasználó a HTML szerkesztőben a sor végén nyom egy ENTER-t, akkor csak egy szimpla <p> elem fog létrejönni, mindenféle stílusdefiníció nélkül.

Rossz példa:

<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td style="width:600px; font-family: Arial; font-size: 12px;" valign="top">
<h1 style="margin: 10px; font-weight: normal; font-size: 24px; font-family: Georgia,Arial;">Hírlevél</h1>
<h2 style="margin: 10px; font-weight: normal; font-size: 18px; font-family: Georgia,Arial;">Kamucég Bt. | 2010. május 10.</h2>
<p style="margin: 10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nisl quam, feugiat quis facilisis porta, ultrices nec metus. Donec adipiscing. </p>
<p style="margin: 10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nisl quam, feugiat quis facilisis porta, ultrices nec metus. Donec adipiscing. </p>
</td>
</tr>
</table>

Jó példa:

<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td style="width:10px"> </td>
<td style="width:590px; font-family: Arial; font-size: 12px;" valign="top">
<h1 style=" font-weight: normal; font-size: 24px; font-family: Georgia,Arial;">Hírlevél</h1>
<h2 style=" font-weight: normal; font-size: 18px; font-family: Georgia,Arial;">Kamucég Bt. | 2010. május 10.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nisl quam, feugiat quis facilisis porta, ultrices nec metus. Donec adipiscing. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nisl quam, feugiat quis facilisis porta, ultrices nec metus. Donec adipiscing. </p>
</td>
</tr>
</table>

Ha az Ön által elkészített sablon tartalmi blokkját több, egymást követő táblázat alkotja, akkor minden egyes táblázat után szúrjon be egy üres <p> elemet, amelyre kattintva a felhasználó be tudja illeszteni a következő táblázatot.

...
</table>
<p> </p>
<table>
...

A HTML szerkesztő használata

HTML elem másolásához a HTML szerkesztő alján található Útvonal részből kattintással jelölje ki a másolandó részt (ilyenkor egy kék keret jelenik meg a kiválasztott rész körül), majd a CTRL+C (másolás) billentyűkombinációval a helyezze a kivágott részt a vágólapra, a kurzort vigye a beillesztés helyére, majd CTRL+V (beillesztés) billentyűkombinációval ilessze be a korábban kimásolt tartalmat.

Ha egy HTML elemet teljesen törölni akar, akkor vagy a HTML szerkesztő alján található Útvonal részből kattintással jelölje ki a törlendő részt és nyomja meg a DEL billentyűt, vagy a kattintson a törölni kívánt elem tartalmába, és szöveg esetén egy END billentyűvel a sor utolsó karakterére ugorva (ha több soros a szöveg akkor ezt az utolsó sorban végezze el) majd a SHIFT+HOME billentyűkombinációval az adott sort kijelölve az adott sort (ha több soros a szöveg, akkor SHIFT+kurzor billentyűkombinációval menjen az elem legelső karakteréhez) és amikor a törlendő részt kijelölte, akkor megnyomjuk a DEL gombot.

Ha képet akar törölni, akkor egyszerűen kattintson a képre és nyomja meg a DEL billetnyűt.

A HTML szerkesztő többi formázási eleme ugyanúgy működik, mint bármely más szövegszerkesztő esetében.

A következő kódrészlet egy példa a fentiek alkalmazására, melynek az eredménye így néz majd ki:

Alább pedig az a HTML kód, amely ezt elérhetőve tette:

1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4 <title>Template 2 - Right Sidebar</title>
5 </head>
6 <body>
7 <table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f5f6f4">
8 <tr>
9 <td align="center">
10 <table width="600" border="0" cellspacing="0" cellpadding="0">
11 <tr>
12 <td align="center" style="font-family: 'Lucida Grande';font-size: 10px;color: #666666;">
13 <p style="margin: 0 0 4px 0;">Ezt a hírlevelet azért kapja, mert korábban már rendelt tőlünk.</p>
14 <p style="margin: 0 0 4px 0;">Már nem érdekli Önt ez a hírlevél? [unsubscribe]Iratkozzon le itt![/unsubscribe]. Probléma akadt az e-mail megjelenítésével? <a href="http://www.mintavallalat.hu/hirlevel/20100510.html" alt="Nézze meg a böngészőben" style="color: #333333;">Nézze meg a böngészőjében!</a></p>
15 </td>
16 </tr>
17 <tr>
18 <td height="77" align="left" style="background-color: #353535;">
19 <table width="600" border="0" cellspacing="0" cellpadding="0">
20 <tr>
21 <td width="20"> </td>
22 <td><h1 style="font-family: Georgia;font-size: 32px;font-weight: normal;color: #bfbfbf;display:inline;text-align: left;">Mintavállalat Zrt.</h1></td>
23 <td align="right"><h3 style="font-family: Georgia;font-size: 14px;font-weight: normal;color: #bfbfbf;display: inline;font-style: italic;">2010. május-i hírlevél</h3></td>
24 <td width="20"> </td>
25 </tr>
26 </table>
27 </td>
28 </tr>
29 </table>
30 </td>
31 </tr>
32 <tr>
33 <td align="center">
34 <table width="600" cellspacing="0" cellpadding="0" style="background-color:#FFFFFF">
35 <tr>
36 <td align="left" valign="top" width="348" >
37 <table width="348" cellspacing="0" cellpadding="0" border="0">
38 <tr>
39 <td width="20"> </td>
40 <td style="font-family: 'Lucida Grande';font-size: 12px;color: #333333;text-align: left;"><br/>
41 <p>Kedves [mssys_firstname],<br /><br />Lorem ipsum dolar sit amey consecutar adipiscling elit, vitae mi congue pellentsque tristique amlesuada,<br /><br />Üdvözlettel, Mintavállalat Zrt.</p>
42
43 <img src="hr.gif" width="328" height="27" alt="Hr">
44
45 <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
46
47 <img src="main-content-inline.jpg" width="328" height="159" alt="Content Inline" hspace="0" vspace="4">
48 <p>Pellentesque mi. Ut gravida metus vel odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam lacinia turpis et quam. In luctus massa eget enim.</p>
49
50 <p>Suspendisse diam felis, tristique sed, sagittis at, interdum a, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur augue lacus, luctus sit amet, dictum sit amediam. <a href="#" style="color: #2679b9;font-style: italic;">Tovább »</a></p>
51
52 <a href="#top" style="font-size: 12px;text-align: center;display: block;color: #999999;text-decoration: none;">Oldal tetejére^</a>
53
54 <img src="hr.gif" width="328" height="27" alt="Hr">
55
56 <h2>Aliquam molestie quam vitae mi congue tristique</h2>
57
58 <img src="main-content-inline-small.jpg" width="147" height="147" alt="Inline" align="right" vspace="4">
59
60 <p>Pellentesque tristique male suada lorem. Vivamus condimentum! Duis magna. Aliquam pharetra laoreet felis. Duis metus. Fusce ac dui? <a href="#" style="color: #2679b9;font-style: italic;">Praesent condimentum</a>. Aliquam luctus, leo at consequat fringilla, neque neque interdum est, in vestibulum purus nisl id nulla!</p>
61
62 <p>Quisque nulla ante, imperdiet quis, eleifend ut. <a href="#" style="color: #2679b9;font-style: italic;">Tovább »</a></p>
63
64 <a href="#top" style="font-size: 12px;text-align: center;display: block;color: #999999;text-decoration: none;">Oldal tetejére^</a>
65 </td>
66 </tr>
67 </table>
68 </td>
69
70 <td align="center" valign="top" width="219" >
71 <table width="219" cellpadding="0" cellspacing="0" border="0">
72 <tr>
73 <td width="10"> </td>
74 <td width="189"><br/>
75 <h2 style="font-family: Georgia;font-size: 18px;font-weight: bold;color: #000000;margin: 0 0 10px 10px;text-align: left;">Ebben a számban</h2>
76 <ul style="font-family: Georgia;font-size: 12px;color: #2679b9;margin: 0 0 0 24px;text-align: left;padding:0;">
77 <li style="margin: 0 0 10px 0;"><a href="#" style="font-family: Georgia;font-size: 12px;color: #2679b9;font-style: italic;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></li>
78 <li style="margin: 0 0 10px 0;"><a href="#" style="font-family: Georgia;font-size: 12px;color: #2679b9;font-style: italic;">Aliquam molestie quam vitae mi congue tristique</a></li>
79 </ul>
80
81 <img src="small-hr.gif" width="199" height="27" alt="Small Hr">
82
83 <h2 style="font-family: Georgia;font-size: 18px;font-weight: bold;color: #808080;margin: 0 0 6px 4px;text-align: left;">Leiratkozás</h2>
84 <table border="0" cellspacing="0" cellpadding="0">
85 <tr>
86 <td style="background-color: #f1f1f1;" align="center">
87 <table width="189" cellpadding="0" cellspacing="10" border="0">
88 <tr>
89 <td>
90 <p style="font-family: 'Lucida Grande';font-size: 11px;color: #5f5f5f;margin: 0 0 10px 0;text-align: left;">Ezt a hírlevelet Ön azért kapja, mert korábban feliratkozott levelező listánkra.</p>
91 <p style="font-family: 'Lucida Grande';font-size: 11px;color: #5f5f5f;margin: 0 0 10px 0;text-align: left;">[unsubscribe]Leiratkozás itt.[/unsubscribe]</p>
92 </td>
93 </tr>
94 </table>
95 </td>
96 </tr>
97 </table>
98
99 <img src="small-hr.gif" width="199" height="27" alt="Small Hr">
100
101 <h2 style="font-family: Georgia;font-size: 18px;font-weight: bold;color: #808080;margin: 0 0 6px 4px;text-align: left;">Kapcsolat</h2>
102 <table border="0" cellspacing="0" cellpadding="0" width="189">
103 <tr>
104 <td style="background-color: #f1f1f1;" align="center">
105 <table width="189" cellpadding="0" cellspacing="10" border="0">
106 <tr>
107 <td>
108 <p style="font-family: 'Lucida Grande';font-size: 11px;color: #5f5f5f;margin: 0 0 10px 0;text-align: left;">12 Kam u.<br />Budapest<br />1234<br />(+36) 1 234 5678</p>
109 <a href="mailto:info@mintavallalat.hu" alt="Írja meg a véleményét!">info@mintavallalat.hu</a>
110 </td>
111 </tr>
112 </table>
113 </td>
114 </tr>
115 </table>
116 </td>
117 <td width="20"> </td>
118 </tr>
119 </table>
120 </td>
121 </tr>
122 <tr>
123 <td colspan="2" align="center">
124 <table width="560" border="0" cellspacing="0" cellpadding="0">
125 <tr>
126 <td style="border-top:1px solid #dedede;" align="left">
127 <table width="560" border="0" cellpadding="0" cellspacing="10">
128 <tr>
129 <td>
130 <p style="color: #a1a1a1;font-size: 11px;margin: 0;">Minden jog fenntartva.<span style="color: #000000;">2010&copy Mintavállalat Zrt..</span>.</p>
131 <p style="color: #a1a1a1;font-size: 11px;margin: 0;">Nem kíván több levelet kapni tőlünk? [unsubscribe]Azonnali leiratkozás[/unsubscribe].</p>
132 </td>
133 </tr>
134 </table>
135 </td>
136 </tr>
137 </table>
138 </td>
139 </tr>
140 </table>
141 </td>
142 </tr>
143 </table>
144 </body>
145 </html>

Ha a fenti kódot szeretné letesztelni, akkor másolja azt ki az alábbi mezőből, és illessze be a szövegszerkesztőjébe, mentse el .html kiterjesztéssel, majd nyissa meg a böngészőjében.

Példa csak képekből álló HTML e-mailre:

...és a HTML kód:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
5 <title>Poplart | Poplart BTL Kommunikációs Ügynökség</title>
6 </head>
7 <body>
8 <table border="0" cellpadding="0" cellspacing="0"><tbody>
9 <tr>
10 <td> </td>
11 <td colspan="2">
12 <p style="margin: 32px 0pt 0pt; font-family: Arial; font-size: 8pt; color: rgb(0, 133, 200);">Ha nem látja a képeket, vagy hiányosan jelenik meg a levél, kattintson a<br>levelezőprogram információs sávjába és oldja fel a tiltásokat (képek megjelenítése).</p>
13 </td>
14 </tr>
15 <tr>
16 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/1-1.jpg" alt="PopLart" width="203" height="215"></td>
17 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/1-2.jpg" alt="BTL Kommunikációs" width="302" height="215"></td>
18 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/1-3.jpg" alt="ügynökség" width="317" height="215"></td>
19 </tr>
20 <tr>
21 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/2-1.jpg" alt="Örömmel tudatjuk," width="203" height="195"></td>
22 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/2-2.jpg" alt=" hogy mi lettünk" width="302" height="195"></td>
23 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/2-3.jpg" alt="a Pannon egyik BTL ügynöksége!" width="317" height="195"></td>
24 </tr>
25 <tr>
26 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/3-1.jpg" alt="A below-the-line feladatok megvalósítására tavaly meghirdetett tenderen" width="203" height="170"></td>
27 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/3-2.jpg" alt=" tucatnyi ügynökség indult." width="302" height="170"></td>
28 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/3-3.jpg" alt="Az eredmény: 2010 januárjától két új BTL ügynökséggel dolgozik a Pannon, melyből az egyik a PopLart!" width="317" height="170"></td>
29 </tr>
30 <tr>
31 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/4-1.jpg" alt="pannon" width="203" height="235"></td>
32 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/4-2.jpg" alt="pannon" width="302" height="235"></td>
33 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/4-3.jpg" alt="pannon" width="317" height="235"></td>
34 </tr>
35 <tr>
36 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/5-1.jpg" alt="2010-ben még nagyobb kihívást jelent a fogyasztók pontos, direkt, érthető és egyedi megszólítása minden cég számára." width="203" height="270"></td>
37 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/5-2.jpg" alt="Így számunkra is kiemelkedően fontos, hogy BTL kommunikációs stratégiánk és annak kivitelezése még nagyobb odafigyelést kapjon. Ezért döntöttünk amellett, hogy erre szakosodott ügynökségekkel kezdünk el dolgozni. - mondta Kallós András, a Pannon marketingskommunikációs igazgatója." width="302" height="270"></td>
38 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/5-3.jpg" alt="A Pannon üzletek karácsonyi dekorációját tavaly decemberben már mi készítettük.Büszkék vagyunk rá, és továbbra is keményen dolgozunk, hogy ügyfeleink elégedettek legyenek velünk!" width="317" height="270"></td>
39 </tr>
40 <tr>
41 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/6-1.jpg" alt="forrás: sajto@pannon.hu | Pannon Sajtó- és Információs Igazgatóság" width="203" height="272"></td>
42 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/6-2.jpg" alt="POPLART BTL Kommunikációs Ügynökség | 1146 Budapest, Istvánmezei út 2/d." width="302" height="272"></td>
43 <td><img src="http://www.poplart.hu/hirlevel/20100311/images/6-3.jpg" alt="tel.:470-0346 | fax: 470-0350 | e-mail: info@poplart.hu | www.poplart.hu" width="317" height="272"></td>
44 </tr>
45 <tr>
46 <td> </td>
47 <td colspan="3">
48 <p style="font-family: Tahoma; font-size: 8pt; color: rgb(0, 0, 0);">Amennyiben megváltoztak feliratkozási adatai, kérjük<br>az [update[6231_6823_[id]]]adatmódosításhoz kattintson ide[/update], és adja meg új adatait.<br>Ha a továbbiakban nem szeretné megkapni hírlevelünket, kérem,<br>a [unsubscribe]leiratkozáshoz kattintson ide[/unsubscribe].</p>
49 </td>
50 </tr>
51 </tbody>
52 </table>
53 [checkopen]
54 </body>
55 </html>

Ha a fenti kódot szeretné letesztelni, akkor másolja azt ki az alábbi mezőből, és illessze be a szövegszerkesztőjébe, mentse el .html kiterjesztéssel, majd nyissa meg a böngészőjében.

Példa HTML e-mail-re melynek tartalma egymást követő táblázatokból épül fel:

...és az ehhez tartozó HTML kód:

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <title>eMagyarország :: Hírlevél</title>
6 </head>
7 <body>
8 <table width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family:Arial; font-size: 12px;" >
9 <tbody><tr>
10 <td><br ></td>
11 <td>
12 <table style="width:600px" cellpadding="0" cellspacing="0" >
13 <tbody><tr>
14 <td><img src="http://images.emesz.hu/newsletter/letter/c2432/uploads/header.jpg" width="598" height="131" alt="eMagyarország" style="margin-bottom:10px" ></td>
15 </tr>
16 <tr>
17 <td>
18 <table style="width:600px;" cellpadding="0" cellspacing="0" >
19 <tbody><tr>
20 <td>
21 
22 <table style="width:600px;border:2px solid #0074A2;" cellpadding="0" cellspacing="0" >
23 <tbody><tr style="width:600px;background-color:#dcf0f9;">
24 <td width="5" style="border-bottom:2px solid #0074A2;" ><br ></td>
25 <td width="590" style="border-bottom:2px solid #0074A2;" >
26 
27 <img align="left" src="http://images.emesz.hu/newsletter/letter/c2432/uploads/arrow.jpg" width="17" height="25">
28 <p style="margin-top:7px; margin-bottom:3px;font-family:ArialBlack;font-weight:bold; font-size: 15px;" >eMagyarország Centrum Hírlevél 24.szám</p>
29 
30 </td>
31 <td width="5" style="border-bottom:2px solid #0074A2;" ><br ></td>
32 </tr>
33 <tr style="width:600px;border:2px solid #0074A2;">
34 <td width="5"><br ></td>
35 <td width="590">
36 
37 <p style="text-align:center;margin-top:5px;margin-bottom:5px;font-size:12px; color:#000;" >Hírek, események, hasznos infók<br>
38 Az eMagyarország Centrum hírlevele<br>
39 2010-04-15.</p>
40 
41 </td>
42 <td width="5"><br ></td>
43 </tr>
44 </tbody></table>
45
46 <p style="margin:0" ><br></p>
47
48 <table style="width:600px;border:2px solid #0074A2;" cellpadding="0" cellspacing="0" >
49 <tbody><tr style="width:600px;background-color:#dcf0f9;">
50 <td width="5" style="border-bottom:2px solid #0074A2;" ><br ></td>
51 <td width="590" style="border-bottom:2px solid #0074A2;" >
52 
53 <img align="left" src="http://images.emesz.hu/newsletter/letter/c2432/uploads/arrow.jpg" width="17" height="25">
54 <p style="margin-top:7px; margin-bottom:3px;font-family:ArialBlack;font-weight:bold; font-size:15px; color:#051d67;" >Tartalomjegyzék</p>
55 
56 </td>
57 <td width="5" style="border-bottom:2px solid #0074A2;" ><br ></td>
58 </tr>
59 <tr style="width:600px;border:2px solid #0074A2;">
60 <td width="5" style="border-bottom:2px solid #0074A2;" ><br ></td>
61 <td width="590" style="border-bottom:2px solid #0074A2;" >
62 
63 <ul style="list-style-type:none; margin:1em 0;padding:0" >
64 <li>1. Friss hírek</li>
65 <li>
66 <ul style="list-style-type:none; margin:0 0 1em 15px; padding:0" >
67 <li>1.1 Új szolgáltató tér a Lőrinci városi könyvtárban</li>
68 <li>1.2 Sikerrel lezárultak a Menet-2008 és a NETre Kész-2008 pályázatok</li>
69 <li>1.3 Bővült az APEH telefonon intézhető ügyeinek köre</li>
70 </ul>
71 </li>
72 </ul>
73 
74 </td>
75 <td width="5" style="border-bottom:2px solid #0074A2;" ><br ></td>
76 </tr>
77 <tr style="width:600px;border:2px solid #0074A2;">
78 <td width="5"><br ></td>
79 <td width="590">
80 
81 <ul style="list-style-type:none; margin:1em 0;padding:0" >
82 <li>2. Pályázati lehetőségek</li>
83 <li>
84 <ul style="list-style-type:none; margin:0 0 1em 15px; padding:0" >
85 <li>2.1 Hagyományos közművelődésügyi tevékenységek támogatása</li>
86 </ul>
87 </li>
88 </ul>
89 
90 </td>
91 <td width="5"><br ></td>
92 </tr>
93 </tbody></table>
94
95 <p style="margin:0" ><br></p>
96
97 <table style="width:600px;border:2px solid #0074A2;" cellpadding="0" cellspacing="0" >
98 <tbody><tr style="width:600px;background-color:#dcf0f9;">
99 <td width="5" style="border-bottom:2px solid #0074A2;" ><br ></td>
100 <td width="590" style="border-bottom:2px solid #0074A2;" >
101 
102 <img align="left" src="http://images.emesz.hu/newsletter/letter/c2432/uploads/arrow.jpg" width="17" height="25">
103 <p style="margin-top:6px; margin-bottom:3px;font-family:ArialBlack;font-weight:bold; font-size:13px; color:#000;" ><span style="font-size:16px; color:#051d67" >1.2</span> <span style="color:#051d67; " >Sikerrel lezárultak a Menet-2008 és a NETre Kész-2008 </span><span style="color: rgb(0, 51, 102); " >pályázatok</span></p>
104 
105 </td>
106 <td width="5" style="border-bottom:2px solid #0074A2;" ><br ></td>
107 </tr>
108 <tr style="width:600px;border:2px solid #0074A2;">
109 <td width="5"><br ></td>
110 <td width="590">
111 
112 <p style="font-family: Arial; font-size:13px; margin:1em 0; color: #000;" >Befejeződtek a MENET-2008. és a NET-re Kész - 2008. pályázatok adminisztratív utómunkái, a két pályázat hatalmas sikert aratott.</p>
113 <p style="font-family: Arial; font-size:11px; margin:1em 0; color: #000;" >Bővebben:<br>
114 <a style="" href="http://www.emagyarorszag.hu/object.1082dfa3-a2bd-427c-a582-d9def434137c.ivy" ><span style="color: rgb(51, 102, 255); " >http://www.emagyarorszag.hu/object.1082dfa3-a2bd-427c-a582-d9def434137c.ivy</span></a></p>
115 
116 </td>
117 <td width="5"><br ></td>
118 </tr>
119 </tbody></table>
120
121 <p style="margin:0" ><br></p>
122
123 <table cellpadding="0" cellspacing="0" border="0" width="600" >
124 <tbody><tr>
125 <td><img src="http://images.emesz.hu/newsletter/letter/c2432/uploads/gradient-divider.jpg" width="598" height="15" alt="eMagyarország"></td>
126 </tr>
127 </tbody></table>
128 <table style="width:600px;border:2px solid #0074A2;" cellpadding="0" cellspacing="0" >
129 <tbody><tr style="width:600px;border:2px solid #0074A2;background-color:#dcf0f9;">
130 <td width="5" style="border-bottom:2px solid #0074A2;" ><br ></td>
131 <td width="590" style="border-bottom:2px solid #0074A2;" >
132 
133 <p style="text-align:center; margin:1em 0;font-family: Arial; font-size:11px; color: #051d67;" ><strong>Összeállította:</strong> Csukásné Horváth Edina</p>
134 <p style="font-family: Arial; font-size:11px; margin:1em 0; color: #000;" >Irodánk engedélyt ad e hírlevél tatalménak reprodukálására az eMagyarország Centrum, mint forrás megjelölésével. Noha forrásainkat kellő körültekintéssel választottuk ki, a nem hivatalos forrásból átvett információkat ellenőrizni nincs módunk, így azokért felelősséget vállalni sem tudunk.</p>
135 
136 </td>
137 <td width="5" style="border-bottom:2px solid #0074A2;" ><br ></td>
138 </tr>
139 <tr style="width:600px;border:2px solid #0074A2;">
140 <td width="5"><br ></td>
141 <td width="590">
142 
143 <p style="text-align:center; font-family: Arial; font-size:11px; color: #181818;margin:1em 0;" >NT Nonprofit Közhasznú Kft.<br>
144 Székhely: 1063. Munkácsy Mihály u. 16.<br>
145 Levélcím 1398. Budapest, Pf. 570<br>
146 Tel:413-7751, Fax: 321-7819<br>
147 <a href="mailto:info@emagyarorszag.hu" style="font-size: 11px; "><span style="color: rgb(51, 102, 255); " >info@emagyarorszag.hu</span></a>; <a href="http://www.emagyarorszag.hu" style="font-size: 11px; "><span style="color: rgb(51, 102, 255); " >www.emagyarorszag.hu</span></a></p>
148 
149 </td>
150 <td width="5"><br ></td>
151 </tr>
152 </tbody></table>
153 
154 </td>
155 </tr>
156 <tr style="width:600px;border:2px solid #0074A2;">
157 <td><br ></td>
158 </tr>
159 </tbody></table>
160 </td>
161 </tr>
162 <tr>
163 <td><img src="http://images.emesz.hu/newsletter/letter/c2432/uploads/footer.jpg" width="598" height="168" alt="eMagyarország"></td>
164 </tr>
165 </tbody></table>
166 </td>
167 <td><br ></td>
168 </tr>
169 </tbody></table><p>
170 [checkopen]</p>
171 </body>
172 </html>

Ha a fenti kódot szeretné letesztelni, akkor másolja azt ki az alábbi mezőből, és illessze be a szövegszerkesztőjébe, mentse el .html kiterjesztéssel, majd nyissa meg a böngészőjében.

Végezetül pedig egy példa arra, hogy hogyan adjunk bal margót a teljes tartalmi résznek anékül, hogy minden egyes HTML elemnél egyesével állítanánk be azt a style attribútum használatával:

...és az ehhez tartozó HTML kód:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
5 <title>Williamson & Klark Corporate Finance Kft.</title> 6 <style type="text/css">
7 h1 {
8 color:#792411; font-weight:normal;font-size:24px;font-family:Georgia, Arial;
9 }
10 h2 {
11 color:#792411; font-weight:normal;font-size:18px;font-family:Georgia, Arial;
12 }
13 h3 {
14 color:#6f1400; font-weight: normal; font-size: 18px; font-family: "Times New Roman", Times, serif;margin-top: 0;
15 }
16 h4 {
17 color:#dac7af;font-family: Georgia, Arial; font-size: 20px;font-weight: normal; margin-top: 0;
18 }
19 a {
20 color:#792411; text-decoration:underline;
21 }
22 </style>
23 </head>
24 <body style="background-color:#bfbfbf;">
25 <table style="width: 100%; height: 100%;" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
26 <td></td>
27 <td style="width: 600px;" valign="top">
28 <table style="background-color: rgb(255, 255, 255); width: 600px;" border="0" cellpadding="0" cellspacing="0"><tbody>
29 <tr>
30 <td colspan="2" class="header"><img src="http://images.emesz.hu/newsletter/letter/c10351/uploads/header_wandk.jpg"height="140" width="600"></td>
31 </tr>
32 <tr>
33 <td colspan="2" height="30"></td>
34 </tr>
35 <tr>
36 <td class="content" style="width: 400px; font-family: Arial; font-size: 12px;" valign="top">
37 <table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
38 <td style="width: 10px;" ></td>
39 <td style="width: 380px;" >
40
41 <h1 style="color: rgb(121, 36, 17); font-weight: normal; font-size: 24px; font-family: Georgia,Arial;" >Tisztelt Ügyfelünk!</h1>
42 <p style="text-align: justify; font-family: Arial; font-size: 12px;" >Cégünk egyik  szolgáltatása, hogy az általunk tapasztalt jó híreket továbbítjuk ügyfeleinknek. Ezen szolgáltatásunkkal szeretnénk rávilágítani arra, hogy az üzleti és gazdasági élet nagyobb mértékben sikeres, mint ahogyan azt a hírekből kiolvashatjuk.</p>
43 <p style="font-family: Arial; font-size: 12px;" >Reményeink szerint az Önök napjait is örömtelibbé teszi.</p>
44 <h2 style="color: rgb(35, 31, 32); font-weight: normal; font-size: 18px; font-family: Georgia,Arial;" >Mai jó hírünk: Minden nyolcadik euró magyar zsebbe vándorol</h2>
45 <img src="http://images.emesz.hu/newsletter/letter/c10351/uploads/Oromhir_kepek/eu2.jpg" align="left" height="73" width="130"><p style="text-align: justify; font-family: Arial; font-size: 12px;" >Kimagaslóan jól teljesít hazánk az uniós pályázatok terén: ugyanis uniós szinten minden nyolcadik euró magyar pályázóhoz kerül, mindemellett a második legnagyobb forráslekötést Magyarország jelentette a tagállamok közül ? derül ki az Európai Bizottság jelentéséből. A kiírt pályázatok jelentős hányada a gazdasági válságból kiindulva a munkahelymegőrzésre fókuszált, amelyekből legismertebbek és legnépszerűbbek az Országos Foglalkoztatási Alapítvány ?Megőrzés? című pályázata, valamint az NFÜ TÁMOP kiírásai lettek.</p>
46 <p style="font-family: Arial; font-size: 12px;" ><b></b> </p>
47  
48 </td>
49 <td style="width: 10px;" ></td>
50 </tr></tbody></table>
51 </td>
52 <td class="rightside" style="width: 200px;" valign="top">
53
54 <table style="width: 200px;" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
55 <td style="background-color: rgb(255, 255, 255); border-top: 1px solid rgb(111, 20, 0); border-bottom: 1px solid rgb(111, 20, 0); border-left: 1px solid rgb(111, 20, 0);" >
56 <table style="border-bottom: 1px solid rgb(111, 20, 0); border-left: 1px solid rgb(111, 20, 0); background-color: rgb(240, 233, 213); margin: 1px 0pt 1px 1px; width: 198px; border-top: 1px solid rgb(111, 20, 0);" cellpadding="0" cellspacing="10"><tbody><tr>
57 <td>
58 <p style="text-align: center;" ><img src="http://images.emesz.hu/newsletter/letter/c10351/uploads/logo-peach.jpg"height="36" width="150"></p>
59 <p style="color: rgb(121, 36, 17); font-size: 11px; text-align: right;" >1051 Budapest,<br>Hercegprímás utca 3. II/2.<br><b>Tel.:</b> +36-1-354-3390<br><b>Fax:</b> +36-1-354-3391<br><b>E-mail:</b> <a href="mailto:info@williamsonandklark.hu"style="color: rgb(121, 36, 17);" >info@williamsonandklark.hu</a><br><b>Honlap:</b> <a href="http://www.williamsonandklark.hu"style="color: rgb(121, 36, 17);" >www.williamsonandklark.hu</a><br _></p>
60 </td>
61 </tr></tbody></table>
62 </td>
63 </tr></tbody></table>
64 <p style="text-align: center; margin: 1em;" ><br></p>
65
66 </td>
67 </tr>
68 <tr>
69 <td colspan="2" class="footer" style="background-color: rgb(6, 3, 4); color: rgb(174, 173, 173); font-size: 11px;" >
70 <p style="margin: 10px; text-align: justify;" >Ezt az e-mailt jóváhagyott feliratkozása kapcsán küldtük Önnek a SalesAutopilot szoftver segítségével, a(z) [email] e-mail címre. Amennyiben megváltoztak feliratkozási adatai, kérjük az [update[7753_7730_[id]]]adatmódosításhoz kattintson ide[/update], és adja meg új adatait. Ha a továbbiakban nem szeretné megkapni hírlevelünket, kérem, a [unsubscribe]leiratkozáshoz kattintson ide[/unsubscribe].</p>
71 <img src="http://images.emesz.hu/newsletter/letter/c10351/uploads/mm-logo.jpg"height="60" width="255"><p style="margin: 10px; text-align: justify; color: rgb(91, 90, 90); font-family: Verdana; font-size: 9px;" >Leveleinket a <a target="_blank" href="http://www.marketingszoftverek.hu/mailmaster" _>MailMaster</a> szoftver juttatja el Önhöz. A személyes adatok jogszerű kezelését és feldolgozását a <a target="_blank" href="http://www.marketingszoftverek.hu/ugyfelkozpont/ceginformacio" _>MarketingSzoftverek</a> végzi.</p>
72 </td>
73 </tr>
74 </tbody></table>
75 </td>
76 <td></td>
77 </tr></tbody></table>
78 <p>[checkopen]</p>
79 </body>
80 </html>

Ha a fenti kódot szeretné letesztelni, akkor másolja azt ki az alábbi mezőből, és illessze be a szövegszerkesztőjébe, mentse el .html kiterjesztéssel, majd nyissa meg a böngészőjében.

Kapcsolódó bejegyzések

Levélsablon létrehozása a SalesAutopilot beépített sablonjaiból (sablonszerkesztővel, "hétköznapi" felhasználók számára) (7:29 perc videó)

HTML és TEXT levél (email) létrehozása, szerkesztése és egyéb funkciói

Igényes levelek létrehozása EDM Designerrel

HTML email készítés EDM Designer használatával - meglévő sablonból (23:53 perc videó)

Cikkek ebben a szekcióban

HTML e-mail és e-mail sablon készítés szabályai

HTML e-mail és e-mail sablon készítés szabályai

I. Bevezető