9 trükkök a tökéletes HTML hírlevélhez

Az e-mail hírlevél a legjobb módja annak, hogy kapcsolatban maradjon ügyfeleivel vagy követőivel. Gyakran a cége vagy a webhelye számos termékfrissítést vagy esetleg közelgő eseményeket szeretne megosztani. Mindig lehetőség van új információk közzétételére a blogjába vagy a közösségi médiafolyamokba, de a közönség csak annyira képes, hogy elérje Önt. Ebben az esetben az e-mail minden bizonnyal nem halott technológia, csak kihasználatlan potenciál.

A hírlevél létrehozásának és küldésének folyamata sokkal könnyebb, mint gondolnunk, de egyéni sablon megtervezése és a saját kód létrehozása - ez egy kicsit hosszabb időt vehet igénybe.

Számos fantasztikus tippet állítottunk össze, hogy kiváló minőségű HTML hírleveleket tervezzünk, mint még soha. Még akkor is, ha újszülött vagy a témában, biztosan talál valami felbecsülhetetlen információt, hogy elkezdhesse az e-mail marketing folyamatát.

A hírlevél céljai

Mielőtt belépnénk a tervezési szempontokba, tisztázni kell a hírlevél felépítésének célját. Az Ön által használt webhely típusától függően a hírlevélben szereplő információk jelentősen eltérhetnek másoktól, de a hírlevél fő célja az, hogy kényelmes frissítéseket nyújtson be az olvasó bejövő üzeneteihez.

A nehéz internetes felhasználók valószínűleg naponta kétszer ellenőrzik e-mailjeiket. Még azok is, akik állandóan elfoglaltak, időt vesz igénybe, hogy naponta legalább egyszer átmásolják üzeneteiket. Ez a tökéletes idő megragadják a figyelmet még a webhely látogatása nélkül is. Még ha senki sem kattint a linkjein, az információ még mindig érkezett, ami nagyszerű egy márkanév megépítéséhez.

Fontolja meg azokat a témákat, amelyeket a designban meg kell kínálnia. Ön a szolgáltatásra vonatkozó linkeket is tartalmaz; esetleg blog linkeket, vagy a legutóbb közzétett cikkeket a webhelyén? A hírlevél elrendezése tükrözi, hogyan szeretné, hogy az olvasók reagáljanak, de végül érdeklődni akarsz, és érdekes információcserét szeretnél átadni a tömegeknek.

1. Használja a táblázatokat az elrendezésekben

Ez kissé ellentmondásosnak tűnhet a mai modern webes szabványokkal szemben, de az e-mailek még mindig archaikusak a megjelenítő motorjaikban, így a régebbi modellekre kell építeni. Sajnos az asztalok a legegyszerűbb mód hogy mindent jól működjön a különböző e-mail kliensek között. Az asztalalapú elrendezések építésének ismereteitől függően ez valóban jó hír!

Akkor is csoda, hogy miért div és más blokkelemek nem olyan jó ötlet. A legtöbb e-mail kliens a külső CSS eltávolítására épült tartalom. Ez azt jelenti, hogy nem fog semmit használni, kivéve inline CSS (és még a teljes támogatás is szégyenlős). Az olyan ügyfelek, mint a Microsoft Outlook 2007 és a Google Gmail, nagyon rosszul támogatják a lebegő elemeket és a közvetlen elhelyezést.

A legjobb megoldás lenne fészkeljen több táblát egymásba. A párnázás és a margók nem állítanak be bizonyos skálát a sok e-mail kliens között. Ez az oka annak, hogy ragaszkodjunk a használathoz width = "érték" minden asztali cellaelemen. Ezek mindig ugyanolyan szélességűek lesznek, függetlenül attól, hogy melyik e-mail kliens használja az olvasóit, így sok biztonságosabb és következetesebb az üres tábla cellák használatával párnázást és margókat állíthat be.

2. Rögzített szélességű pozicionálás

Néhány lehetősége van a hírlevél elrendezésének tervezése során, de a legjobb megoldás a következő rögzített szélességet állítson be a tartalmazó táblához. Számos változó monitorfelbontás létezik - nem leszel képes mindenkinek. Ha nincsenek statikus szélességű elemei, mindig használhatja width = "100%" a táblázatban. Ez lehetővé teszi, hogy a tartalom kitöltse az összes e-mail kliens teljes szélességét.

Sok esetben azonban ez a módszer egy kicsit laza. Konstruktív hírlevelek a legtöbb esetben rögzített szélességet igényel, különösen akkor, ha egy adott méretű bannert és képet használ. Javasoljuk, hogy dolgozzon 500px - 600px maximális dokumentumszélesség. Az iPhone és néhány BlackBerry modell vízszintes képernyőmérete 320px-ra van korlátozva, így az 500px-en is az e-mail sablon lesz le van méretezve, hogy megfelelően illeszkedjen.

Figyelembe véve, hogy sok mobil felhasználó úgy dönt, hogy HTML-t szeretne megtekinteni, ez nem lehet hatalmas probléma. Az asztali és webmail-ügyfelek felhasználói valószínűleg hasonló beállítást tapasztalnak, függetlenül az általuk használt operációs rendszertől. Kétség esetén hozzon létre néhány sablonmintát és válassza ki a legjobban tetszőket!

3. Pixelegységek

Hacsak nem használja folyékony elemeket a hírlevelében, valószínű, hogy néhány dolgot kell méreteznie. Próbálja meg tartani pixel (px) nem más típusú egységben. A százalékos arányok könnyen összekeverhetők a sok webmail klienssel és szoftverablakkal. Kevesebb oldalelemmel a folyadékelrendezés károsodhat, bár néhány hibával.

De a pixelek mindig biztosak. A 600px-es maximális szélességi korláton belül valóban sok tartalmat lehet beilleszteni. Az expozíció könnyebb, ha az elrendezéseket két vagy három oszlopra osztja, és mindig a méretét pixelben írja. Az egyetlen kivétel lehet betűméretek hol ems jobban támogathatja olvasóit, de em a méretezés hasonló módon fog eltérni a százalékoktól az egyszerűség kedvéért ragaszkodjon a pixel alapú beállításhoz.

4. A CSS lehetőségei

Úgy tűnhet, hogy az e-mail tervezés elpusztítja a CSS stílusok használatát. Bár sok nem támogatott funkció létezik, a CSS sok esetben még mindig tökéletesen elfogadható. A Kampányfigyelő egy szép táblázatot tartalmaz az e-mail kliens által felsorolt támogatott CSS tulajdonságokról. Minden támogatni fogja az alapokat betűtípus család és betű stílus, így átugorhat a címke, ha kívánja.

Legyen óvatos a betűkészlet stílusaival kapcsolatban, hogy ne tolja túl a határokat. Ha kényelmetlenül érzi magát az inline stílusokkal, akkor mindig lehetséges a HTML betűtípus címke használata, bár elavult. Ha CSS-tervező vagy, akkor nem kell kilépnie a rendszerből, de bármilyen rövidített CSS-kódolás hibás terveket eredményezhet. Példaként a betűtípus: 12px / 14px Arial, sans-serif; a rövidített szöveg sok helyet takaríthat meg, de az e-mail tervezéshez nem teljes mértékben elfogadott, még akkor sem, ha az inline stílusoknál használatos.

Még a színválasztás is ki kell írni a hosszúkás. Hex színek, mint például #ccc vagy # E3F teljes egészében írva kell lennie #cccccc vagy # ee33ff, illetőleg. Ha meg tudod építeni, amire szüksége van CSS nélkül, ajánlom ezt az utat, de ne hagyd teljesen el a CSS-t az e-mail tervekben, mert a közhiedelemmel ellentétben a legtöbb esetben támogatott.

5. Horgony linkek legjobb gyakorlatok

Biztosan szeretné, ha néhány linket bele szeretne foglalni a hírlevelébe. Ezek lehetnek a weben keresztül más oldalakra irányuló kimenő linkek, vagy talán linkek, amelyek a webhelye legnépszerűbb oldalaihoz vezetnek. Ezen túlmenően a legtöbb lábléc tartalmaz egy leiratkozási linket az olvasók számára, hogy kilépjen az e-mail folyamatból, de hogyan kezelje ezeket a linkeket a tervben?

Először is meg kell jegyezni, hogy az e-mail kliensek nagyon finomak a tervükkel. Sokan úgy döntenek, hogy felülírják a linkstílusokat, még a CSS segítségével is. Egy szép trükk az magukban foglalják mind az inline színt, mind a kiegészítő horgonyelemet a horgony elemen belül. Ha a linkek színe és stílusa fontos az általános tervezéshez, akkor az extra óvintézkedést szeretné megtenni. Az alábbi kis példát adtam hozzá:

valamilyen link szöveg

Hover hatások az Outlook 2007/2010, a Gmail, az iOS vagy az Android nem támogatott. Lehet, hogy még mindig be szeretné venni a a: hover minden támogató ügyfél stílusa: Outlook 2000/2003, Hotmail, Apple Mail és Yahoo! e-mailben, de személy szerint nem látok sok hasznot a részleges felhasználói élményben, mivel a horgonyszelektorok nem támogatottak nagyban csak 2-3 linkszínt kínál használni a tervezési folyamat során.

Feltételezésként a felhasználók azt is várják, hogy a linkek új lapon vagy ablakban nyíljanak meg. Ideális esetben target = "_ blank" az attribútumnak elegendőnek kell lennie ahhoz, hogy minden böngésző felismerje ezt a funkciót, és ennek az attribútumnak a rögzítése a horgony linkekbe nem befolyásolhatja negatívan az e-mail szoftvert, például a Lotus Notesot vagy az Outlookot.

6. Teszt minden fő ügyfélnél

Egy legutóbbi tanulmány a legnépszerűbb e-mail kliensekről (amit a Campaign Monitor készített) mutatja az elmúlt év tíz legnépszerűbb e-mail kliensét. Lehet, hogy egy kicsit unalmas, de tervezők be kell jutnia a hírleveleik minden nagyobb e-mail kliensen történő ellenőrzésére, legalábbis a leggyakoribb ügyfelek közül, mint például a Gmail, a Hotmail vagy a Yahoo! Posta.

Ez nem foglalja magában kizárólag a webmailet, hanem a Mac OS X és a Windows operációs rendszereket is. Szintén a diagramjuk szerint iOS Mail és Android az elmúlt években mindketten rázkódtak a top 10 listába. Valójában az iPhone, az iPod Touch és az iPad Mail rangsorolja a # 2 legnépszerűbb jogot az Outlook alatt! Sajnos nincs mód arra, hogy teszteljék ezeket anélkül, hogy az egyik eszközt birtokolnák - úgyhogy más opciókkal kell rendezni.

A mobilalkalmazás egyik hibája számos iPhone és Android modellben található. A mobil e-mail megjelenítés gyakran átméretezheti a sablonon belüli szöveget. Ez nem befolyásolja nagyban a tervezést, de néhány olvasó számára bosszantó lehet. A CSS használata -webkit-text-size-adjust: nincs;, akarat biztosítson egyenletes alapértelmezett szövegméretet az összes elemző motoron anélkül, hogy tesztelni kellene.

Ha ismerősöket vagy kollégákat ismer, akik alternatív szoftvert használnak, érdemes lehet kérjen segítséget a hírlevél tesztelésében. Akkor is küldje el nekik az e-mail másolatát ellenőrizze a készüléket vagy kölcsönözze a készüléket a kódolási hibák aktív eltávolítása. Szerencsére az Outlook egy Mac telepítési verziót kínál, így nem kell nyomon követnie egy Windows-felhasználót ezekhez az optimalizálásokhoz, de ha a Lotus Notes vagy a Windows Mail esetében van, akkor lehet, hogy nincs szerencséje.

Az alternatíva az, hogy fizetni a megoldásért mint például az E-mailek előnézete, sajnos nem nyújtanak ingyenes demo-fiókokat, de szolgáltatásuk jól ismert a fantasztikus előnézeteiről. Az Acid-en levő e-mail egy olyan szolgáltatás, amely ingyenes fiókot kínál, de nem teszi lehetővé az összes ügyfél tesztelését. Az online megjelenítési szolgáltatásoknak hasznosnak kell lenniük, ha hosszú távon sok hírlevél sablont kell tesztelni alternatív számítógépek használata nélkül, azonban ezek nem alapvetőek, így ne stressz ha nem tudod tesztelni őket!

7. Mindig kínáljon webalapú nézeteket

Az olvasók nem lesznek képesek (vagy hajlandóak) lenni az e-mailek natív megtekintésére. Egy másik verziót kínálva valahol az interneten megkönnyíti és kompatibilis lesz. Ezt a folyamatot nem lehet teljesen automatizálni, hacsak nem szeretné a egyszerű szöveg változat.

Így lenne az összes HTML-címke csíkja a hírlevél elrendezéséből. Nem lehetne linkeket vagy stílusokat megadni semmire. Minden tartalom egyszerűen egyszerű szöveges fájlként kell meghatározni a megjelenítési képesség nélküli olvasók számára. Ez minden bizonnyal jó alternatíva, de ha ugyanannak a hírlevélnek a teljes webes változatát kínálja elveszi a renderelési hibák által okozott károkat. A legtöbb olvasó egy naprakész webböngészőt fog működtetni, melyet stílusosíthat és a hírlevelét tökéletesen készítheti.

Az oldal beállítása teljesen az Ön választása. Egyes webhelyek lesznek egy teljes blogbejegyzést az e-mail tartalmának másolásához, talán néhányval további információ. Mások is hozzon létre egy külön oldalt a főoldalról a közvetlen navigáció nélkül. Ez a módszer hasznos lehet, mivel az olvasók nem fogják elterelni a fő webhelysablonját vagy az oldalsáv tartalmát.

8. Képtartalom hozzáadása

A képek egy másik ok arra, hogy az olvasóknak internetes megoldást kínáljanak. Alapértelmezés szerint az e-mail kliensek a képeket a tartalomból kivágják. Ha a címét egy biztonságos listához adjuk, minden kép alapértelmezés szerint megjelenik, de a felhasználó elfogadnia kell ezt a beállítást így biztosan nem garancia. Éppen győződjön meg arról, hogy a képek nem szükségesek a fő tartalom részeként, de az extra esztétikában szerepel az oldal esztétikájához.

Miután eljutott a grafika exportálásához, néhány tipp, amellyel kifejezetten az e-mailekre készült képek készíthetők. Mindig akarsz állítsa be a szélesség és a magasság attribútumokat a img címkék. Ezen előírások nélkül, egyes ügyfelek torzítják a kép tartalmát. egy alt a címke hasznosnak bizonyulhat, így a látogatók tudják, hogy mit tartalmaz a képtartalom, mielőtt betöltené.

Mint korábban említettük, a képek elhelyezése az e-mailben nehézkes lehet. Kerülje az úszók használatát mindenáron! A kép align = "left" az attribútum sokkal jobban fog működni, vagy alternatív módon térképezze fel a pontos asztali sejteket a képeket a hírleveled tetejére, balra vagy jobb oldalára illesztheted. Nem fogsz tökéletes illeszkedést találni olyan sok ügyfelünkkel (különösen a mobil ügyfelekkel), de optimalizálja a képeket és a legjobb eredmény érdekében tartsa a fájlméreteket kicsinek.

Ami a kép tárolását illeti, akkor ajánlott tartsa az összes fájlt a saját webkiszolgálón. Ez a jobb megoldás a másik képgazda használata helyett, vagy a fájlok online hírlevél szolgáltatásba való feltöltése. Emellett meg kell távolítsa el a hírlevelek tartalmát a többi képtől a mappaszerkezetben úgy tetszik / Img / email vagy / Img / email / 2011.

9. Kerülje a spam mappát!

Ezt nehéz lehet hallani, de nem minden e-mail kliens barátságos a hírlevelek felé. Naponta több milliárd e-mailt küldünk, és a többség spam vagy rosszindulatú tartalmat tartalmaz, így ezek a biztonsági intézkedések a Beérkezett üzenetekbe egyértelműen biztonsági óvintézkedések..

Az internetes marketingről azonban könnyedén elbátortalaníthatja, hogy a legfrissebb hírleveled a szemétre kerüljön. Annak érdekében, hogy csökkentsük ennek esélyét, meg kell tisztítsa meg a designot az egyszerűség érdekében. Ne tegyen bosszantó képeket vagy a címszöveg több száz kulcsszóval felrobbanthatja.

Próbáld meg tartsa meg a tartalmát és a témát. Nem kell tartalmaznia teljes tartalmat az összes cikkhez vagy oldalhoz. Próbáljon hozzá egy vagy két mondatot egy alternatív hivatkozással a webhelyéhez egy hosszú lista helyett. A rövidebb az e-mailek megjelenése, annál valószínűbb, hogy átmegy a spam-ellenőrzés.

Hírlevél Design Galéria

Milyen szórakoztató lenne az e-mail hírlevél cikkének fantasztikus példái nélkül? Vannak tonna e-mail hírlevelek és sablonok, amelyekkel a Google-t megtekintheti. A HTML E-mail Gallery egy nagyon népszerű forrás az inspirációhoz.

Az alábbiakban a kampánymonitor galériájában található számos hírlevélből készítettem a képernyőképeket. Remélhetőleg ezek a fantasztikus elrendezések nagyszerű ötleteket adhatnak a saját terveihez.

Élvezze az ideális hírleveleket!

Alertful for Business