Zatímco spousta online komunikace se přesunula do sociálních médií, e-mail je stále velmi důležitou součástí jakékoli online marketingové kampaně. A když přemýšlíme o marketingu e-mailů, to, co obecně přichází na mysli, je HTML e-mail, spíše než prostý text.

Navrhování e-mailů je podobně jako návrh jednoduché webové stránky, ale existují některé klíčové rozdíly, které je třeba vzít v úvahu. Také je třeba mít na paměti, že e-mail je spíše než tah, komunikace.

Lidé často dostanou e-maily ohromnou rychlostí, a ne vždy, když je pro ně vhodné, aby se na ně dívali. To znamená, že máte jen zlomek sekundy, abyste upoutali pozornost, než se přesunou na další zprávu ve své schránce (na rozdíl od webových stránek, které se rozhodly navštívit v určitou dobu).

Ale pokud to budete mít na paměti - že máte jen okamžik, abyste upoutali pozornost vašeho čtenáře - budete mít mnohem jednodušší a hladší zážitek při navrhování efektivních e-mailů.

Mobile nebo poprsí

Tolik lidí přistupuje k e-mailům z mobilního zařízení (v mobilních aplikacích je téměř polovina všech e-mailů otevřena), že je zbytečné strávit spoustu času při vytváření krásných e-mailů, které se na takových zařízeních nezobrazují správně.

iphone e-mail

Koneckonců, pokud e-mail nevypadá správně, když kontroluje telefon, jaké jsou vaše šance, že se na něj budou znovu podívat, když se vrátí na svůj stůl? Vsadil bych se docela štíhlý. Ve skutečnosti se většina z nich pravděpodobně chystá smazat e-mail nebo horší - odhlásit se.

Existují dva způsoby, jak jít o navrhování pro mobilní zařízení. Můžete vytvářet e-maily, které změní velikost tak, aby se vešly na obrazovku čtenáře, což může být dokonale přiměřené pro některé jednoduché návrhy. Nebo můžete vytvořit odpověď, která se přizpůsobí různým velikostem obrazovky.

Existují výhody a nevýhody obou přístupů. E-maily, které se mění, jsou poměrně snadné kódovat a budou mít tendenci pracovat prakticky na jakémkoli zařízení. Ale nejlépe fungují s velmi jednoduchými návrhy e-mailů, které dokážou zvládnout při výrazně menším než desktopu.

Odpovědné návrhy jsou mnohem komplexnější pro kódování a nepodporují je všechny mobilní prohlížeče (i když se podpora bude pravděpodobně i nadále zlepšovat v budoucnu).

Odpovědný design

Odpovědné návrhy pravděpodobně budou pro většinu vašich e-mailů HTML praktičtější než rozvržení, které jednoduše změní velikost. Je to proto, že na velmi malých obrazovkách budou e-maily, které byly jednoduše zmenšeny, téměř jistě budou velmi obtížné číst.

Již jsme projednali, proč jsou e-maily přátelské k mobilním telefonům životně důležité, ale tady je pár věcí, které je třeba mít na paměti při návrhu těchto e-mailů. Jedná se o věci, které by měly být spouštěny pro mobilní rozvržení, a lze je přizpůsobit pro verze s větší obrazovkou vašich e-mailů.

  1. Vaše rozložení by mělo být poměrně úzké: někde v rozmezí 500-600 pixelů je standardní. To jim umožní lépe číst na stolních a mobilních zařízeních, s menší pravděpodobností, že vaše rozložení bude v případě změn velikosti vyčerpáno.
  2. Ujistěte se, že vaše písma jsou dostatečně velká. Uvědomte si, jaké jsou minimální velikosti písma pro různé platformy tak, aby vaše písma nebyla zmenšena (což by mohlo ovlivnit vaše uspořádání). Například iOS používá minimální velikost písma 13 pixelů.
  3. Klopné oblasti musí být vhodné pro připojení. To znamená, že je dostatečně velké a dostatečně izolované od ostatních odkazů, takže uživatel je může snadno aktivovat na první pokus (protože nemusíte dostat sekundu).
  4. Neváhejte použít displej: žádné, abyste skryli nepotřebné prvky v mobilních rozvrženích. Co je uživatelsky přívětivé na ploše nebo dokonce i na tabletu, se stává nepříjemným nepořádek na smartphonu. Méně je rozhodně více na menších obrazovkách.

Stojí za to, abyste čas předtím, než začnete kódovat, nakreslili wireframes jak pro mobilní, tak pro pracovní plochy. Věnujte pozornost tomu, kde se vaše výzva k akci a další důležité informace zobrazují zejména v mobilní verzi.

Typografické úvahy

Zatímco mnoho návrhářů se zaměřuje na grafický obsah HTML e-mailů, typografie je ještě důležitější než na mnoha webových stránkách. Vezmeme-li v úvahu, kolik e-mailových klientů zabraňuje původnímu načtení obrázků, někteří příjemci e-mailu mohou kdykoli vidět typografii.

Zvažte použití velkých typů pro lepší čitelnost bez ohledu na velikost obrazovky. Mějte také na paměti délky čáry na různých velikostech obrazovky a ujistěte se, že nejsou příliš dlouhé (což může způsobit, že oko bude cestovat z jednoho řádku na druhý bez ztráty místa) nebo příliš krátké více rolování nutné).

Ujistěte se, že používáte nadpisy a jiné typografické formátování, abyste svůj e-mailový obsah více skenovali, zejména pokud jsou vaše e-maily více než pár odstavců.

Celkově se typografie e-mailu obecně nijak neliší od typografické tvorby webových stránek obecně, kromě výše zmíněné části o tom, že je pravděpodobnější, že bude první a / nebo pouze věc, kterou vaše čtenáři uvidí.

Různé e-maily pro různé účely

Existuje mnoho různých druhů e-mailů, které můžete posílat na seznamy účastníků (nebo projektování pro klienty). Každý z nich slouží svým účelům a každý by měl být navržen tak, aby nejlépe sloužil tomuto účelu.

Zpravodaje

Jedním z nejběžnějších typů e-mailů je informační bulletin. Tito často sestávají z mnoha odkazů, často s krátkými bity textu, které je doprovázejí, nebo se skládají z delších článků. V obou případech existuje velká šance, že nebude k dispozici žádná výzva k akci, a místo toho může být spousta odkazů na kliknutí.

To představuje jedinečnou výzvu, jelikož návrháři a tvůrci obsahu musí rozhodnout o nějaké prioritě nebo hierarchii obsahu v e-mailu. V mnoha případech to bude znamenat jeden vyprávěný příběh nebo odkaz na kreslení čtenáře, přičemž další obsah bude mít menší váhu.

Plastyk má skvělý návrh zpravodaje, který je zábavný a pútavý.

plastyk

Oznámení

Dalším běžným typem e-mailu je upozorňovací e-mail, nazývaný také spouštěcí e-mail. Přemýšlejte o e-mailech, které společnost Facebook pošle, když vám někdo zašle žádost o přátelství nebo Twitter, když vás někdo sleduje. Ačkoli mohou být oznámení o oznámení i oznámení s upozorněním. Tyto e-maily jsou upozornění, ale jsou také určeny k zahájení akce z vaší strany (v těchto případech kontrola vašeho účtu). Tyto e-maily jsou obecně velmi krátké a do té míry s odvážné výzvy k akci.

Zde je e-mail s oznámením Správné laboratoře.

properlabs

Transakční e-maily

Transakční e-maily se odesílají, když uživatel nějakým způsobem interaguje s webovou stránkou nebo společností. Mohlo by to být nákup nebo přihlášení k něčemu, nebo by mohlo být vyvoláno něčím, když uživatel opustí svůj nákupní košík bez dokončení transakce. Tyto e-maily slouží buď k poskytnutí informací (v případě něco jako potvrzení objednávky), nebo k přitahování návštěvníka zpět (jako u opuštěného vozíku).

Zde je dobrý příklad transakčního e-mailu z One Eyed Cat. Je to dobrý příklad toho, jak mohou cihlovo-maltářské firmy využívat e-mailový marketing.

jedna oči kočka

Marketingové e-maily

Marketingové e-maily jsou zasílány, když společnost chce s vámi obchodovat. Mohli by vás upozorňovat na speciální nabídku, nový produkt nebo něco podobného. Jedná se často o e-maily, které obsahují nejvíce "design" z pravidelných e-mailů, které společnost může poslat.

Tyto e-maily jsou specificky určeny k tomu, aby si účastníci mohli podniknout nějakou akci se společností nebo webovými stránkami. Mohlo by se přihlásit, koupit nebo něco podobného. Výzva k akci v těchto e-mailových zprávách je zdaleka nejdůležitějším prvkem, i když je zřejmé, že další prvky musí podpořit tento požadavek na přitahování čtenářů, aby přijali požadovanou akci.

Společenství má skvělý marketingový e-mail, který je dalším dobrým příkladem toho, jak mohou podniky z cihel a malty používat e-mail, aby se zapojili do svých zákazníků.

společenství

Osvědčené postupy pro návrh e-mailů

Zatímco návrh e-mailu a webový design sdílí mnoho stejných atributů, existují některé klíčové rozdíly, které musíte mít při plánování e-mailu. Zatímco většina z nich je snadno přizpůsobena, jsou stále důležité a vaše e-maily mnohem efektivnější.

Je to všechno o obsahu

Obsah je vždy důležitý, bez ohledu na to, co navrhujete. Ale e-mailem a zejména e-maily, které se pravděpodobně budou zobrazovat na mobilním zařízení, je ještě důležitější udržet váš obsah krátký a cílený. Máte nejvýše několik vteřin na zapojení vašeho čtenáře a pokud jsou tyto první sekundy ztraceny na cizích informacích, které nejsou užitečné, pak jste je ztratili.

Ujistěte se, že váš obsah je stejně stručný a jasný, jak to dokážete. Efektivita je klíčová a pokud váš čtenář nedokáže velmi rychle zjistit přesně to, na čem je váš e-mail a přesně to, co chcete dělat, pak ztrácíte čas.

Jasná výzva k akci

Výzva k akci je pravděpodobně nejdůležitější součástí každého návrhu e-mailu. Váš e-mail má zřejmě nějaký účel, ať už je to čtenáři, kteří se zaregistrují, něco si něco koupili nebo něco koupili. A vaše výzva k akci by měla jasně vysvětlit, co to je, a přitahovat vašeho čtenáře, aby dělal to, co chcete.

Výzvy k akci nejčastěji přicházejí ve formě tlačítek. Mělo by být okamžitě identifikovatelné a nemělo by to být příliš daleko od e-mailu (po tom všem máte jen pár vteřin na to, abyste dostali jejich pozornost, takže umístění výzvy k akci, kde to uvidí během několika vteřin, zvyšuje vaše šance na být účinný).

Ujistěte se, že výzva k akci je také přívětivá. To znamená, že musí být dostatečně velké, že je snadné kliknout na mobilní zařízení a že neexistují žádné jiné odkazy, které by byly dostatečně blízko k tomu, aby mohly být náhodou kliknuty.

Test brzy, test často

Ujistěte se, že vaše e-maily jsou plně testovány na různých zařízeních a klientech. Možná budete chtít začít testovat rozvržení atd. Od začátku, ale ujistěte se, že jste je vyzkoušeli během celého procesu návrhu, abyste se ujistili, že zůstávají bez chyb.

Testování často také znamená, že je pravděpodobné, že je možné rychleji sledovat chyby, pokud se vyskytnou, protože budete mít snazší zapamatovat si, které změny jste právě provedli.

Vysvětlete přesně to, co každý z hlavních klientů a zařízení podporuje, a přesně tam, kde jsou zkráceny, a buď najít rámce a kotle, které řeší tyto nedostatky, nebo navrhnout kolem nich.

Využijte text před záhlaví

Text před záhlavím se zobrazuje v mnoha poštovních klientech jako náhled zprávy. Zobrazit to téměř stejně důležité jako předmět vašeho e-mailu. Použijte jej, abyste přilákali čtenáře k tomu, aby skutečně otevřel e-mail. To může být obzvláště užitečné, protože mnoho e-mailových klientů zkrátí dlouhé předměty.

Odkaz na webovou hostovanou verzi

Ujistěte se, že obsahuje odkaz na webovou hostitelskou verzi e-mailů, v případě, že někdo skutečně zajímá, ale má problémy s prohlížením na svém mobilním zařízení nebo v e-mailovém klientovi. Mnoho e-mailových služeb vám umožňuje použít odkaz pro sledování (a další odkazy), abyste viděli, kdokoli klikne.

Udržujte to jednoduché

I když můžete navrhnout složité rozvržení s množstvím grafiky a stylizovaných prvků, zvyšujete riziko, že vaše e-maily se nezobrazí, jak jste zamýšleli pro všechny své čtenáře.

Jednodušší návrhy a jednodušší uspořádání znamenají, že vaše e-maily jsou více univerzálně čitelné na zařízeních, aniž byste museli vynaložit mnoho řešení a hacků. Zatímco komplexní návrhy mohou být více esteticky příjemné pro některé, často to nestojí za to další komplikace, které představují pro minimální hmatatelný přínos.

Šablony a rámce

Zatímco kódování e-mailu HTML zcela od začátku je zcela možné (podívejte se na náš předchozí článek " Jak navrhnout odpovědi na HTML e-mail "Pro podrobnosti o technických aspektech), pomocí rámce nebo boilerplate začít, nebo dokonce předem vytvořené šablony, může výrazně urychlit proces a zpřístupnit pro začínající návrháře.

Cerberus

Cerberus je sada odpovědí na e-mailové vzory, které fungují i ​​v aplikaci Outlook a v mobilním Gmailu. Bloky kódu můžete použít společně nebo samostatně. Existují dvě verze: ten, který se spoléhá na dotazy médií a ten, který není.

Cerberus

Inkoust

Inkoust je odpověď na e-mail z Zurb. E-maily vytvořené pomocí inkoustu fungují na libovolném zařízení a klientovi, dokonce i v aplikaci Outlook. Je to dost jednoduché, aby se potápělo přímo, stejně jako je plně dokumentováno.

Inkoust

Odpovědné šablony e-mailu postavené na inkoustu

Tyto Odpovědné šablony e-mailu postavené na inkoustu jsou skvělé místo pro začátek inkoustu. K dispozici jsou čtyři šablony: základní jednoduchý sloupec, e-mail s hrdinkou, rozložení postranního panelu a rozložení hybridního postranního hrdla.

Odpovědné šablony e-mailu postavené na inkoustu

Odpovědné šablony e-mailů

Zurb má nějaké další Odpovědné šablony e-mailů , včetně šablony zpravodaje s obrazem hrdiny, který naleznete na této stránce. Obsahuje také další užitečné informace o používání šablon.

Odpovědné šablony e-mailů

Odpovídající vzory e-mailu

Odpovídající vzory e-mailu je sbírka vzorů a modulů pro vytváření citlivých e-mailů. Obsahuje vzory pro rozvržení, navigaci, seznamy, média a další.

Odpovídající vzory e-mailu

Opravdu jednoduchá šablona e-mailu pro HTML

The Opravdu jednoduchá šablona e-mailu pro HTML je to přesně to, co říká: super jednoduchá šablona e-mailu HTML s velmi základním designem. Je to jediný sloupec s vestavěnou výzvou k akci a jednoznačným účelem.

Opravdu jednoduchá šablona e-mailu pro HTML

Template Builder

CampaignMonitor Template Builder umožňuje vytvářet zdarma šablony e-mailů HTML za minutu. Výsledky jsou připraveny pro mobilní telefony, plně testovány a mohou být použity přímo v CampaignMonitoru nebo staženy k použití jinde.

Template Builder

Volné šablony e-mailů

Tyto Volné šablony e-mailů z CampaignMonitor si můžete zdarma stáhnout a použít, zda používáte CampaignMonitor nebo ne. Existuje spousta stylů a návrhů, více než 100 ve všech.

Volné šablony e-mailů

HTML Email Boilerplate v 0.5

The HTML Email Boilerplate je dobrým výchozím bodem pro vytváření e-mailů. Neobsahuje žádný návrh nebo rozložení, což pomáhá vyhnout se mnoha problémům s vykreslováním v hlavních e-mailových klientech.

HTML Email Boilerplate

E-mailová schránka

Tento E-mailová schránka z e-mailu obsahuje všechny základní informace, které potřebujete pro nastavení e-mailů HTML, jako jsou CSS a HTML. Komentuje vás, abyste vám poskytli pokyny k použití.

E-mailová schránka

Antwort

Antwort nabízí neprůstřelné rozvržení pro e-maily, které se přizpůsobují různým šířkám klientů. Podporuje všechny hlavní e-mailové klienty, včetně aplikací Outlook a Gmail.

Antwort

Šablony Newsletteru GraphicMail

GraphicMail nabízí zhruba 100 bezplatných šablon informačních bulletinů. Pro jejich použití je vyžadován bezplatný účet.

GraphicMail

ThemeForest e-mailové šablony

ThemeForest nabízí až tuny prémiových šablon e-mailů od 6 do 19 dolarů. Premium šablony jsou někdy snadněji použitelné a mohou mít další funkce, které mohou být těžké přijít ve volných šablonách.

ThemeForest

Stamplia

Stamplia nabízí tržiště se špičkovými šablonami, kde můžete nakupovat a prodávat šablony pro zpravodajství, transakční e-maily a další.

Stamplia

E-mailové nástroje

e-Newsletter plugin WordPress

The e-Newsletter plugin WordPress nabízí profesionální správu e-mailových zpravodajů a předplatitelů přímo v administrátorském rozhraní aplikace WordPress. Zatímco hostování vaší e-mailové služby může představovat vlastní sadu výzev, poskytuje vám také plnou kontrolu a eliminuje měsíční poplatky za služby, které mohou být pro mnohé podniky poměrně cenné.

e-Newsletter plugin WordPress

Neprůstřelné obrázky na pozadí

Neprůstřelné obrázky na pozadí z CampaignMonitor je jednoduchý nástroj pro kódování obrázků na pozadí pošty. Jednoduše vložte adresu URL obrázku na pozadí, záložní barvu a zda se jedná o celé tělo e-mailu nebo jen o jednu buňku tabulky a dává vám kód.

Neprůstřelné obrázky na pozadí

Bulletproof e-mailová tlačítka

Bulletproof e-mailová tlačítka z CampaignMonitor vám umožní navrhnout krásná, progresivně vylepšená tlačítka pro vaše e-maily. Jsou ideální pro výzvy k akci.

Bulletproof e-mailová tlačítka

Lakmus

Lakmus je sada nástrojů pro sledování a testování e-mailů. Zahrnuje náhledy e-mailů, analytické nástroje a nástroje pro testování filtrů spamu. Začíná to ve výši 79 USD / měsíc s diskontovanými ročními plány.

Lakmus

Litmus Rozsah

Litmus Rozsah usnadňuje vytváření čisté webové verze libovolné e-mailové zprávy, kterou můžete sdílet. Je k dispozici ke stažení, stejně jako ve formuláři booklet, který pracuje s libovolnou webovou poštou.

Litmus Rozsah

Příklady a inspirace

Tam jsou tuny e-mailových galerií tam, že můžete zkontrolovat pro inspiraci. Ale zde je dvacet úžasných e-mailů, které vám pomohou začít!

Whalers

velrybáři

Aukce St. Theresa

ares aukce

Online obchody kluci

online kluci

Inspirační bod

inspirations point

Všude

všude

Koule

koule

Funkce a třída formuláře

tvoří funkční třídu

Boden

boden

dobrou chuť

dobrou chuť

Sedmý

sedmý

Cesta

cesta

Zombie Survival Průvodce pro e-mailem

zombie průvodce přežití

Fooda

potraviny

Designer News

návrhářské novinky

Charita: Voda

charitativní voda

EwerkNews

ewerknews

Interworld Plastics

plasty mezi kulturou

Zehno

zehno

PSD Freebies

psd freebies

Vysílačka

vysílačka

Více galerií, které vás inspirají

Opravdu dobré e-maily nabízí kategorizované návrhy e-mailů, mnohé s komentářem o tom, co je dělá skvělé.

Galerie e-mailů umožňuje prohlížet návrhy e-mailů založené na barvě, typu firmy a dalších.

Inspirace e-mailu kampaně umožňuje procházet podle počtu sloupců a typu e-mailu (oznámení, zpravodaje nebo pozvánky).

Podívejte se, co můžete udělat , od MailChimp, nabízí spoustu e-mailů zaslaných prostřednictvím služby pro inspiraci.

HTML e-mailová galerie nabízí chronologickou galerii návrhů e-mailů.

Galerie návrhů e-mailů je blog Tumblr, který zobrazuje skvělé návrhy e-mailů z různých zdrojů.

Krásné e-mailové zpravodaje je kategorizovaná e-mailová galerie, která obsahuje také vyhledávací funkci.

E-mailové služby

E-mailové služby nabízejí různé funkce, ale většinou se všemi starají o správu předplatitelských seznamů a zasílání e-mailů ve vašem zastoupení. Mnoho z nich má další funkce sledování a automatizace. Většina z nich nevyžaduje žádnou smlouvu nebo závazek, ačkoli někteří nabízejí slevy na předplacení delších termínů.

ConstantContact

ConstantContact začíná na úrovni 20 USD za měsíc pro základní e-mailové kampaně, které zahrnují správu kontaktů a sociální sdílení, a dražší plány zahrnující další funkce, jako je podrobné sledování.

konstantníkontakt

MailChimp

MailChimp nabízí bezplatný plán "Podnikatel", který podporuje až 12 000 e-mailů na 2 000 účastníků, s placenými plány, které vám umožní spravovat mnohem vyšší objemy.

MailChimp

Aktivní kampaň

Aktivní kampaň začíná na úrovni 9 USD / měsíc až pro 500 kontaktů, odkud se plánuje další podnikání, včetně podnikových plánů, které nabízejí specializované účty a další služby.

Aktivní kampaň

GetResponse

GetResponse má plány od 15 dolarů / měsíc až pro 1.000 účastníků, ačkoli nabízejí slevy pro roční fakturaci.

GetResponse

AWeber

AWeber vám umožní začít za pouhých 1 dolar za první měsíc, měsíce po něm začínáte na pouhých 19 dolarů / měsíc pro neomezené e-maily až pro 500 účastníků.

AWeber

Amazon SES

Amazon SES (Jednoduchá e-mailová služba) je služba odesílání e-mailů pouze pro odchozí uživatele. Pokud už jste uživatel Amazon EC2, můžete zdarma odeslat až 2 000 e-mailů za den. V opačném případě jsou e-mailové zprávy účtovány na úrovni 0,10 USD za tisíc, s dodatečnými poplatky za přenos dat a přílohy, čímž se stává jedním z nejdostupnějších možností zasílání e-mailů.

Amazon SES

Emma

Emma nabízí plány od 45 dolarů pro neomezené e-maily až pro 2500 účastníků. Nabízejí také slevu ve výši 20% pro neziskové organizace a 20% slevu na roční platbu předem.

Emma

HubSpot Email

HubSpot Email nabízí tunu sledování a nástroje pro získání více účastníků a je součástí celkové služby služby HubSpot, která začíná na 200 dolarů za měsíc za první 100 kontaktů (a 100 dolarů za měsíc více navíc za 1000) a odtud vystupuje.

HubSpot Email

GraphicMail

GraphicMail nabízí cenové plány na základě počtu odeslaných e-mailů nebo počtu předplatitelů, s cenami pro první, které začínají pod 10 USD / měsíc, přičemž cena začíná na pouhých 25 USD měsíčně.

GraphicMail

Závěr

Zatímco prostý text e-maily mohou být dokonce postačující pro spoustu komunikace, neříznou s mnoha dalšími. Porozumění tomu, jak fungují e-maily ve formátu HTML a znalost nástrojů a šablon, které máte k dispozici k tomu, aby bylo jejich vytváření mnohem jednodušší, je životně důležité pro prakticky každého návrháře.

Doporučený obrázek / náhled, iPhone obrázek přes Kārlis Dambrāns