2022.06.01.

Így csinálj reszponzív e-mail aláírást HTML-ben + Ingyenes egyedi sablonok

igy-csinalj-professzionalis-e-mail-alairast-html-ben-ingyenes-egyedi-sablonok

Egy profi e-mail aláírás segít fellendíteni a márkát, és azt a benyomást kelti a címzettben, hogy egy “hivatalos” levelet kapott. Már kisebb KKV cégeknél is jellemző, hogy az összes munkatársnak van egyedi e-mail aláírása, ezzel is sugallják, hogy “ez ám egy komoly cég, adunk a részletekre”. Amolyan online névjegykártya.

A márkaerősítésen kívül néhány marketing trükköt is bele lehet csempészni, úgymint promóciós banner, Call to Action, közösségmédia hivatkozások, kuponok. Ezáltal az egyszerű “mezei” e-mailezésből is lehet szerezni ügyfelet, vagy vevőt.

Tartalmilag mi legyen benne?

  • Név – Ki küldte az e-mailt.
  • Beosztás/munkakör/szakterület – Ha a feladó egy vállalatot képvisel, akkor a betöltött munkakört is ajánlott feltüntetni. Ha egyéni vállalkozó akkor azt, hogy milyen területen dolgozik.
  • Telefonszám(ok) – Legalább egy telefonszámot érdemes belerakni, amin keresztül el lehet érni a feladót.
  • E-mail cím – ez feleslegesnek tűnhet, mivel arról megy az e-mail, de sok esetben hasznos, ha ez is benne van az aláírásban.
  • Hivatkozás a weboldalra – Ha tartozik a vállalkozáshoz honlap, akkor mindenképp érdemes a linkjét beletenni.
  • Közösségimédia linkek – Csak olyan csatornára érdemes linkelni, ami karban van tartva, az irreleváns közösségi fiókokat érdemes kerülni.
  • Arckép – Ez segít az olvasónak a névhez egy arcot kapcsolni, ettől személyesebb lesz a levél, ami pozitívan befolyásolja a kommunikáció minőségét.
  • Üzleti címe / cégadatok – Ha a feladó egy fizikai üzletet képvisel, tüntesd fel az elérhetőségeit.
  • Logó – A márka ismertség és az egységes arculat miatt fontos.
  • Mottó – A vállalkozásra/személyre jellemző mottó, vagy idézeti segíthet bizalmat építeni a címzettben.

Nem kell mindent belerakni a listából! Ne legyen túl hosszú és ne tartalmazzon túl sok információt. Érdemes megfontolni a kétnyelvű aláírást is, főleg ha külföldi ügyfelekkel is van kapcsolattartás.

Milyen e-mail aláírási formák léteznek?

Többféleképpen is meg lehet valósítani egy aláírást, a kérdés az, hogy mennyi kapacitás van rá, illetve a cégnél mennyire kötöttek a formai követelmények. Általában az arculati elvárásoknak (logó, színek, stílus elemek) meg kellene felelni, hogy egy egységes képet kapjon az olvasó a cégről.

Kép

Az egész aláírás 1 darab kép. Ezt onnan ismered fel, hogy homályos és általában nem megfelelő a szöveg mérete a képen, emiatt elég ronda az egész. Nagy hátránya, hogy ha bármit módosítani akarsz rajta, akkor újra ki kell vágni az egészet. Ezenkívül a funkcióját sem tölti be, mert hivatkozásokat nem tudsz belerakni. Ezt általában akkor használják, ha valamiért nem tudják megoldani a HTML típusú aláírást, de ragaszkodnak hozzá, hogy valamilyen “dizájnos” formában legyenek elrendezve az infók.

Szöveg

Egyszerű szöveges aláírás, logóval, néhány ikonnal. Ezt használják a leggyakrabban, mert technikai tudás nélkül, a levelező szövegszerkesztőjével is meglehet valósítani. Előnye, hogy egyszerűen lehet módosítani és a szöveg arányos lesz a levél többi részével. Hátránya, hogy kreatívabb elrendezéseket nem tudunk vele megvalósítani.

HTML

HTML típusú aláírásra akkor van szükség, amikor az információkat több oszlopban szeretnénk megjeleníteni. Ez abban különbözik az egyszerű szövegtől, hogy be lehet illeszteni különböző méretű, színű és formájú képeket, hivatkozásokat, gombokat, vonalakat, egyéb dizájn elemeket.

A módszert tekintve az e-mail aláírás a HTML e-mailek/hírlevelek témakörébe tartozik, hiszen itt is meg kell felelnünk a levelező kliensek különböző kódolási sajátosságainkat. Az aláírás elrendezését táblázatok segítségével lehet kialakítani, a stílusokat pedig inline módon kell megadni. Ennek oka, hogy többféle operációsrendszer és e-mail kliens létezik és mindegyik másként értelmezi a HTML kódot.

Lehet-e reszponzív egy e-mail aláírás?

Persze! Nagyon magas a telefonos e-mail olvasási arány, ami azt jelenti, hogy elég kevés hely áll rendelkezésre ahhoz, hogy elrendezzük az információkat. Ezért az aláírásának mobilbarátnak kell lennie.

A legegyszerűbb mobilbarát kialakítás, ha az egész aláírás nem szélesebb 360px-nél. Ez nagyjából kifér a legtöbb mobilkijelzőn. Ha több oszlopos az elrendezés, akkor pedig különböző táblázat igazítási módszerekkel lehet megoldani, hogy az elemek kisebb kijelzőkön egymás alá kerüljenek.

Van itt Neked néhány kulcsrakész HTML aláírás sablon

3 különböző sablon közül választhatsz a célodnak megfelelően.

1. Egyszerű szöveges aláírás

2. Arcképes aláírás

3. Céges aláírás

Szeretnéd kipróbálni? Hova küldjem a sablonokat?

A leggyakrabban használt levelező klienseken tesztelt megjelenés!

  • Outlook 2013/2016/2019/outlook.com
  • Thunderbird
  • iPad
  • iPhone 6/7/8/X/11/12
  • Android 6/7/8/9/10/11
  • Gmail (Chrome, Firefox, Android, iOS)
  • Yahoo! (Chrome, Firefox, Android, iOS)

Hogyan tudod ezeket használni?

  1. Töltsd le a csomagot majd tömörítsd ki, válaszd ki a számodra szimpatikus sablont és nyisd meg egy szövegszerkesztőben.
  2. Cseréld ki a képeket, ikonokat tetszés szerint. Használj nagyobb képméretet, mint amekkorában megjeleníti a böngésző, így nem lesz homályos. A képeket érdemes felrakni egy tárhelyre, ahonnan egyszerűen be tudod majd linkelni az aláírásba.
  3. Cseréld ki színeket sablonban.
  4. Cserléd ki a szöveges információkat, telefonszámokat.
  5. Állíts be az összes linket a megfelelő hivatkozásra.

Amire nincs szükséged azt töröld ki a sablonból. Ha véglegesre szerkesztetted az aláírást, akkor hozzá lehet adni különböző kliensekhez. Az levelező rendszerben keresd a forráskód beillesztése lehetőséget, amit általában <> ikonnal jelölnek.

Gmail

Vannak olyan levelező rendszerek, amik nem biztosítanak lehetőséget a forráskód beillesztésére. Ilyen esetekben nyisd meg a sablont a böngésződben, jelöld ki az egészet CTRL-A-val, majd másold be az aláírás mezőbe.

Érdekel a HTML e-mailek, hírlevelek technikai háttere?

Minikurzusunkon megtanulhatod hogyan lehet megtervezni és lekódolni egy reszponzív HTML e-mailt, vagy hírlevelet. A kurzusban található sablonokkal hatékonyon e-mail kampányokat készíthetsz bármilyen iparághoz, céges eseményhez, vagy promóciós ajánlathoz. Részletek



Tetszett a bejegyzés?

Iratkozz fel és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.

.
Nekem való?

Maradtak még kérdéseid?

Ha nem vagy biztos benne, hogy ez Neked való, vagy további kérdéseid vannak a kurzusokkal kapcsolatban,
írd meg chaten és 48 órán belül válaszolok!

Kérdezek!

Kövesd közösségi csatornáinkat is!

Beavatlak a frontend fejlesztői munka rejtelmeibe, mesélek a szabadúszáról, mutatok hasznos kódrészeleteket és engem is jobban megismerhetsz.