A hírlevél készítésről szakszerűen

Gyakran készítek hírlevél sablonokat, különböző kampányokhoz, promóciókhoz, vagy akciós ajánlatokhoz. Ezen kívül egyszerűbb email sablonokat, értesítő, számla, vagy díjbekérő e-mailekhez.

Egy jó email sablon megírása nagy kihívást jelent, mert a modern webes megoldásokat sajnos egyáltalán nem támogatják a levelező kliensek. A mai technológiákhoz viszonyítva nagyon nagyon elavultak. Ezen kívül a kliensek között kevés átfedés van, kicsi a közös halmaz. Ami az egyikben támogatott és jól működik, az a másikban nem. Akinek eddig gondja volt az Internet Expolrerrel, az lefogja kaparni az arcát a hírlevél sablon készítéstől. (Eddigi tapasztalatom szerint ennél körülményesebb meló talán csak PDF generálás HTML-ből.)

home-office

Az email sablonok felépítése táblázatos

Weboldalaknál, már nagyon kevés alkalommal használunk klasszikus táblázatot (table taggel), én szinte soha, még a kifejezetten táblázatos adatok, listák megjelenítésére sem, mert nagyon sok a nyűg vele mobilon. Email sablonoknál viszont nincs más választás, a div-eket nagyjából el lehet felejteni, mert a legtöbb levelező kliens csak a táblázatos felépítést jeleníti meg helyesen. A különböző elrendezéseket, több egymásba ágyazott táblázattal tudjuk megoldani.

Fontosabb formázás szempontok

  • Struktúrája legyen egyszerű, rövid terjedelmű, kevés elemből épüljön fel.
  • Egy szokványos sablon általában 600px széles, ennél szélesebbet nem érdemes csinálni.
  • Mivel stíluslapokat nem használhatunk, inline CSS-el (vagyis elemenként) tudjuk megadni a formázást.
  • Bekezdés, Félkövér, Dőlt, Aláhúzás, Link, Betűszín, Háttérszín, Szegély gond nélkül alkalmazhatóak.
  • Gombokhoz használjunk egyszerű háttérszínt, vagy ágyazzuk be képként.
  • A :hover szelektor nem támogatott Outlook 2007/2010, Gmail, iOS és Android alatt sem. Vagyis mouseover effektet nem tudunk csinálni.
  • Margók helyett ( margin és padding ) érdemes megoldani az eltartásokat táblázat cellákkal. Képek esetén pedig margóval együtt kivágni a képet.
  • Cifrább betűket nem tudunk használni. Az alap betűtípusokból mint: Arial, Georgia, Tahoma, Times New Roman, Verdana válogathatunk. (És Comic Sans is, de ezt NE!)
  • A background-image tulajdonság használata nem ajánlott, a kép elemek megjelenítéséhez img elemet kell használnunk.
  • A kliensek egy része nem tölti le automatikusan a képeket, ezért az alt text-et minden esetben ki kell tölteni.
  • Készülhet az egész hírleveled egy képként, majd szeletekre vágva beágyazható táblázatokba. Fontos, hogy minden kép szeleten legyen link és alt text.

home-office
A képes hírleveleket érdemes nagyobb kampányokhoz, szezonális, vagy éves promóhoz használni.

Hogy lesz a hírleveled reszponzív?

Technikailag sajnos nem lehetséges reszponzív hírlevelet gyártani, mivel a Gmail Mobil, a Windows Phone 7 és 8, az Outlook, és a Yahoo! Mail sem támogatja a media query-t. Nagyjából csak Iphone-on, és a BlackBerry újabb verzióin működik.

Mindezek ellenére nézhet ki jól a hírleved mobilon is. Úgy kell kialakítani a designt és a kódot, hogy media query technológia nélkül is igazodjon a méret a képernyőhöz.  Ezt fluid táblázatokkal lehet megoldani, vagyis 600px alatt 100%-ra állítjuk a maximum szélességet. Érdemes elsődlegesen mobilra tervezni és maximum két hasábot használni.

Teszt, teszt, teeeszt!!!

Folyamatosan tesztelni kell mire eljutunk a végleges sablonig. Türelemjáték és sok munkaóra, mire kapunk egy olyan sablont, ami nagyjából minden kliensben elfogadhatóan néz ki. El kell fogadni, hogy a leveled nem lesz mindenhol ugyanolyan, akkor sem, ha cigánykereket hánysz. Vigasztalásul szolgáljon, hogy a felhasználóknak sincsenek nagy elvárásai, ha jó a szöveged és az ajánlatod, úgyis kattintani fognak.

Mivel küldjünk hírlevelet?

A legjobb, ha kifejezetten erre a célra készült szoftvert használsz, hiszen itt lehetőséged van mérni a kattintásokat, leiratkozásokat. Sokkal nagyobb rálátásod van egy-egy kampány eredményességére. Mind emellett, minden jobb szoftver rendelkezik letesztelt, előkészített sablon mintákkal, amit csak fel kell tartalmazni. Próbáld ki ezeket: Mailchimp, Mailmaster, Webgalamb.

Bővebb információt a támogatásokról a Campaignmonitor oldalán találsz.

Nagyszerű, elolvastad! Oszd meg a világgal!

Írta: Pócsik Emese webdesigner

2007 óta dolgozom a design szakmában. Munkáim nagy részét céges weboldalak, portálok tervezése teszi ki. Rólam bővebben »

Iratkozz fel értesítési csatornámra!

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

Szólj Hozzá!

Hozzászólások

  • Tamás szerint:

    Hírlevél szerkesztésre ajánlom az edmdesigner.com oldalt. Nem ingyenes, viszont nagyon könnyű benne reszponzív hírleveleket gyártani.

    1. Tamás szerint:

      Illetve van ingyenes lehetőség, de ott nem lehet képeket feltölteni, szóval…