Jaké jsou základní prvky responzivního emailu?

Ať už máte HTML emaily v oblibě, nebo je nesnášíte, nelze popřít, že jsou dost populární. A podobně jako dříve weby, se dnes i doručená pošta oficiálně stala mobilní — protože v současné době se už z mobilních zařízení otevírá více než polovina všech emailů.

Přesto je emailový design pořád až otřesně zastaralá technika. Vzpomenete si ještě, jak se kódovalo, než se webové standardy staly … standardními? Nuže, vstupte do žhoucího pekla emailového designu.

Kódování emailu ale nemusí nutně vyvolávat pocit marnosti. I když designéři musí stále ještě budovat layouty pomocí tabulek a stylovat je pomocí HTML atributů a — ach jo!— inline stylů, četní neohrožení designéři už přebírají moderní techniky, které se nejprve prosadily na webech, a aplikují je na archaické praktiky emailového designu.

Budování na principech responzivního webového designu, které jako první kodifikoval Ethan Marcotte, způsobí revoluci v emailovém designu. Povede ke vzniku prožitků téměř srovnatelných s těmi, jaké uživateli dopřává moderní web. Příjemci emailů už nebudou vystaveni příšerným čtenářským zážitkům a frustracím kvůli mrňavému textu a že se jim na dotykovém zařízení nedaří trefit do cíle.

Přednosti HTML emailu

Ať už máte HTML email rádi nebo ne, je to pro téměř jakýkoli byznys životně důležitý nástroj. Pokud jde o marketing, email trvale překonává jiné kanály, jako jsou Facebook a Twitter. Ještě důležitější je, že email umožňuje vzájemně komunikovat s potenciálně obsáhlým publikem stále osobněji a zaujatějším způsobem.

Možná se aktivně neangažujete v emailovém marketingu, pravděpodobnější je, že jakožto webový designér nebo vývojář pravidelně komunikujete s uživateli prostřednictvím emailů. Možná jim odesíláte nějaké příjmové doklady, pravidelně informujete uživatele o nějaké nové funkci produktu, nebo jim sdělujete, že máte na svém blogu nový příspěvek. Ať už se jedná o jakoukoli akci tohoto druhu, je email důležité, ale často podceňované médium.

Mnozí vývojáři zasílají zákazníkům emaily jako prostý text. Přestože leccos hovoří ve prospěch prostého textu (snadno se vytvoří, všude se bez potíží zrealizuje, rychle se stahuje, atd.), HTML email přináší řadu předností:

• Hypertextové odkazy. V HTML emailu můžete uvést odkazy na cílové stránky a už zde budovat lepší provoz a zaujmout.
• Design. Dobře navržený HTML posiluje vaši značku, a to hned v doručené poště.
• Hierarchie. Uvnitř HTML emailů můžete budovat hierarchii a snadněji přitahovat pozornost na důležitá čísla elektronického zpravodaje nebo na významné odkazy.
• Sledování. HTML email umožňuje průběžně sledovat metriky emailového marketingu, jako jsou míra otevírání zpráv (open-rate) či míra zaujetí (engagement-rate) — cenná data, s nimiž můžete své marketingové aktivity optimalizovat.

Když emailu nevěnujete tolik pozornosti jako své aplikaci piplané do posledních pixelů, fakticky přicházíte zaprvé o příležitost posilovat a propagovat svou značku, zadruhé o schopnost sledovat ve svých emailech interakce a míry otevírání, a konečně zatřetí o příležitost poskytnout úžasné uživatelské prožitky i vně své aplikace.

HTML email bez standardů a JavaScriptu

Navrhování a vývoj HTML emailu tradičně řadí všichni webové designéři mezi své nejhorší zkušenosti. Je to jako byste vlezli do stroje času a vystoupili někde v ohavném světě devadesátých let plným layoutů založených na tabulkách, inline stylů, nesémantického značkování a náhradních řešení neboli „hacků“ specifických pro jednotlivé klienty.

Tady máte malou ukázku, proč může z HTML emailu rozbolet hlava:

• Žádné standardy. Jistě, používáme HTML a CSS. Ale ne jako na webu. Mezi emailovými klienty žádné opravdické standardy neexistují, což vede na dost šílený kód.
• Emailoví klienti. Emailoví klienti, jako jsou Outlook a Gmail, ti všichni realizují HTML a CSS odlišně, často ohavně. Což vede na …
• Spoustu hacků. I dobře navržená emailová kampaň, má-li dobře fungovat, se musí spoléhat na různá náhradní řešení specifická pro jednotlivé klienty.
• Žádný JavaScript. Nejoblíbenější jazyk webů nemá v emailu žádné uplatnění, protože ho emailoví klienti z bezpečnostních důvodů (oprávněně) odstraní. Sbohem, interaktivito.
• Inline styly. Strašně rád bych oddělil strukturu od prezentace. Většina emailových klientů bohužel nutí spoléhat se v emailu téměř u všeho na inline styly a atributy.

Přestože se situace v tomto ohledu v dohledné době patrně nezmění, v komunitě emailových designérů nastal jistý posun (opravdu, je znatelný) ve snaze alespoň zmírnit mizérii, jaká je za normálních okolností sdružena s vývojem emailových kampaní. Řada firem i jednotlivců vylepšují nástroje a metody emailového designu a sdílejí své vědomosti více než kdy dříve.

Firma Litmus, pro kterou pracuji, je jednou z nich: Budujeme takové instrumenty, abychom mohli co možná bezbolestně testovat a sledovat emailové kampaně. A jdeme all-in, pokud jde o rozšiřování informací o emailovém marketingu obecně, a o emailovém designu konkrétně. Dokonce jsme spustili celou komunitu věnovanou propojování emailových marketingových pracovníků, aby mohli sdílet své vědomosti, pilovat jednotlivé postupy a učit se jak od nás, tak i od ostatních.

Přestože v článku odkazuji na některé nástroje a zdroje Litmus, existuje i řada dalších firem a lidí, kteří se svou pilnou prací snaží zušlechtit umění emailového designu. Konkrétně, firmy MailChimp a Campaign Monitor mají vynikající blogy a průvodce. A lidé, jako jsou Anna Yeaman, Nicole Merlin, Fabio Carneiro, Elliot Ross a Brian Graves, ti všichni pracují na tom, aby byl emailový design zdatně odborně vyvedený.

Sílící vliv mobilních telefonů

Jako vše na webu, i doručená pošta se stává mobilní. V roce 2013 už 51 procent uživatelů otvíralo emaily na mobilních zařízeních. Toto procento patrně ještě poroste, zvláště vezmeme-li v úvahu fakt, že stále roste počet lidí, kteří přistupují k internetu výhradně ze svého mobilního zařízení, ať už proto, že tomu dávají přednost, nebo že jinou možnost nemají.

Dobrá zpráva je, že weboví designéři mohou přizpůsobit své stávající dovednosti a aplikovat je na emailové kampaně, vytvářet překrásné uživatelské prožitky na kanálu, který je sice pro většinu uživatelů životně důležitý, který ale mnoho designérů ignoruje.

Jak funguje HTML email

Všeobecně řečeno je HTML email totéž jako navrhovat webovou stránku — ale za předpokladu, že by webový design neměl ani potuchy o ničem, co se stalo poté, co vyšla kniha Designing with Web Standards. HTML emaily se spoléhají na tři věci: tabulky, HTML atributy, a na inline kaskádové stylové předpisy (CSS). Když se učíte budovat HTML emaily, mějte stále na paměti, že kvůli realizačním enginům emailových klientů máte k dispozici jen hodně osekanou podmnožinu HTML a CSS. Vynikající přehled o tom, co z CSS podporují hlavní emailoví klienti, udržuje Campaign Monitor.

Projděme si teď krátce základy HTML emailu, než se podíváme, jak učinit emaily responzivními. Pro potřeby tohoto příkladu jsem upravil šablonu, kterou používáme u Litmus pro naše vlastní elektronické zpravodaje. Díky Litmusu a našemu báječnému designérovi, jímž je Kevin Mandeville, mohou se čtenáři A List Apart učit a stavět na stejném kódu, jaký používáme pro většinu našich kampaní — hostuje nyní na účtu A List Apart Github.

Tabulky

Většina webových designérů buduje strukturu webových stránek pomocí různých značek, jako jsou div, header, section, article, nav a footer. Emailoví designéři si bohužel nemohou dopřávat luxus v podobě sémantických prvků. Místo nich „musíte“ tvořit layout emailových kampaní pomocí HTML tabulek. A tyhle tabulky budou vnořované … a to velmi hluboce.

Při základním stylování tabulek se používají většinou takové atributy, které většina lidí už drahnou dobu nepoužívá: width, height, bgcolor, align, cellpadding, cellspacing a border. Když se spárují s inline styly jako jsou padding, width a max-width, mohou designéři vybudovat robustní emailové layouty.

Tady máte ukázku, jak vypadá dobře zakódovaná tabulka v emailu:

< table border="0" width="100%" cellspacing="0" cellpadding="0">
< tbody>
< tr>
< td bgcolor="#333333">
< div style="padding: 0px 15px 0px 15px;">
< table class="wrapper" border="0" width="500" cellspacing="0" cellpadding="0">
< tbody>
< tr>
< td>…Content…< /td>
< /tr>
< /tbody>
< /table>
< /div>< /td>
< /tr>
< /tbody>
< /table>

Vidíte, jak vnořujeme tabulky a jak s pomocí atributů border, cellpadding a cellspacing zajistíme, že v návrhu nebudou vznikat zbytečná prázdná místa. Na úrovni jednotlivých buněk tabulky aplikujeme bgcolor, což je spolehlivější metoda než background nebo background-color (své uplatnění však background-color má).

Stojí za to poznamenat, že pomocí div se vycentruje vnořená tabulka a dodá se výplň okolo obsahu. Přestože by se většina struktury měla skládat z tabulek, příležitostně se hodí div pro zarovnání obsahových bloků, pro výplně, a pro přípravu některých základních stylů. Neměli byste ho však používat jako hlavní strukturu emailu, protože většina emailových klientů mívá potíže přinejmenším s některým aspektem modelu boxu, takže pro layout emailů není spolehlivý.

Obrázky

Obrázky se v emailu používají obdobně jako na webu, ale s jedním varováním: řada emailových klientů standardně obrázky vypíná, čímž způsobí, že se odběratel dívá na rozbitou, matoucí směsici prvků.

Jak to funguje

Responzivní email funguje na stejných principech jako RWD (responzivní webový design)

Email s vypnutými obrázky

Přestože neexistuje způsob, jak tyto obrázky automaticky zapnout, můžete situaci trochu vylepšit, když pomocí alternativního textu (atribut alt) dodáte informaci o tom, co je na chybějícím obrázku. Navíc můžeme na elementu img použít inline styly, abychom patřičně nastylovali alternativní text a podpořili tím jednotu vnější podoby designu.

img src="img/fluid-images.jpg" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Fluid images" border="0" class="img-max"><pre>

S pomocí výše uvedeného kódu jsou chybějící obrázky trochu smysluplnější:

Alternativní texty dělají hodně

Výzvy k akcím

Jednou z hlavní předností HTML emailu je schopnost zařazovat hypertextové odkazy, na nichž lze kliknout. Nejde jen o odkazy umístěné uvnitř textu zprávy, do HTML emailu můžete zařazovat veliká, krásná tlačítka, jimiž budete lákat odběratelé.

Mnozí emailoví marketingoví pracovníci rádi používají jako tlačítka propojené obrázky. Když však budou designéři používat bulletproof buttons, mohou je zhotovit přes kód, který se bude realizovat spolehlivě přes všechny klienty, dokonce i když jsou v nich obrázky vypnuté.

Tabulka uvedená níže je ukázka obecného HTML bulletproof buttonu, v němž se pomocí ohraničení (border) zajistí, že kliknout se dá na celé ploše tlačítka, ne pouze na textu:

<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
< table class="responsive-table" border="0" cellspacing="0" cellpadding="0">
< tbody>
< tr>
< td align="center"><a class="mobile-button" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #666666; text-decoration: none; background-color: #5d9cec; border-top: 15px solid #5D9CEC; border-bottom: 15px solid #5D9CEC; border-left: 25px solid #5D9CEC; border-right: 25px solid #5D9CEC; border-radius: 3px; -webkit-border-radius: 3px; display: inline-block;" href="http://alistapart.com" target="_blank">Learn More →</a></td>
< /tr>
< /tbody>
< /table>

Bulletproof buttons vypadají skvěle, i když jsou obrázky zablokovány

Základy jste zvládli, je na čase se podívat, jak by se tedy měly psát emaily, aby dobře fungovaly na zařízeních o nejrůznějších velikostech. Tyto tlačítka jdou také vygenerovat pomocí online nástroje

Jak funguje responzivní email

Stejně jako u reponzivních webů, i responzivní email se skládá ze tří hlavních komponent: flexibilní obrázky, flexibilní layouty a mediální dotazy.

Jediný rozdíl mezi webem a emailem je v tom, jak se tyto techniky implementují.

V emailovém designu máme k dispozici jen omezenou podmnožinu HTML a CSS. Nemůžeme se spoléhat na vlastnosti a hodnoty, které designéři používají u responzivních webových stránek; okraje (margin), „plovoucí“ záležitosti (float) nebo délkové jednotky em, protože takové věci v mnohých emailových klientech nefungují. Takže se budeme muset uchylovat k náhradním řešením.

Flexibilní obrázky

S obrázky se vyrovnáme poměrně snadno, nic až tak obtížného nepředstavují. Přestože se u nich může používat vlastnost width nastavená na 100%, někteří emailoví klienti mají potíže s realizací obrázků v zamýšlené velikosti, pokud jejich šířka a výška nejsou nastavené pomocí odpovídajících HTML atributů. Proto je musíme vybudovat s konkrétními dimenzemi, které později zbouráme.

Prvním krokem je zajistit, aby byly obrázky zakódované robustně. Podívejme se na kód jednoho z obrázků určených pro potřeby emailu, jaké jste viděli výše.

Všimli jste si, že je v něm zařazena vlastnost display? Je to jen jedna ukázka mnoha hacků, bez nichž se u uličnických emailových klientů neobejdeme, podobně jako je tomu u atributu border. Většina webových emailových klientů přidává okolo obrázků prázdné místo, pokoušejí se totiž preventivně napravit potíže, které by mohly vznikat s výškou řádků. Když dáte obrázky na úroveň bloků, přidaný prostor zlikvidujete a svůj design zachráníte.

A teď, abychom učinili své obrázky plovoucími, docílíme to v mediálním dotazu umístěném v záhlaví emailu:

img[class="img-max”] {

width:100% !important;

height: auto !important;

}

Všechny obrázky ale nemusejí nutně být plovoucí. Prvky jako jsou loga nebo sociální ikony typicky zůstávají stále stejně velké bez ohledu na velikost zařízení, a to je důvod, proč se zacilujeme na flexibilní obrázky selektorem class.

Protože budeme vždy překrývat inline styly a HTML atributy, deklarací important zajistíme, že až se bude dokument realizovat, budou mít naše responzivní styly přednost.

Teď vskočíme do něčeho trochu obtížnějšího.

Flexibilní laouty

Většina webových designérů dobře ví, jak se sestavují responzivní designy s pomocí sémantických elementů, jejichž velikost se nastavuje v relativních jednotkách, jako jsou procenta nebo jednotky em a rem. Pro flexibilní layouty v emailu můžeme sice používat procenta, budou však použité inline na tabulkách a budou čelit jistým omezením.

Téměř ve všech našich tabulkách budeme používat pro jejich šířky procenta. Jedinou výjimkou je kontejnerová tabulka s konkrétními rozměry v pixelech, abychom vytyčili úhrnnou šířku emailového designu a zamezili přetékání v těch emailových klientech, kteří se nedokážou řádně vypořádat s procenty, jejichž typickým příkladem je většina verzí produktu Microsoft Outlook.

Začneme s kontejnerovou tabulkou:

…content…

Vidíte, že jsme nastavili atribut width tak, abychom si vynutili, že tabulka bude široká 500 pixelů.

V tomto kontejneru budeme držet všechny ostatní vnořené tabulky v emailu. Protože tím omezujeme vše na šířku nejvýše 500-pixelů, můžeme bez obav nastavovat velikosti ostatních tabulek v procentech.

K čemu jsou ale vlastně dobré flexibilní tabulky, když je email vždy široký 500 pixelů? Mrkněte ještě jednou na kontejnerovou tabulku. Všimněte si, že jsem do ní zařadil třídu wrapper. Tento selektor používáme proto, aby byly naše emaily opravdicky responzivní, a to pomocí (čeho jiného?) mediálních dotazů.

Mediální dotazy v emailu

Mediální dotazy fungují v emailu stejně jako ve webovém designu. Když je zařadíte do záhlaví emailu, můžete se zacílit na specifické atributy zařízení a patřičně přizpůsobovat své styly.

Pro jednoduchost se soustředíme jen na viewporty s max-width 525 pixelů nebo méně. Pak, když se zacílíme na obalovou (wrapper) tabulku, můžeme překrýt HTML atributy a inline styly, abychom si vynutili, že na mobilních zařízeních bude tabulka tak široká, jako je plná šířka jejich obrazovky.

@media screen and (max-width:525px) {
table[class=“wrapper”] {
width:100% !important;
}
}

Můžeme se zacílit i na ostatní vnořené tabulky a udělat totéž — v podstatě tím vršíme na sebe sekce obsahu, abychom zlepšili prožitky na mobilech. Konec konců není až tak špatný nápad zvednout na mobilech velikost textu a tlačítek.

@media screen and (max-width:525px) {
body, table, td, a {
font-size:16px !important;
}
table[id=“responsive-table”] {
width:100% !important;
}
}

Hlavní stinnou stránkou používání mediálních dotazů je, že se všude nepodporují. I když fungují dobře v emailových klientech založených na WebKit, jako jsou iOS Mail a výchozí emailová aplikace Android, starší zařízení Blackberry, Windows Phone 8 a aplikace Gmail na všech platformách nevěnují mediálním dotazů sebemenší pozornost.

iOS a Android naštěstí představují majoritu publika mobilních emailů, takže se můžete spolehnout, že většina odběratelů uvidí vaše responzivní emaily tak, jak jste zamýšleli.

Bádejte nad emailovým designem

Techniky popsané výše jsou jen začátek. Neohrožení emailoví designéři zkoumají, jak v emailu využít webové fonty, SVG a CSS3 animace. Jistě, emailový design je obtížný a všechno se neustále mění, což by vás ale nemělo odradit. Prozkoumávejte pokročilé techniky, abyste zjistili, které z nich mohou být prospěšné pro vás i vaše publikum.

Mé první doporučení je, abyste u každého emailového designu který vybudujete, otestovali vše, co se dá. Emailoví klienti jsou totiž horší než prohlížeče, pokud mluvíme o realizaci a podpoře HTML a CSS. Když budete testovat na zařízeních i pomocí nějaké náhledové emailové služby — ať už to je Litmus, Email on Acid, nebo vaše vlastní laboratoř pro testování zařízení, nebo něco úplně jiného — pomůže vám to předem identifikovat možné potíže a umožní tyto záležitosti napravit ještě dřív, než návrh odešlete miliónu odběratelů.

Kromě kódu a realizace byste měli také sledovat všechny své emaily a testovat, jaký druh obsahu, jaké téma, jaký design a jaký rytmus odesílání rezonuje s vaším publikem.

A především neignorujte emailový design. Je to sice prozatím hlavně nutné zlo, ale postupně se věci lepší. Okolo emailového designu se konečně formuje komunita a trvale se také propracovávají a vylepšují techniky. Responzivní emailový design je jednou z nich. Pokud vám opravdu záleží na vašem produktu a jeho prezentaci na webu, seberte veškeré své zanícení a dovednosti, s nimiž tvoříte rozhraní svých aplikací, a přeneste je také do jednoho z vůbec nejrozšířenějších a nejcennějších médií.

Informace o autorovi

Jason Rodriguez

Jason Rodriguez je designér a spisovatel, pracuje u Litmus. Většinu svého času tráví tím, že dává dohromady emailové designéry s cílem, aby byl emailový marketing pro všechny co nejméně bolestný. Tu a tam píše knihy a narušuje zavedené pořádky na svém webu a tweetech.

Tento článek byl přeložen se souhlasem A list a part. Originální znění najdete na alistapart.com