Reszponzív e-mail designt tervezni szerkesztése
Innen: Hogyankell.hu
Figyelem: Nem vagy bejelentkezve. Ha szerkesztesz, az IP-címed nyilvánosan látható lesz a laptörténetben. Ha bejelentkezel vagy regisztrálsz, a szerkesztéseid a felhasználónevedhez lesznek társítva, egyéb hasznos dolgok mellett.
A szerkesztés visszavonható. Kérlek ellenőrizd alább a változásokat, hogy valóban ezt szeretnéd-e tenni, majd kattints a lap mentése gombra a visszavonás véglegesítéséhez.
Aktuális változat | A te változatod | ||
1. sor: | 1. sor: | ||
== Hogyan kell reszponzív e-mail designt tervezni? == | == Hogyan kell reszponzív e-mail designt tervezni? == | ||
− | [[Fájl: | + | [[Fájl:reszponziv_email_design.jpg|right|250 px]]Ma már szinte mindenki okostelefonnal vagy tablettel a kezében jön-megy, amely eszközöket a tulajdonosaik elsősorban e-mailek olvasására használnak a hírek böngészése és az információk keresése mellett (KutatóCentrum – Smart Phone Report 2013 ősz és Tablet Report 2012). „Mobil világunkban” egyre fontosabbá válik tehát, hogy e-mail marketing kampányaink során képernyőbarát üzeneteket (hírlevelek, direkt marketing levelek) tervezzünk. Cikkünkben néhány tanácsot adunk ahhoz, hogy mire figyeljünk a „mobil-first” szemléletnek eleget tevő e-mail design kialakításakor. Ha célcsoportunk mobileszközön is megnyitható és kiválóan olvasható üzeneteket kap kézhez, és nem kell bosszankodnia az e-mail hiányos megjelenése miatt, akkor a felhasználói élmény növekedésével párhuzamosan nagy valószínűséggel a megnyitások és a weboldalunkra történő átkattintások számát is jelentősen növelhetjük, és az adatbázisunkból sem veszítünk feliratkozókat. |
== Lépések == | == Lépések == | ||
16. sor: | 16. sor: | ||
#'''Alkalmazzunk egyszerű és jól olvasható betűket!''' A könnyű olvashatóság érdekében használjunk letisztult, olvasható méretű betűket, és kerüljük a túl sok kiemelést, a zavaró aláhúzásokat, egyéb díszítéseket! | #'''Alkalmazzunk egyszerű és jól olvasható betűket!''' A könnyű olvashatóság érdekében használjunk letisztult, olvasható méretű betűket, és kerüljük a túl sok kiemelést, a zavaró aláhúzásokat, egyéb díszítéseket! | ||
#'''Illesszünk be kis felbontású fotókat!''' Ha fotót is elhelyeznénk az e-mailünkben, akkor válasszunk kevés (max. 2-3) és kis méretű, kis felbontású fotót. Sok és nagy méretű fotót tartalmazó e-mail nehezen töltődne be a mobileszközökön. A csatolt fotókat pedig kerüljük, mert az e-mail kliensek máshogy kezelik ezeket. Ehelyett a fotó(k) webtárhelyre kihelyezett címét linkelve helyezzük el az e-mail HTML-jébe! | #'''Illesszünk be kis felbontású fotókat!''' Ha fotót is elhelyeznénk az e-mailünkben, akkor válasszunk kevés (max. 2-3) és kis méretű, kis felbontású fotót. Sok és nagy méretű fotót tartalmazó e-mail nehezen töltődne be a mobileszközökön. A csatolt fotókat pedig kerüljük, mert az e-mail kliensek máshogy kezelik ezeket. Ehelyett a fotó(k) webtárhelyre kihelyezett címét linkelve helyezzük el az e-mail HTML-jébe! | ||
− | #'''Használjunk könnyen kattintható akciógombokat!''' Az akciógombok méretével kapcsolatban az az „aranyszabály”, hogy ujjbegynyi méretűek legyenek, hogy a levél olvasója az érintőképernyőn könnyen le tudja nyomni őket. Az egymás alatt, illetve mellett elhelyezett akciógombok pedig olyan távolságban legyenek egymástól, hogy külön-külön még egyszerűen | + | #'''Használjunk könnyen kattintható akciógombokat!''' Az akciógombok méretével kapcsolatban az az „aranyszabály”, hogy ujjbegynyi méretűek legyenek, hogy a levél olvasója az érintőképernyőn könnyen le tudja nyomni őket. Az egymás alatt, illetve mellett elhelyezett akciógombok pedig olyan távolságban legyenek egymástól, hogy külön-külön még egyszerűen lekattinthatók legyenek. |
== Tippek == | == Tippek == | ||
31. sor: | 31. sor: | ||
*Hírleveleink, eDM-jeink kiküldése előtt ellenőrizzük le, hogy a különböző e-mail kliensek, illetve alkalmazások hogyan jelenítik meg a kifejezetten hozzájuk optimalizált e-mailjeink designját! | *Hírleveleink, eDM-jeink kiküldése előtt ellenőrizzük le, hogy a különböző e-mail kliensek, illetve alkalmazások hogyan jelenítik meg a kifejezetten hozzájuk optimalizált e-mailjeink designját! | ||
− | *Mivel folyamatosan jelennek meg újabb és újabb eszközök, platformok és alkalmazások, tehát célcsoportunk is többféle megoldáson keresztül kezeli, nyitja meg és olvassa az e-mailjeit, ezért az újdonságokat kövessük nyomon, és optimalizáljuk hozzájuk | + | *Mivel folyamatosan jelennek meg újabb és újabb eszközök, platformok és alkalmazások, tehát célcsoportunk is többféle megoldáson keresztül kezeli, nyitja meg és olvassa az e-mailjeit, ezért az újdonságokat kövessük nyomon, és optimalizáljuk hozzájuk e-mailjeink designját! |
− | *Fontos konverzióktól | + | *Fontos konverzióktól eshetünk el, ha figyelemfelkeltő e-mailünk után a potenciális vásárló az e-mailünkből átkattint a weboldalunkra, de az nem igazodik készüléke kijelzőjéhez! Tehát weboldalunk is legyen reszponzív! |
*Az Outlook Express és MS Outlook verziók a reszponzív viselkedéshez szükséges technológiákat nem támogatják! | *Az Outlook Express és MS Outlook verziók a reszponzív viselkedéshez szükséges technológiákat nem támogatják! | ||
== Kapcsolódó források, hivatkozások == | == Kapcsolódó források, hivatkozások == | ||
− | *[http:// | + | *[http://emailmarketingkonferencia.hu/pdf/mecs-gergely-email-marketing-konferencia-2013-10-02.pdf/ A reszponzív e-mail designról elhangzott előadás a 2013-as email marketing konferencián] |
*[http://www.campaignmonitor.com/guides/mobile/ Útmutató a reszponzív design kialakításához angol nyelven] | *[http://www.campaignmonitor.com/guides/mobile/ Útmutató a reszponzív design kialakításához angol nyelven] | ||
*[http://econsultancy.com/blog/63599-responsive-email-design-five-case-studies-and-an-infographic-on-how-it-improves-engagement/ Esettanulmányok és infografika a reszponzív e-mail designnal kapcsolatban angol nyelven] | *[http://econsultancy.com/blog/63599-responsive-email-design-five-case-studies-and-an-infographic-on-how-it-improves-engagement/ Esettanulmányok és infografika a reszponzív e-mail designnal kapcsolatban angol nyelven] | ||
− | *[http://hogyankell.hu/D%C3%B6nteni_a_mobiloldal_%C3%A9s_a_reszponz%C3%ADv_webdesign_k%C3%B6z%C3%B6tt Hogyan kell dönteni a mobiloldal és a reszponzív webdesign között?] | + | *[http://hogyankell.hu/D%C3%B6nteni_a_mobiloldal_%C3%A9s_a_reszponz%C3%ADv_webdesign_k%C3%B6z%C3%B6tt/ Hogyan kell dönteni a mobiloldal és a reszponzív webdesign között?] |
*[http://www.emailmarketing.hu/tudasbazis/hirlevel-sablon-template-minta/169/ Hírlevél sablonok szakértőktől] | *[http://www.emailmarketing.hu/tudasbazis/hirlevel-sablon-template-minta/169/ Hírlevél sablonok szakértőktől] | ||
*[http://www.sakkom.hu/e-mail-marketing-kategoria/ SAKKOM blog: e-mail marketinggel kapcsolatos bejegyzések] | *[http://www.sakkom.hu/e-mail-marketing-kategoria/ SAKKOM blog: e-mail marketinggel kapcsolatos bejegyzések] | ||
− | |||
− | |||
− |