9 triky navrhnout Perfektní HTML Newsletter

E-mailový zpravodaj je ideální způsob, jak zůstat v kontaktu se svými klienty nebo následovníky. Často bude mít vaše společnost nebo webová stránka řadu aktualizací produktů nebo možná nadcházející události, které chcete sdílet. Je vždy možné posílat nové informace do svého blogu nebo sociálních mediálních proudů, ale vaše publikum může jít až tak daleko, aby vás oslovilo. V tomto případě e-mail rozhodně není mrtvá technologie, pouze nevyužitý potenciál.

Proces vytváření a odesílání newsletteru je mnohem jednodušší, než si člověk může myslet, ale navrhnout vlastní šablonu a vytvořit si vlastní kód - to může trvat o něco déle.

Sestavili jsme několik fantastických tipů, které vám pomohou navrhnout vysoce kvalitní informační bulletiny HTML, jako nikdy předtím. Dokonce i když jste nováček na toto téma, určitě najdete neocenitelné informace, abyste mohli začít v procesu e-mailového marketingu.

Cíle zpravodaje

Předtím, než se dostaneme do aspektů návrhu, měli bychom objasnit váš účel pro vytváření newsletteru. V závislosti na typu webové stránky, kterou provozujete, se informace obsažené ve vašem newsletteru mohou výrazně lišit od ostatních, ale hlavní účel newsletteru je poskytovat pohodlné aktualizace přímo do složky Doručená pošta čtenáře.

Silní uživatelé internetu pravděpodobně zkontrolují svůj e-mail více než dvakrát denně. Dokonce i ti, kteří jsou neustále zaneprázdněni, budou mít čas projít si své zprávy alespoň jednou denně. To je ideální čas zaujmout i bez nutnosti návštěvy vašich stránek. I když nikdo neklikne přes vaše odkazy, informace jsou stále přijata, což je skvělé pro budování značky.

Zvažte některá z témat, která byste ve svém návrhu měli nabídnout. Jste včetně odkazů na registraci pro vaši službu; možná odkazy na blog nebo naposledy publikované články na vašich stránkách? Uspořádání vašeho newsletteru bude odrážet, jak si přejete, aby vaši čtenáři reagovali, ale nakonec se snažíte vzbudit zájem a projít kolem některých zajímavých informací o masách..

1. Využití tabulek v rozvržení

To se může zdát trochu protichůdné vůči dnešním moderním webovým standardům, ale e-maily jsou v jejich renderovacích strojích stále archaické, takže musíte stavět na starších modelech. Bohužel tabulky jsou nejjednodušší způsob aby vše fungovalo správně mezi různými e-mailovými klienty. V závislosti na vašich znalostech budování rozvržení podle tabulky by to mohlo být ve skutečnosti jako dobrá zpráva!

Můžete se také divit proč div a další blokové prvky nejsou tak dobrý nápad. Většina e-mailových klientů je postaven tak, aby odstranil jakékoli cizí CSS obsah. To znamená, že nebudete moci používat většinu z čehokoli kromě inline CSS (a dokonce plná podpora je choulostivá). Klienti, jako je Microsoft Outlook 2007 a Google Gmail, mají velmi nízkou podporu pro plovoucí elementy a přímé umístění.

Nejlepší řešení by bylo vnořit do sebe více tabulek. Výplň a okraje nejsou nastaveny na konkrétní měřítko mezi mnoha e-mailovými klienty. To je důvod, proč se držet používání width = "value" na všechny prvky tabulky. Ty budou vždy zobrazovat stejnou šířku bez ohledu na to, který e-mailový klient používají vaši čtenáři, takže je to hodně bezpečnější a konzistentnější nastavit výplň a okraje pomocí prázdných buněk tabulky.

2. Umístění pevné šířky

Máte několik možností při vytváření návrhů rozvržení newsletteru, nicméně nejlepší možností je následovat nastavit pevné šířky pro vaši tabulku obsahující. Existuje mnoho různých rozlišení monitorů - nebudete schopni potěšit každého. Pokud nemáte konkrétní prvky se statickými šířkami, můžete vždy použít width = "100%" na vaší tabulce. To umožní, aby váš obsah vyplnil celou šířku všech e-mailových klientů.

Nicméně, pro mnoho tato metoda je trochu příliš laxní. Konstruktivní informační bulletiny ve většině případů bude vyžadovat pevnou šířku, zejména pokud budete používat bannery a obrázky nastavené na určitou velikost. Doporučuji pracovat s Maximální šířka dokumentu 500px - 600px. Horizontální velikost obrazovky iPhone a některých modelů BlackBerry je omezena na 320px, takže i při 500px bude vaše e-mailová šablona zmenšeny tak, aby se vešly správně.

Vzhledem k tomu, že mnoho mobilních uživatelů se rozhodlo pro zobrazení e-mailu bez ohledu na HTML, nemělo by to být velký problém. Uživatelé klientských počítačů a webmailu se pravděpodobně setkají s podobným nastavením bez ohledu na operační systém, který používají. V případě pochybností vytvořit několik návrhů šablon a vybrat ty, které se vám líbí nejlépe!

3. Pixelové jednotky

Pokud nebudete ve svém newsletteru používat tekuté prvky, je pravděpodobné, že budete potřebovat pár věcí. Snažte se to udržet pixely (px) než v jiném typu jednotky. Procenta lze snadno smíchat s mnoha klienty webmailu a softwarovými okny. S menším počtem prvků stránky může rozvržení tekutin vyjít bez úhony, i když s několika chybami.

Pixely jsou však vždy jistá věc. Práce v rámci maximální šířky 600px, můžete skutečně vešly do obsahu. Expozice je snazší, pokud rozdělíte rozložení do dvou nebo tří sloupců a vždy zapíšete své velikosti v pixelech. Jedinou výjimkou může být velikosti písma kde ems může lépe podpořit vaše čtenáře, ale em velikost se bude lišit podobným způsobem, jak by tomu bylo u procent Pro jednoduchost se držte zarovnání založených na pixelech.

4. Možnosti s CSS

Může se zdát, že design e-mailu je mimo zničení použití stylů CSS. Přestože existuje mnoho nepodporovaných funkcí, CSS je v mnoha případech stále zcela přijatelný. Monitor kampaně má krásnou tabulku podporovaných vlastností CSS uvedených e-mailovým klientem. Vše bude podporovat základy jako font-family a styl fontu, takže můžete přeskočit přes pokud chcete.

Buďte opatrní, pokud jde o styly písma, aby se hranice příliš neposunuly. Pokud se cítíte nepříjemně s inline styly, je vždy možné použít tag HTML fontu, i když to bylo zastaralé. Pokud jste návrhář CSS, nemusíte systém opustit, ale jakékoli zkratkové kódování CSS může mít za následek chybné návrhy. Jako příklad písmo: 12px / 14px Arial, sans-serif; zkratka může pomoci ušetřit spoustu místa, ale není plně akceptována pro e-mailový design, i když je používán s inline styly.

Dokonce i vaše barevné volby by měla být napsána dlouho. Šestihranné barvy jako #ccc nebo # e3f musí být napsáno v plném znění jako. \ t #cccccc nebo # ee33ff, resp. Pokud můžete sestavit to, co potřebujete, bez CSS, doporučuji tuto cestu, ale nemusíte se úplně vyhýbat CSS v e-mailových návrzích, protože na rozdíl od všeobecného přesvědčení je podporována ve většině případů.

5. Odkazy na kotvy Nejlepší postupy

Určitě budete chtít zahrnout některé odkazy do svého newsletteru. Ty by mohly být odchozí odkazy na jiné stránky v okolí webu, nebo možná odkazy vedoucí k nejpopulárnějším stránkám na vašich webových stránkách. Navíc většina zápatí bude obsahovat odkaz na odhlášení pro čtenáře, aby se odhlásili z e-mailového procesu, ale jak byste měli všechny tyto odkazy zpracovat ve svém návrhu.?

Nejdříve je třeba poznamenat, že e-mailové klienty jsou svým designem velmi vybíravé. Mnozí se rozhodnou přepsat vaše styly odkazů, a to i v inline CSS. Úhledný trik je Zahrnují jak inline barvu, tak dodatečnou značku rozpětí uvnitř kotevního prvku. Pokud je barva a styl vašich odkazů důležitý pro celkový design, budete chtít přijmout zvláštní opatření. Přidal jsem malý příklad kódu níže:

text odkazu

Hover účinky jsou není podporován v aplikaci Outlook 2007/2010, Gmail, iOS nebo Android. Můžete stále chtít zahrnout a: hover styl pro všechny podporující klienty: Outlook 2000/2003, Hotmail, Apple Mail a Yahoo! e-mail, ale osobně nevidím velký přínos v částečném uživatelském zážitku, protože voliče kotev nejsou silně podporovány. jen nabízet 2-3 linkové barvy používat v celém svém návrhu.

Jako předpoklad budou uživatelé také očekávat, že se vaše odkazy otevřou v nové kartě nebo okně. V ideálním případě target = "_ blank" atribut by měl být dostačující pro všechny prohlížeče, aby tuto funkci rozpoznali, a zahrnutí tohoto atributu do odkazů na kotvy by nemělo negativně ovlivnit e-mailový software, například Lotus Notes nebo Outlook.

6. Test ve všech významných klientech

Nedávná studie většiny nejoblíbenějších e-mailových klientů (provedená Campaign Monitor) ukazuje deset nejoblíbenějších e-mailových klientů v uplynulém roce. Může se to zdát trochu nudné, ale designéři by se měly dostat do zvyku kontrolovat své informační bulletiny na všech hlavních e-mailových klientech, přinejmenším na některých běžnějších klientech, jako je Gmail, Hotmail nebo Yahoo! Pošta.

To nezahrnuje pouze webmail, ale také operační software pro Mac OS X i Windows. Také podle jejich diagramu iOS Mail a Android oba letěli do posledních deseti let. Ve skutečnosti iPhone, iPod Touch a iPad Mail řadí # 2 nejoblíbenější přímo pod aplikací Outlook! Bohužel neexistuje způsob, jak je otestovat, aniž byste vlastnili některý ze zařízení - takže se budete muset vypořádat s dalšími možnostmi.

Jedna chyba s mobilní podporou přichází v mnoha modelech iPhone a Android. Často se bude zobrazovat mobilní e-mailové vykreslování změnit velikost textu uvnitř šablony. To nemusí mít velký vliv na váš návrh, ale může být nepříjemné pro některé čtenáře. Použití CSS -webkit-text-size-adjustment: žádný;, vůle Zajistěte ještě standardní velikost textu ve všech parsovacích strojích bez nutnosti otestovat.

Pokud znáte nějaké přátele nebo kolegy, kteří používají alternativní software, možná budete chtít požádat o pomoc při testování newsletteru. Můžeš buď kopii e-mailu zkontrolovat jejich zařízení nebo zapůjčit si zařízení aktivně odstraňovat kódování chyb. Naštěstí aplikace Outlook nabízí verzi pro instalaci systému Mac, takže pro tyto optimalizace nebudete muset sledovat uživatele systému Windows, ale pokud jde o aplikaci Lotus Notes nebo Windows Mail, můžete mít štěstí.

Alternativou je zaplatit za řešení například Náhled můj e-mail, bohužel neposkytují žádné bezplatné demo účty, ale jejich služba je dobře známá nabídkou skvělých náhledů svého návrhu. E-mail na Acid je podobná služba, která nabízí bezplatný účet, ale neumožňuje vám otestovat všechny klienty, což tento účel poráží. Online vykreslování služby by měly být užitečné, pokud potřebujete otestovat mnoho šablon bulletinů v dlouhodobém horizontu bez použití alternativních počítačů, ale nejsou zásadní. nestresujte pokud je nemůžete otestovat všechny!

7. Vždy nabízejte webová zobrazení

Čtenáři nebudou vždy schopni (nebo být ochotni) zobrazit vaše e-maily nativně. Nabízí jinou verzi někde na webu dává pocit lehkosti a kompatibility. Tento proces nelze zcela automatizovat, pokud nechcete zahrnout prostý text verze.

Tímto způsobem stripovat všechny HTML tagy z rozložení newsletteru. Ty by nebylo možné zahrnout odkazy nebo styly pro nic. Veškerý obsah by jednoduše jako prostý textový soubor pro čtenáře bez možnosti renderování. To je jistě dobrá alternativa, ale když nabídnete plnou webovou verzi stejného newsletteru odstraní škodu způsobenou jakoukoli chybou renderování. Většina čtenářů bude provozovat aktuální webový prohlížeč, který si můžete vytvořit a sestavit svůj newsletter a dokonalost.

Jak nastavit stránku je zcela vaše volba. Některé webové stránky budou věnovat celý blogový příspěvek duplikaci obsahu e-mailu, možná s některými dodatečné informace. Jiní budou vytvořit samostatnou stránku mimo hlavní webovou stránku bez přímých odkazů v navigaci. Tato metoda může být prospěšná, protože čtenáři nebudou rušeni šablonou hlavní stránky nebo obsahem postranního panelu.

8. Přidání obrazového obsahu

Obrázky jsou dalším důvodem, proč svým čtenářům nabídnout webové řešení. Ve výchozím nastavení jsou e-mailové klienty jsou nastaveny tak, aby odstranily obrázky z obsahu. Pokud je vaše adresa přidána do bezpečného seznamu, budou všechny obrázky zobrazeny ve výchozím nastavení, ale uživatel musí toto nastavení akceptovat tak to určitě není záruka. Prostě ujistěte se, že obrázky nejsou požadovány jako součást hlavního obsahu, ale zahrnoval to jako dodatečná poleva pro estetiku stránky.

Jakmile se dostanete k exportu grafiky, existuje několik tipů pro vytváření obrázků speciálně pro e-mail. Budete chtít vždy nastavte atributy šířky i výšky na vašem img tagy. Bez těchto specifikací v pořádku, Někteří klienti zkreslí obsah obrázku. An alt značka bude také užitečná, takže návštěvníci budou vědět, co obsah obrázku obsahuje, než bude načten.

Jak bylo uvedeno výše, umístění obrázků ve vašem e-mailu může být složité. Nepoužívejte plováky za každou cenu! Obrázek align = "left" atribut bude fungovat mnohem lépe, nebo alternativně mapovat přesné buňky tabulky přizpůsobit své obrázky podél horní, levé nebo pravé straně vašeho newsletteru. Nebudete moci získat dokonalý souboj s tolika klienty (zejména mobilní klienty), ale optimalizujte své obrázky a udržujte velikost souborů malé pro dosažení nejlepších výsledků.

Pokud jde o ukládání obrázků, doporučuje se, abyste je používali uchovávat všechny soubory na vlastním webovém serveru. To je lepší volba místo použití jiného hostitele obrazu, nebo nahráním souborů do služby online newsletteru. Navíc byste měli oddělte obsah svých bulletinů od zbytku obrázků ve struktuře složek jako tak / img / email nebo / img / email / 2011.

9. Vyhněte se složce Spam!

To může být těžké slyšet, ale ne všichni e-mailoví klienti jsou přátelští vůči zpravodajům. Každý den jsou zasílány miliardy e-mailů a většina z nich obsahuje spam nebo škodlivý obsah..

Nicméně, pokud jde o internetový marketing, můžete být snadno odrazeni, abyste viděli svůj poslední newsletter skončit s nevyžádanou poštou. Chcete-li snížit šance, že se to stane, měli byste Vyčistěte svůj design pro jednoduchost. Neprovádějte nepříjemné obrázky nebo vyhodit svůj titul text se stovkami klíčových slov.

Zkuste také Udržujte svůj obsah stručný a na téma. Nemusíte zahrnout plný obsah pro všechny vaše články nebo stránky. Zkuste přidat větu nebo dvě s alternativním odkazem na vaše webové stránky namísto dlouhého záznamu. více stručné váš e-mail vypadá, tím je pravděpodobnější, že projde kontrolu spamu.

Galerie návrhů bulletinu

Jaká legrace by byl článek e-mailového zpravodaje bez nějakých fantastických příkladů? Ve službě Google jsou k dispozici spoustu návrhů e-mailových zpravodajů a šablon. Galerie e-mailů ve formátu HTML je velmi populárním zdrojem inspirace.

Níže jsem uvedl screenshoty z mnoha informačních bulletinů v galerii Monitor kampaně. Doufejme, že tyto úžasné rozložení vám může poskytnout skvělé nápady pro vaše vlastní návrhy.

Bavte se navrhování ideální zpravodajů!

Alertful for Business