Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email Design
Webdesign

HTML email sablon létrehozása az alapoktól kezdve

by
Length:LongLanguages:

Hungarian (Magyar) translation by Szabó Péter (you can also view the original English article)

Final product image
What You'll Be Creating

Egy folyamat megértésének legjobb módja, hogy te magad mész végig rajta, az elejétől a végéig. Ma pont ezt fogjuk megtenni az email dizájnnal, mivel egy HTML email sablont készítünk, az alapoktól kezdve.

Vágjunk bele

Kezdésként érdemes megemlíteni, hogy honnan szereztem a hozzávaló erőforrásokat.

Ahogy azt már az előző bemutatóban átbeszéltük, a HTML email dokumentumodat egy XHMTL doctype-pal kell elkezdened:

Ha ezt elrendeztük, nekiállhatunk a szerkezet többi részének felépítéséhez.

A Body és a fő táblázat létrehozása

Először is egy mindent átfogó szerkezetet adunk az emailünknek, a <body> taggel kezdve. A body tag margóját és térközét nullára állítjuk, hogy elkerüljük a nem várt üres részeket.

Hozzáadunk egy táblázatot is 100% szélességgel. Egy egy valódi body tagként működik az emailünk számára, mivel a body tag stilizálása nem teljes mértékben támogatott. Ha szeretnél egy háttérszínt hozzárendelni az emailed 'body' részéhez, akkor helyette ehhez a nagy táblázathoz kell beállítanod.

Állítsd be a cellaközt és cellatávot nullára, hogy elkerüld a váratlan üres részeket a táblázatban.

Megjegyzés: Az összes táblázatunkat border="1"-en hagyjuk, így látni fogjuk menet közben az elrendezésünk vázát. A végén majd egy egyszerű Keresés és Cserével eltávolítjuk őket.

1

Ha egy attribútum létezik HTML-ben, használjuk azt CSS helyett

Most helyezz el egy középre igazított, 600 pixel széles táblázatot a container táblázaton belül. A 600 pixel egy megbízható maximális szélesség az emailek kényelmes megjelenítéséhez a legtöbb asztali és webmail kliensen, a legtöbb képernyőfelbontáson.

Állítsd be ezt a szélességet HTML használatával CSS helyett, a width attribútummal. A HTML email fejlesztés aranyszabálya: ha egy attribútum létezik HTML-ben, akkor inkább azt használjuk CSS helyett.

A kis 'Hello!' üdvözletünket le fogjuk cserélni erre a táblára:

Hozzáadtunk egy inline stílus tulajdonságot is, ami a border-collapse tulajdonságot collapse-ra állítja. Ha ezt nem tesszük meg, az Outlook újabb verziói egy kis térközt hagynak a táblázatunk és a szegélyünk között.

2

A szerkezet és a fejléc kialakítása

A dizájnunkban láthatjuk, hogy az email három logikai részre tagolódik, ezért létre fogunk hozni egy sort mindegyiknek.

Duplázzuk meg a sima sort és így már összesen három sorunk lesz. Megváltoztattam a szöveget bennük, így könnyen azonosítani tudjuk az egyes sorokat.

3

Most kiszínezzük a dizájnnak megfelelően. Mivel a bgcolor egy érvényes HTML attribútum, ezt fogjuk használni a háttérszín beállítására a CSS helyett. Ne felejtsd el a teljes, hat karakteres hexakódot használni, mivel a három karakteres rövidítés nem mindig működik.

4

Oké, ezután a Row 1-re összpontosítunk. Szeretnénk kiigazítani a cella térközét, majd beilleszteni a képünket.

Térköz használata

Amikor térközt használunk egy emailben, mindig meg kell határozni minden egyes értéket (felső, jobb, alsó és bal), különben nem várt eredményeket kaphatunk. Elvileg itt használhatsz rövidítéseket, pl.: padding: 10px 10px 8px 5px;, de ha valami problémát okozna, akkor a teljes formát írd le, pl.: padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.

Ha még ennél is nagyobb problémáid akadnak a térközzel (például ha a küldő platformod leszedi a CSS-t róla), akkor egyáltalán ne használd. Egyszerűen csak üres cellákkal csinálj teret. Nem kell térköz GIFeket használni, csak add hozzá a style="line-height: 0; font-size: 0;"-t a cellához, helyezz el benne egy &nbsp;-t és adj neki magasságot vagy szélességet Itt egy példa rá:

Figyelj rá, hogy a TD tageken biztonságosan lehet térközt alkalmazni, de a P vagy DIV tageken nem. Azok sokkal kiszámíthatatlanabbul viselkednek.

Ezért használni fogunk némi inline CSS-t a cella térközének megadására. Ezután beillesztjük a képünket, hozzárakjuk az alt szöveget és a style="display:block;"-ot, ami egy olyan általános javítás, ami megakadályozza az email klienseket abban, hogy réseket hagyjon a képeid alatt. A képet középre igazítjuk az align="center" hozzáadásával a td tagunkhoz. Hozzáadunk egy alt taget is, ami azért fontos, mert amikor az emailunk először betöltődik, a legtöbb esetben nem mutatja a képeket.

Megjegyzés: Ha a fejléced tartalma nagyon fontos az üzeneted szempontjából, ne használj csak-képből álló fejlécet. Figyelj rá, hogy a képeket alapból a legtöbb kliens blokkolja, ezért ha van valamilyen létfontosságú része az emailednek, azt soha ne képként helyezd el benne. Ugyanakkor ebben a példában a fejlécem meglehetősen felesleges.

6

Egy tartalmi rész létrehozása

Először is adunk némi térközt a középső cellának, így a benne lévő táblázat körül lesz egy kis hely pont úgy, ahogy a dizájnunkban is szerepel.

7

Most hozzá fogunk adni egy táblázatot három sorral a fő tartalmunkhoz – egyet a szalagcímnek, egyet a bemutatkozó szövegnek, és egyet a két oszlopos sornak. Ennek a táblázatnak a szélességét 100%-ra állítjuk ahelyett, hogy pixelben adnánk meg, mivel ez segíthet a későbbiekben, amikor reszponzívvá akarjuk tenni az emailünket. Ha mindig pixeles szélességeket adsz meg mindenhol, akkor a media query-k sok értéket felül fognak írni. Ha a táblázatod szélességét százalékos alapon adod meg, utána pedig beállítod a szülő elem szélességét, minden megfelelően fog igazodni.

8

Most hozzáadjuk a tartalmunkat és némi térközt a középső cellához.

9

Utána hozzáadjuk a kétoszlopos tartalmunkat a Row 3-hoz. Mivel szeretnénk 'margót' a két cella közé, de a margó nem támogatott, létre fogunk hozni egy háromoszlopos táblázatot, egy üres cellával a két másik oszlop között.

Bármennyire is szeretek a százalékokhoz ragaszkodni, amikor egy konkrét méretű tartalom van, akkor nehéz átalakítani azt százalékra (ebben a példában az oszlopoknak 48,1%-nak kellene lennie, ami zavaró lehet). Ez okból, mivel a két képünk 260px széles, szintén 260px széles oszlopokat csinálunk, középen 20px-es margójú cellával. (Ez összesen 540px, ami a 600px széles táblázatunk mínusz a 30px-es térköz a két oldalán.) Figyeljünk rá, hogy a margó cellában lenullázzuk a betűméretet és sormagasságot, és adjunk hozzá egy nem megtörő szóköz (&nbsp;) karaktert.

A valign-t is állítsuk be "top"-ra mindkét cellánál, így függőlegesen a tetejére lesznek igazítva, még akkor is, ha az egyik cellában több szöveg van, mint a másikban. Az alapértelmezett függőleges igazítás a "middle".

10

Most adjuk hozzá a képeinket és tartalmainkat azokhoz az oszlopokhoz. Mivel több sorra lesz szükségünk, elhelyezünk egy másik táblázatot benne, mivel nem használhatjuk a colspan és rowspan tageket. A képek közé szintén rakunk némi térközt, és lemásoljuk mindegyik oszlopa.

Itt a képeink szélességét HTML használatával az oszlopszélesség 100%-ára állítottuk be. Megismételve, ez azért van, hogy ha ezt az emailt reszponzívvá akarjuk tenni, akkor csak a media query-ket használhatjuk a szülő elem szélességének megváltoztatásához. Felül kell írnunk a pixelekben megadott magasságot, mivel a style="height: auto" nem fog működni mindenhol (khm, khm, Outlook). Ezért pixelek használatával adjuk meg. Ez azt jelenti, hogy a height: auto!important-ot kell beállítani azokon a képeken, amik media query-t használnak a pixel értékek felülírására, de ezt megoldhatjuk egy egyszerű osztállyal. Mivel a szélességet százalékban adtuk meg, ezért azt nem kell felülírni. Minél kevesebb dolgot kell felülírni, annál jobb.

13

A lábléc

Most hozzáadjuk a térközünket a lábléc sorunkhoz.

14

A cellán belül elhelyezünk egy másik táblázatot, hogy megkapjuk a két oszlopunkat.

15

Létrehozunk egy másik kis táblázatot a közösségi média ikonjainknak. A szülő celláját beállítjuk align="right"-ra. Figyelj rá, hogy a border="0" ezeken a kép linkeken (hogy elkerüljük a kék link szegélyt), és ne felejtsd a display:blockot.

17

Most hozzáadjuk a szövegünket és adunk egy szélességet a celláinknak, csak a biztonság kedvéért, még akkor is, ha sok whitespace van közöttük. Ezt a cellát 75%-ra állítjuk, és a másikat pedig 25%-ra.

És meg is van! Kész az elrendezésünk.

Érvényesítés

Futtassuk le a W3C Validatoron, hogy lássunk, semmi sem rossz vagy hibás Ha idáig pontosan követtél, akkor azt fogja mondani, hogy átmentél.

email-build-valid

Ezután végigfuttatunk egy Litmus tesztet, hogy biztosak legyünk benne, az emailünk szerkezete nagyszerűen működik. Íme az én tesztem összegzése:

email-build-litmus
Nézd meg online

Szövegünk stilizálása

Az első sorunk a fejléc. A b taget használjuk félkövér szöveg létrehozására, mert ahogy azt már tudjuk, ha létezik HTMLben, akkor azt használjuk CSS helyett.

Ezt az inline stílust hozzáadjuk a többi szövegcellához is:

Ezután a lábléc szövegét kell stilizálnunk, valamint elhelyezni a leiratkozás linkünket. A leiratkozás linkünket CSS és a HTML <font> tag használatával stilizáljuk. Ennek a megduplázása a legjobb mód arra, hogy biztosítsuk, a linkjeid többé ne az alapértelmezett kék színnel jelenjenek meg.

20

És meg is vagyunk! Minden benne van. Itt az idő, hogy kikapcsold a szegélyeket és megnézd, milyen szép. Menj végig rajta és cseréld le a border="1" minden előfordulását border="0"-ra.

21

Ezen a ponton egy kicsit úgy néz ki, mintha lebegne a fehér térben, ezért menjünk fel az első 600px széles táblázatunkhoz és adjuk hozzá:

Most már nem úgy néz ki, mint ami lebegne. Végső simításként hozzáadok egy 30px-es alsó térközt a legelső cella aljához, hogy megakadályozzam az emailünk hirtelen megszakadását az alján néhány webmail kliensben (mint az Apple Mail), és 10px térközt a tetején, mert így a kék fejlécünk egy kicsit levegősebb lesz.

23

És ennyi! Készen állsz a végső próbára.

email-build-litmus-finished
Nézd meg online

Röviden ennyi!

Mielőtt végleg befejeznénk, ha használtál bármilyen kommentet, akkor szabadulj meg tőlük. Némelyik email kliensnek a torkán akadhatnak a kommentek, ezért nem a legokosabb, ha szükségtelen kód van bárhol a fájljaidban.

Itt az idő a végső teszt elvégzésére, és utána a HTML emailed készen áll az elküldésre!

Vidd a következő szintre, amit tanultál, nézd meg a következő bemutatókat:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.