9 triky na dizajn Perfektný HTML Newsletter

E-mailový spravodaj je dokonalý spôsob, ako zostať v kontakte so svojimi klientmi alebo následníkmi. Často vaša firma alebo webová stránka bude mať mnoho aktualizácií produktov, prípadne budúcich udalostí, ktoré chcete zdieľať. Vždy je možné uverejňovať nové informácie na vašom blogu alebo streamoch sociálnych médií, ale vaše publikum môže ísť len tak ďaleko, aby vás kontaktovalo. V tomto prípade e-mail určite nie je mŕtva technológia, len nevyužitý potenciál.

Proces vytvárania a odosielania noviniek je oveľa jednoduchší, než si možno myslíte, ale navrhnúť vlastnú šablónu a vytvoriť si vlastný kód - to môže trvať trochu dlhšie.

Zostavili sme niekoľko fantastických tipov, ktoré vám pomôžu navrhnúť kvalitné HTML spravodajky, ako nikdy predtým. Dokonca aj keď ste nováčikom k predmetu, určite nájdete niektoré neoceniteľné informácie, ktoré vám umožnia začať v procese e-mailového marketingu.

Ciele Newsletteru

Predtým, než sa dostaneme do aspektov návrhu, mali by sme objasniť váš účel vytvorenia spravodaja. V závislosti od typu webových stránok, ktoré používate, sa informácie obsiahnuté vo vašom bulletine môžu dramaticky odlišovať od ostatných, ale hlavným účelom newsletteru je poskytovať pohodlné aktualizácie priamo do priečinka doručenej pošty čitateľa.

Používatelia ťažkého internetu pravdepodobne kontrolujú svoj e-mail viac ako dvakrát denne. Dokonca aj tí, ktorí sú stále zaneprázdnení, si budú musieť aspoň raz denne prečítať svoje správy. To je ten správny čas zachytiť pozornosť dokonca bez toho, aby ste museli navštíviť vaše stránky. Dokonca aj keď nikto klikne na vaše odkazy, informácie sú stále prijaté, čo je skvelé pre budovanie značky.

Zvážte niektoré témy, ktoré by ste mali ponúknuť vo svojom dizajne. Zahŕňate odkazy na registráciu svojej služby; prípadne blogové odkazy alebo naposledy publikované články na vašich stránkach? Usporiadanie vášho bulletinu odzrkadľuje, ako chcete, aby vaši čitatelia reagovali, avšak nakoniec sa snažíte zdvihnúť záujem a preniesť niektoré zaujímavé útvary informácií na masy.

1. Použite tabuľky v rozložení

Môže sa to zdať trochu rozporuplné s dnešnými modernými webovými štandardmi, ale e-maily sú stále archaické vo vykresľovacích motoroch, takže musíte stavať na starších modeloch. Bohužiaľ sú tabuľky najjednoduchší spôsob aby všetko fungovalo správne medzi rôznymi e-mailovými klientmi. V závislosti od vašich znalostí o zostavovaní stolových tabuliek by to mohlo byť skutočne dobrou správou!

Možno sa tiež divíte, prečo div a ďalšie blokové prvky nie sú taký dobrý nápad. Väčšina e-mailových klientov je postavený tak, aby zbavil akéhokoľvek cudzieho CSS Obsah. To znamená, že nebudete môcť používať veľa z ničho okrem toho inline CSS (a dokonca aj plná podpora je nepríjemná). Klienti ako Microsoft Outlook 2007 a Gmail spoločnosti Google majú veľmi nízku podporu pre pohyblivé prvky a priame umiestnenie.

Najlepším riešením by bolo vložte viac stôp do seba. Padovanie a okraje nie sú nastavené na určitý rozsah medzi mnohými e-mailovými klientmi. To je dôvod na to, aby ste sa držali používania šírka = "hodnota" na všetkých prvkoch buniek tabuľky. Tieto budú vždy zobrazovať rovnakú šírku bez ohľadu na to, ktorý e-mailový klient používajú čitatelia, takže je to veľa bezpečnejšie a konzistentnejšie nastavte polstrovanie a okraje pomocou prázdnych buniek tabuľky.

2. Umiestnenie s pevnou šírkou

Máte niekoľko možností, ako vytvoriť návrhy vášho newsletteru rozloženie, ale najlepší spôsob, ako nasledovať je nastaviť pevnú šírku pre obsahujúcu tabuľku. Existuje veľa rôznych rozlíšení monitora - nebudete môcť vyhovieť všetkým. Ak nemáte konkrétne prvky so statickými šírkami, môžete ich vždy používať šírka = "100%" na vašej tabuľke. To umožní, aby váš obsah vyplnil celú šírku všetkých e-mailových klientov.

Pre mnohých je však táto metóda trochu príliš laxná. Konštruktívne informačné bulletiny bude vyžadovať pevnú šírku vo väčšine prípadov, najmä ak budete používať bannery a obrázky nastavené na určitú veľkosť. Odporúčam pracovať s Maximálna šírka dokumentu 500 x 600 pixlov. Horizontálna veľkosť obrazovky pre iPhone a niektoré modely BlackBerry je obmedzená na 320 pixlov, takže aj pri 500 pixlách bude vaša e-mailová šablóna zmenšený, aby správne zapadol.

Vzhľadom na to, že mnohí používatelia mobilných telefónov si v každom prípade vyberajú e-mail bez HTML, nemali by to byť obrovský problém. Používatelia desktopových a webmailových klientov pravdepodobne budú mať podobné nastavenie bez ohľadu na operačný systém, ktorý používajú. Ak máte pochybnosti vytvorte niekoľko vzorov šablón a vyberte tie, ktoré sa vám najviac páči!

3. Jednotky pixelov

Ak vo svojom spravodajstve nepoužívate kvapalné prvky, je pravdepodobné, že budete musieť rozdeliť niekoľko vecí. Pokúste sa ho udržať pixelov (px) namiesto iného typu jednotky. Percentá sa môžu ľahko zmiešať s mnohými klientmi a softvérovými oknami. S menším počtom stránkových prvkov môže kvapalné rozloženie vypadnúť nepoškodené, hoci s niekoľkými chybami.

Ale pixely sú vždy istá vec. Ak pracujete v rámci hranice maximálnej šírky 600 pixlov, môžete skutočne zapadnúť do nej veľa obsahu. Expozícia je jednoduchšia, ak rozdeľte rozloženie na dva alebo tri stĺpce a vždy napíšte svoje veľkosti v pixeloch. Jedinou výnimkou môže byť veľkosť písma kde EMS môže vašim čitateľom lepšie podporiť, ale em veľkosť sa bude líšiť podobným spôsobom v záujme jednoduchosti dodržujte zarovnanie na základe pixelov.

4. Možnosti s CSS

Môže sa zdať, že e-mailový dizajn má zničiť používanie štýlov CSS. Aj keď je veľa nepodporovaných funkcií, CSS je v mnohých prípadoch stále dokonale prijateľné. Monitor kampane má krásnu tabuľku podporovaných vlastností CSS, ktoré sú uvedené v e-mailovom klientovi. Všetci budú podporovať základy, ako je font-family a štýl písma, takže môžete preskočiť značku, ak chcete.

Buďte opatrní, pokiaľ ide o štýly písma, aby ste nepritiahli hranice príliš ďaleko. Ak máte pocit nepríjemnosti v inline štýloch, je vždy možné použiť značku písma HTML aj napriek tomu, že je zastaraná. Ak ste dizajnér CSS, nemusíte ukončiť systém, ale akékoľvek skrátenie kódu CSS môže mať za následok chybné návrhy. Napríklad písmo: 12px / 14px Arial, sans-serif; skratka vám pomôže ušetriť veľa miesta, ale nie je plne akceptovaná pre návrh e-mailu, a to aj vtedy, keď sa používa s vloženými štýlmi.

Dokonca aj vaše farebné voľby by mali byť napísané z dlhej ruky. Hex farby ako napr #ccc alebo # E3F musí byť napísané úplne ako #cccccc alebo # ee33ff, resp. Ak môžete vytvoriť to, čo potrebujete bez CSS, odporúčam túto cestu, ale úplne nevyhýbajte sa z CSS v návrhoch e-mailov, pretože na rozdiel od všeobecného presvedčenia je vo väčšine prípadov podporovaná.

5. Najlepšie postupy na ukotvenie odkazov

Určite budete chcieť do svojho bulletinu obsahovať odkazy. Môžu to byť odchádzajúce odkazy na iné stránky po celom webe alebo odkazy, ktoré vedú k najobľúbenejším stránkam na vašich webových stránkach. Okrem toho väčšina pätiek bude obsahovať odkaz na zrušenie odberu pre čitateľov, ktorý sa rozhodne pre odhlásenie z e-mailového procesu, ale ako by ste mali zvládnuť všetky tieto odkazy vo vašom dizajne?

No, je potrebné najprv poznamenať, že e-mail klienti sú veľmi jemne svojimi návrhmi. Mnohí sa rozhodnú prepísať štýly odkazov, a to aj pomocou inline CSS. Jednoduchý trik je obsahujú ako vnútornú farbu, tak aj dodatočnú značku rozpätia v prvku kotvy. Ak je farba a dizajn vašich odkazov dôležitá pre celkový dizajn, budete potrebovať dodatočné opatrenia. Pridal som malý príklad malého kódu:

nejaký text odkazu

Účinky vznášania sú nie je podporovaný v programoch Outlook 2007/2010, Gmail, iOS alebo Android. Možno budete chcieť zahrnúť a: hover štýlu pre všetkých podporujúcich klientov: Outlook 2000/2003, Hotmail, Apple Mail a Yahoo! mail, ale osobne nevidím veľa skúseností v čiastočnom používateľskom zážitku, pretože selektory kotvy nie sú silne podporované, odporúčam ponúka len 2-3 odkazy farieb používať v celom svojom dizajne.

Ako predpoklad, používatelia tiež očakávajú, že vaše odkazy sa otvoria na novej karte alebo okne. V ideálnom prípade target = "_ blank" atribút by mal stačiť na to, aby všetky prehliadače rozpoznali túto funkčnosť a zahrnutie tohto atribútu do vašich ukotvených odkazov by nemal negatívne ovplyvňovať softvér elektronickej pošty, ako napríklad Lotus Notes alebo Outlook.

6. Testujte všetkých hlavných klientov

Nedávna štúdia najobľúbenejších e-mailových klientov (vykonaná Monitorom kampane) ukazuje desať najobľúbenejších e-mailových klientov za uplynulý rok. Môže sa to zdať trochu zdĺhavé, ale návrhári by mali mať zvyk kontrolovať svoje bulletiny na všetkých hlavných e-mailových klientov, prinajmenšom na niektorých z bežnejších klientov, ako sú Gmail, Hotmail alebo Yahoo! pošta.

Nezahŕňa výlučne webovú poštu, ale aj operačný softvér v systéme Mac OS X a Windows. Tiež podľa ich diagramu iOS Mail a Android ktoré sa v posledných niekoľkých rokoch premietli do zoznamu prvých desiatich. V skutočnosti iPhone, iPod Touch a iPad Mail patrí medzi najpopulárnejšie v programe Outlook! Bohužiaľ neexistuje spôsob, ako ich otestovať bez toho, aby ste vlastnili jedno zariadenie - takže sa budete musieť vyrovnať s inými možnosťami.

Jedna chyba s podporou mobilných telefónov prichádza v mnohých modeloch iPhone a Android. Mobilné vykresľovanie e-mailov bude často zmena veľkosti textu vo vašej šablóne. To nemusí mať vplyv na dizajn, ale môže to byť pre niektorých čitateľov nepríjemné. Používanie CSS -webkit-text-size-adjust: žiadne;, vôľa zabezpečiť rovnomerné rozlíšenie textu vo všetkých analytických motoroch bez potreby testovania.

Ak poznáte svojich priateľov alebo kolegov, ktorí používajú alternatívny softvér, môžete to urobiť požiadajte o pomoc pri testovaní newslettera. Môžete to urobiť pošlite im kópiu e-mailu skontrolovať svoje zariadenie alebo požičať zariadenie aktívne vyčistiť kódovacie chyby. Našťastie Outlook ponúka verziu pre inštaláciu systému Mac, takže nebudete musieť sledovať používateľov systému Windows pre tieto optimalizácie, ale pokiaľ ide o aplikáciu Lotus Notes alebo Windows Mail, môžete mať šťastie.

Alternatívou je platiť za riešenie ako napríklad Náhľad mojich e-mailov, bohužiaľ neposkytujú žiadne bezplatné demo účty, ale ich služba je dobre známa tým, že ponúka skvelé náhľady vášho dizajnu. E-mail o Acid je podobná služba, ktorá ponúka bezplatný účet, ale nedovoľuje vám testovať na všetkých klientov, aký druh porazí účel. Služby vykresľovania online by mali byť užitočné, ak potrebujete otestovať veľa šablón newsletteru v dlhodobom horizonte bez použitia alternatívnych počítačov, avšak nie sú zásadné, takže nestresujte ak ich nemôžete otestovať!

7. Vždy ponúknuť zobrazenia na webe

Čitatelia nebudú vždy schopní (alebo nechcú) vidieť váš e-mail natívne. Ponúka inú verziu niekde na webe poskytne zmysel pre ľahkosť a kompatibilitu. Tento proces nemôže byť úplne automatizovaný, pokiaľ neplánujete zahrnúť a obyčajný text verzia.

Takto by ste to urobili odstráňte všetky značky HTML z rozloženia bulletinu. Nebudete môcť zahrnúť odkazy alebo štýly pre nič. Celý obsah by bol jednoduchý byť usporiadaný ako textový súbor pre čitateľov bez možností vykresľovania. To je určite dobrá alternatíva, ale keď ponúknete úplnú webovú verziu toho istého bulletinu odoberie škody spôsobené akoukoľvek chybou vykresľovania. Väčšina čitateľov bude prevádzkovať aktuálny webový prehliadač, ktorý si môžete štýlovať a zostaviť svoj newsletter na dokonalosť.

Ako nastavíte stránku celá vaša voľba. Niektoré webové stránky budú venujte celý príspevok blogu duplikácii obsahu e-mailu, možno s niektorými Ďalšie informácie. Iní budú vytvorte samostatnú stránku mimo hlavnej webovej stránky bez priamych odkazov v navigácii. Táto metóda môže byť prospešná, pretože čitatelia nebudú rozptýlené vašou hlavnou webovou šablónou alebo obsahom bočného panela.

8. Pridanie obrázkového obsahu

Obrázky sú ďalším dôvodom na to, aby vašim čitateľom ponúkli webové riešenie. Štandardne sú poštové klienti sú nastavené na odstránenie obrázkov z obsahu. Ak je vaša adresa pridaná do bezpečného zoznamu, všetky obrázky sa predvolene zobrazia, ale používateľ musí toto nastavenie akceptovať takže to určite nie je zárukou. proste uistite sa, že obrázky nie sú potrebné ako súčasť hlavného obsahu, ale je zahrnutá ako doplnok pre optimalizáciu stránky.

Akonáhle sa dostanete na export grafiky, existuje niekoľko tipov na vytváranie obrázkov špeciálne pre e-mail. Budete chcieť vždy nastavte atribúty šírky aj výšky na svojom img tagy. Bez týchto špecifikácií v poradí, niektorí klienti skreslia obsah obrázka. alt značka sa tiež ukáže ako užitočná, takže návštevníci budú vedieť, čo obsah obrázka obsahuje pred načítaním.

Ako už bolo uvedené, umiestnenie obrázkov vo vašom e-maile môže byť zložité. Nepoužívajte plaváky za každú cenu! Obrázok align = "vľavo" atribút bude fungovať oveľa lepšie, alebo alternatívne mapovať presné bunky tabuľky aby zodpovedali vašim snímkam pozdĺž hornej, ľavej alebo pravej strany vášho bulletinu. Nebudete môcť dosiahnuť perfektnú zhodu s mnohými klientmi tam (najmä mobilných klientov), ale optimalizujte svoje obrázky a udržiavajte veľkosť súborov malú pre dosiahnutie najlepších výsledkov.

Čo sa týka ukladania obrázkov, odporúčame vám uchovávať všetky súbory vo vašom vlastnom webovom serveri. Toto je lepšia voľba namiesto použitia iného hostiteľa obrázkov alebo odovzdaním súborov do online newsletteru. Navyše by ste mali oddeľte obsah vašich bulletinov od ostatných obrázkov v štruktúre priečinkov ako / Img / email alebo / Img / email / 2011.

9. Vyhnite sa priečinku Spam!

To môže byť ťažké počuť, ale nie všetci e-mail klienti sú priateľskí voči bulletine. Každý deň sa odosielajú miliardy e-mailov a väčšina obsahuje spam alebo škodlivý obsah, takže tieto bezpečnostné opatrenia zabudované do priečinka Doručená pošta sú jednoznačne bezpečnostnými opatreniami.

Avšak, pokiaľ ide o internetový marketing, môžete ľahko odradiť, aby sa váš najnovší newsletter skončil s nevyžiadanou poštou. Ak chcete znížiť šance tohto udalosti, mali by ste vyčistite svoj dizajn pre jednoduchosť. Nedávajte nepríjemné obrázky alebo vyhodiť do povedomia text s niekoľkými stovkami kľúčových slov.

Tiež sa snažte uchovávajte svoj obsah krátky a on-topic. Nemusíte obsahovať celý obsah pre všetky vaše články alebo stránky. Pokúste sa pridať na vašu webovú lokalitu namiesto dlhého zápisu vetu alebo dve alternatívne odkazy. skôr, ako váš e-mail vyzerá, tým je pravdepodobnejšie, že prejde spamovou kontrolou.

Galéria návrhov spravodajcu

Akú zábavu by mohol byť e-mailový newsletter bez niekoľkých fantastických príkladov? Existuje niekoľko vzorov e-mailových spravodajcov a šablón, ktoré môžete zistiť v službe Google. Galéria HTML e-mailov je veľmi populárny zdroj inšpirácie.

Nižšie sú uvedené snímky obrazovky z mnohých bulletinov v galérii kampane Monitorovanie kampane. Dúfajme, že tieto úžasné rozloženia vám poskytnú skvelé nápady pre vaše vlastné návrhy.

Bavte sa pri navrhovaní vašich ideálnych bulletinov!

Upozornenie pre podnikanie