() translation by (you can also view the original English article)
Az email tervezése azt jelenti, hogy hogyan közöld mondanivalódat és hogyan hozd ki a lehető legtöbbet egy lehetőségből, a feliratkozóidból. Csak egy lövésed van, ezért érdemes minél több trükkel felvértezned magadat ahhoz, hogy az üzeneted célba érjen. Az alapelv az olvasóid tiszteletben tartása azáltal, hogy valami értékeset adsz nekik az idejükért cserébe – végülis azért regisztráltak, hogy első kézből halljanak felőled.
Egy megjegyzés mielőtt hozzáfognánk
Néhány a javaslataim közül nem lesz alkalmazható minden listára, vállalatra vagy termékre. Ahogy email esetében mindig, tesztelj le minden újdonságot és nézd meg, hogyan teljesít, hogy eldöntsd, mi a legjobb a feliratkozóidnak.
1. szabály: Légy átlátható
Ez tényleg fontos. Kerüld el a titokzatos vagy kódolt küldőneveket, tárgysorokat, előfejléceket vagy kiadványokat. Ez csak összezavarja az olvasóidat és nagyobb valószínűséggel törlik az emailedet vagy jelölik szemétnek.
Meséld el az olvasóidnak, hogy ki vagy te, pontosan miért írsz emailt nekik, és hogy nyernek azzal, ha elolvassák. Helyezd el mindezt olyan közel az emailed tetejéhez, amennyire csak lehetséges. Ez azt jelenti, hogy amint az emailedet megnyitják, a szándékod és személyazonosságod egyértelmű lesz, és az ajánlatodat nem értik félre.
Győződj meg róla, hogy a feladói neved, a tárgyad, az előfejléced és a "hajtás feletti" tartalom mind értelmes és releváns oka annak, hogy felvedd a kapcsolatot az olvasóiddal.
2. szabály: Légy nyilvánvaló és konvencionális
Talán unalmasnak tűnik, de hagyománytisztelőnek lenni igazán hasznos az email esetében. Az emailek kis méretűek és csak nagyon rövid ideig vannak megnyitva, szóval minden egyes elem funkciójának kristálytisztának kell lennie.
Tedd a linkjeidet egyértelművé
Készítsd szép, nagy, könnyen kattintható és lenyomható gombokat a linkjeidhez. Mobilon tedd őket 100% szélessé, így könnyen rá lehet bökni bármelyik mutatóujjal (nem kell átnyúlni érte).
Ha szeretnél szöveglinkeket is a kiadványodon belül, tedd őket félkövérré és elütő színűvé, hogy kiemelkedjenek. Próbálj meg nem túl sok linket közel zsúfolni egymáshoz, mert úgy a felhasználó véletlenül egy rosszra bökhet rá.
A megnyitások körülbelül 50%-a érintésvezérelt eszközökről történik napjainkban, ezért kerüld el az olyan nyelvezetet, ami abban a környezetben nem helyénvaló, mint például a "kattints ide".
Ne habozz hozzáadni egy nyilat – a tanulmányok azt mutatják, hogy sokkal hatékonyabb –, de mint mindig, teszteld ezt le a saját feliratkozóidon.
Tedd egyértelművé a kattintás előnyeit
A legjobb gombok kombinálják az átkattintás előnyeit magával a cselekvéssel. Például "Kezdd el használni az új fiókodat" vagy "Szerezd meg az ingyenes próbaverziót".
3. szabály: Mondj kevesebbet
Ne írj sokat. Az olvasóid többnyire csak átfutják az emailt érdekes dolgok után ahelyett, hogy elolvasnák a teljes emailt, ezért oszd apró részekre, amik olyan rövidek, amennyire csak lehetséges.
A célod az az email marketinggel, hogy rávedd az embereket, hogy végigkattintsanak a weboldaladon, ezért nem kell késleltetned őket hosszú monológgal, különösen nem egy olyan hosszúnak látszó emaillel, ami mentális fáradtságot okoznak az olvasóknak, és nagy valószínűséggel a "Delete" gomb megnyomását eredményezi.
Tedd átláthatóbbá
Tervezd ütősre az emailedet. A szövegnek érthetőnek kell lennie, eljuttatni a részleteket odáig, hogy megértsék.
Használj egyértelmű címsorokat és kulcstartalmakat félkövér betűkkel, így az azt átfutó olvasók megkapják a lényeget, még akkor is, ha nem olvasnak el mindent (ahogy a többségük teszi).
Mondhatsz többet is – később
Ha olyan üzletágban vagy, ahol hosszabb tartalmakat küldesz, amiket az olvasóid élveznek, biztonsággal állíthatom, hogy annak nincs helye az email marketingben.
Az emberek különféle helyzetekben olvasnak emailt. Néhányan 'útközben' és fontos találkozók között, mások talán rendkívül unatkoznak a fogorvos várótermében, és sajnos azt kell mondjam, hogy sokan mások még mindig a WC-n olvasnak. Ezek a helyzetek mind nagyon különbözőek, de könnyű mindenkinek a megfelelőt nyújtani, ha ragaszkodunk egy logikus felépítéshez.
Először biztosítsd a legrövidebb és legütősebb információt, majd az alá helyezd el a hosszabb tartalmat. Ily módon nem kényszerítesz senkit arra, hogy átvergődjön a hosszabb tartalmon, kivéve azokat, akik aktívan végigolvassák az emailedet.
Ismételd meg a fő felhívásodat
Ha az emailed hosszú és egy felhasználónak végig kell görgetnie az egész tartalmadon, gondoskodj róla, hogy könnyen hozzáférjenek egy másik felhívásodhoz anélkül, hogy vissza kellene görgetniük az email elejére.
Reklám emailek és bejelentések
Ezek a tippek marketing üzenetekre vonatkoznak, ahol tipikusan egy vagy két fő dolog van, aminek kapcsán kapcsolatba lépsz a feliratkozóiddal.
Ne hígítsd fel az üzenetedet
Amennyiben egy dologról szeretnél írni az olvasóidnak, próbáld meg nem felhígítani az üzenetet azzal, hogy sok más dolgot is hozzáadsz utána vagy az oldalsávban. Minden egyes további lehetőséggel a félresiklást kockáztatod.
Távolíts el minden nem lényeges elemet
Mérd fel az email dizájnodat, azonosíts mindent, ami nem létfontosságú az üzeneted közvetítéséhez, majd távolítsd el. A kevesebb figyelemelterelés tisztább kommunikációt jelent.
Ne adj túl sok választási lehetőséget
A túl sok választási lehetőség megnöveli olvasóid szellemi megterhelését, amitől sokkal kevésbé lesznek képesek döntést hozni.
Gondold végig, hogy mi a minimális követelmény ahhoz, hogy rávegyél valakit arra, hogy végigkattintson a weboldaladon, majd fokozatosan mutasd be a többi, szükséges részletet. Ha már az elején túlterheled az embereket információkkal, az csak a félbehagyására bátorítja fel őket.
Ha több feliratkozót szeretnél rávenni, hogy válasszon egy terméket és vegye meg, akkor ne mutasd be az összes lehetőséget az emailben. Csak vezesd át őket a weboldaladra, és ott kezdd el bemutatni nekik a szükséges részleteket.
Próbáld fokozatosan belevonni az embereket
Néha fenyegető érzés egy olyan emailt kapni, ami azonnal azt mondja, hogy "VEDD MEG! REGISZTRÁLJ! TEDD MEG!"
Ehelyett megpróbálni az embereket az oldaladra irányítani egy fontos lépése az utazásnak, azaz például "válaszd ki a cipőméretedet az elérhető stílusok megtekintéséhez" a "vedd meg ezeket a cipőket" helyett.
Legyen egy fókuszpontod
Tedd az elsődleges felhívást az emailed fő fókuszpontjává. Biztosítsd, hogy az olvasóidnak nem kell a felhívás után kutakodniuk a hasonló dolgok tengerében.
Egy fókuszpont létrehozása könnyű. Mindenekelőtt legyen egy elsődleges célod. Ezután nagyobbá kell tenned minden egyébnél, és elegendő teret biztosítani közötte, hogy a szemet erre a területre vonzza. Ez különösképp az asztali dizájnodra vonatkozik, ahol a felhasználó elég sok emailt nézhet meg egyszerre.
Használj üres tereket az elemek körül
Ha sok hasonló méretű és súlyú dolgod van anélkül, hogy üres tér lenne körülöttük, a szem számára csak egy amorf tömbnek fog látszani, amin gyorsan túl is lép. Használj üres tereket az elemek körül, hogy a lényeges dolgokra irányítsd a figyelmet.
Általános tippek
Ha az emberek távozni akarnak, hagyd őket
Ne temesd, rejtsd vagy álcázd el a leiratkozási információt. Azon túl, hogy több országban ez törvénytelen, egy goromba és kontraproduktív megoldás. Ha valaki szeretne leiratkozni a hírleveledről és te ezt ellehetetleníted számára, akkor nem fog visszatérni, hogy boldog feliratkozóvá váljon. Ez csak rosszindulatot generál a márkád felé, mivel rá vannak kényszerítve, hogy továbbra is feldolgozzák az emailjeidet (vagy hogy beállítsanak egy szűrőt, ami a kukába küldi az üzenetet).
Kerüld a túl sok függőleges elválasztást
Minél több a függőleges elválasztás az elrendezésben, annál zavaróbb a szemnek. Ragaszkodj a két vagy három függőleges elválasztáshoz a griden belül.
A vastag szegélyek szintén nagyon zavaróak a szemnek, így ezeket tartsd a minimumon.
Praktikus elgondolások
Tartsd 600px szélesség alatt
Ez általában a legbiztonságosabb maximális szélesség az asztali dizájnodhoz, amivel biztosíthatod, hogy a felhasználóknak nem kell vízszintesen görgetniük.
Használj fokozatos fejlesztést
Mielőtt minden egyes boxnak kerekített sarkokat és vetett árnyékot adnál, gondold végig, hogyan fog működni az elrendezések ezek nélkül a fejlesztések nélkül. Kezed ezt az 'alap' dizájnodként, amihez a kerekített sarkokat és az árnyékokat mint fejlesztéseket adod hozzá.
A vaskos alakzatok a négyzetes sarkokkal épp olyan jók, és az újabb email klienseket használók a kerekített sarkaidat mint hozzáadott érték fogják nézni.
Ez a megközelítés rengeteg időt takarít meg neked, amikor az emailed elkészítésére kerül sor. Amennyiben vetett árnyékú, lekerekített sarkú szövegdobozokat kell készítened, és annak működnie kell minden email kliensen, akkor az effekteket képek használatával kell elkészítened, ami nagyon időigényes lehet, különösen, ha újrahasznosítható sablonokat hozol létre.
Adj egy kis teret a dizájnodnak
Fogadd el a tényt, hogy nem mindig lehetséges a dolgokat a legeslegutolsó pixelig ugyanolyan kinézetűvé tenni minden email kliensen. Ha ennek tudatában tervezel, az sok fejfájástól kímélhet meg a későbbiekben.
Készíts olyan dizájnokat, amiknek van egy kis szabad terük, ahol nem számít, ha az egyik kliens 7 pixelnyi titokzatos üres helyet rak be alá. Legalábbis tartózkodj az infi-finci részletektől, amik hülyén néznek ki, ha egy pixellel eltolódik minden.
Gondold végig a teljes élményt
Az emailed egy egységes egész, így gondold végig, hogyan fog minden együtt működni. A felhasználók az emailedet először a beérkezett üzeneteik között fogják látni, és elolvassák a feladó nevedet, a tárgyat és az előfejlécet. Azután valószínűleg az emailednek a kikapcsolt képes változatát fogják látni, mert ez az alapértelmezett a legtöbb email kliensnél. Végül úgy fogják látni az emailedet, ahogyan azt tervezted – amennyiben bekapcsolják a képeket.
Győződj meg róla, hogy mindent összekapcsoltál, és hogy a feliratkozóid még mindig képesek megérteni az üzenetedet, még akkor is, ha a képek ki vannak kapcsolva.
Ne vedd bele a fő üzenetedet egy képbe. Alapértelmezetten blokkolva lesz, és sok email kliens az alt tagedet sem fogja megmutatni.
Az alábbi példában láthatod, ahogy az üzenetből szinte minden eltűnik, ha nincsenek bekapcsolva a képek, mivel minden szöveget képek tartalmaznak és az alt szöveg nincs olvashatóvá stilizálva.
Stilizáld az Alt tagjeidet
Hozzáadhatsz CSS stílusokat a képekhez (vagy a szülő celláikhoz vagy a link tagekhez), hogy ezáltal szépen jelenjenek meg olyan kliensekben, amik támogatják az alt tageket. Ez nagyban növelheti az összbenyomást a feliratkozóid körében.
Teszteld színvakoknak
Ha Photoshopot használsz, ez annak beépített funkciója. Rengeteg más eszköz is van, amik lehetővé teszik számodra, hogy lásd, hogyan fog kinézni a dizájnod annak a 10% embernek, akiknek valamiféle színlátási hiánya van.
Linkelj be mindent
Amikor készíted, ne csak a gombokat linkeld be. Gondoskodj róla, hogy mindent belinkelsz, így a felhasználók bárhová kattinthatnak. Linkeld be a képet, a gombot és a címsort. Sőt, magát a szöveget is linkeld be, ha lehetséges.
Hogyan tervezz mobilbarát email dizájnt
Van néhány mód, ahogyan hozzáállhatsz egy mobilbarát email létrehozásának.
1. Egyoszlopos, eszközfüggetlen dizájn
Ez a legkönnyebb módja egy mobilbarát email létrehozásának. Ennek a módszernek a használatával a képeket és a szövegeket elég nagyra kell állítani, így amikor az emailt asztali vagy mobil eszközön nézik, a betűtípusnak olvashatónak és a képeknek eléggé nagynak kell lenniük.
Ennek a dizájn típusnak az az előnye, hogy csak egy egyszerű elrendezést kell kódolnod. Határozottan ez a leggyorsabb és legkönnyebb lehetőség a számodra. A skálázást támogató okostelefon kliensek az emailedet le fogják skálázni 100% szélességre, amik pedig nem támogatják, azoknál is csak nagyon kicsi vízszintes görgetés lesz.
A hátulütője az, hogy asztali verzió nagyon nagy méretű lesz (amit én személy szerint nem látok hátulütőnek).
Ennek az elrendezésnek az eléréséhez:
- Tervezd az emailedet körülbelül 450px szélesre
- A fejléceknek legalább 30px-eseknek kell lennie
- A törzsének legalább 20px-esnek kell lennie
2. Teljesen reszponzív email dizájn
Egy teljesen reszponzív HTML email media query-ket használ arra, hogy egy adott módon jelenítse meg az emailt, annak az eszköznek a szélességétől függően, amin megtekintik azt. Szinte egyetlen főbb asztali és webmail kliens sem támogatja a media query-ket, viszont sok okostelefon és tablet kliens igen. Ez azt jelenti, hogy a reszponzív emailek kódolása egy kicsit fordított, összehasonlítva a reszponzív weboldalakkal, mivel az asztali változat lesz az 'alap' változat, és egy max. szélességű query használatával igazítod az elrendezést a kisebb eszközökre.
Ennek a dizájnfajtának az az előnye, hogy készíthetsz egy nagyszerű, többoszlopos emailt, ami átfordítható egy könnyen olvasható, egyoszlopos mobil változattá. A media query-k is sokoldalúak, mivel megcélozhatsz egy adott képernyőméretet és egy adott pixelsűrűségű képernyőt is (a nagyfelbontású képek megjelenítéséhez).
A hátulütője, hogy az Androidos Gmail app (a legnépszerűbb Androidos email kliens) nem támogatja a media query-ket, így néhány váratlan eredményt generálhat, amikor a teljesen reszponzív emailedet rendereli. A teljesen reszponzív emaileket sokkal tovább is tart kódolni, mint az eszközfüggetlen rokonaikat.
3. Teljesen fluid email dizájn
Gondolj erre úgy, mint media query-k nélküli reszponzivitásra.
A módszer magába foglalja egy fluid dizájn létrehozását, 100% szélességben, a maximális 600px-es szélesség beállításával a külső táblázaton. A feltételes kommentek kötelezőek (az Outlookhoz), ahogy a media query-k is (az Apple Mailhez, ami vicces módon nem támogatja a max-width tulajdonságot).
Ennek a fajta tervezésnek az az előnye, hogy reszponzív lesz minden email kliensen, beleértve a Gmail for Android appot is. Ez a módszer használható a media query-kkel együtt is, így tovább finomíthatóak az olyan dolgok is, mint a szövegméret és a gombok azokon a klienseken, amik támogatják őket.
A hátulütője, hogy ez csak olyan dizájnnál működik, ami nem túl bonyolult és általában nem állnak egynél több oszlopból. A kétoszlopos tartalom még oké, mindaddig, amíg elég kicsi ahhoz, hogy jól nézzen ki egy okostelefon kijelzőjén egy szűk oszlopban.
Képesnek kell lenned a képeid szélességének százalékban való használatára, ami nem mindig lehetséges, amikor sablonokat készítesz (gyakran a sablonok képeinek pixelben kell megadni a szélességet).
Az email dizájnod továbbfejlesztése
És végezetül van pár extra dolog, amiknek jó hasznát veheted olyan takaros emailek létrehozásához, amik igazán kitűnnek.
Háttérképek
A háttérképek általában a "túl nehéz" kupacba szoktak tartozni, de Stig Morten Myre-nek és társainak köszönhetően a Campaign Monitornál, itt a szuperkönnyű Bulletproof Email Backgrounds generátor, ami seperc alatt megoldja ezt nekünk. Most már nem kell tovább hezitálnod háttérképek hozzáadásán a kampányodhoz.
Webfontok
A webfontok használata szintén nagyszerű módja annak, hogy a dizájnod kitűnjön a többi közül. Egy kis extra dizájn elképzeléssel és egy kis plusz készítési idővel könnyen implementálhatóak olyan webfontok, amiket nagyon jól lehet meglepően sok email kliensen renderelni.
CSS3 animáció
A modern email kliensek (mint az Apple Mail és az iPhone és Android eszközök kliensei) ténylegesen támogatják a CSS3 animációt, ami azt jelenti, hogy elkezdhetsz gondolkodni néhány valóban király cuccon a kampányodhoz. Az átmenetek, ahogy keyframe animációk is, elég jól renderelődnek és fantasztikus kiegészítései lehetnek az emailnek (mindaddig, amíg nem viszik túlzásba), mivel nem növelik meg annyira a fájlméretet, mint amennyire azt egy animált GIF tenné.
Konklúzió
Rengeteg mindent kell számításba venni, amikor emailt tervezel! Az ebben a cikkben listázott tippek stabil indulási alapod adnak neked, de azért nézd meg a sorozat többi bejegyzését is, amik részleteiben belemennek a különböző aspektusaiba (mint például a webfontok és a reszponzív dizájn használata).
