V tomto díle zjistíte, jak a kde HTML kód editovat, a naučíte se, jak vytvořit základní strukturu e-mailové šablony. Je určen především začátečníkům v HTML kódování, ale i kodér dosud nepracující s HTML e-maily zde může najít nové informace.
Co budeme potřebovat
Ze všeho nejdřív se musíme rozhodnout, v čem budeme HTML šablonu vytvářet. Možností je celá řada, od WYSIVYG editoru, přes specializované editory, až po zcela jednoduchý poznámkový blok ve Windows.
My doporučujeme používat specializovaný editor. WYSIVYG editor je spíše pro úpravu obsahu a poznámkový blok zase neumí zvýrazňovat syntaxi. Posuďte sami, s čím se lépe kóduje:
Většina HTML editorů je přístupná zdarma a příkladem takového editoru může být:
Když už máme editor kódu vybraný, řekněme si, které tagy budeme v HTML šabloně používat a k čemu jsou.
Základní HTML tagy používané v e-mailové šabloně
| Tag | Použití | Párový/nepárový |
|---|---|---|
| <table> | Definice tabulky, lze nastavit základní atributy jako je ohraničení nebo vzdálenost buněk | ano |
| <tr> | Řádek tabulky, vkládá se do <table> | ano |
| <td> | Buňka tabulky, vkládá se do <tr> | ano |
| <p> | Textový odstavec | ano |
| <span> | Element pro označení určité části textu a jeho zvýraznění | ano |
| <img/> | Obrázek, obsahuje parametry jako je velikost nebo alternativní text | ne |
| <a> | Odkaz | ano |
Podrobnější informace a přehled všech základních HTML tagů můžete najít například na webu Jak psát web.
Vytvoření nového HTML souboru
HTML e-mail je ve skutečnosti jednoduchá HTML stránka.
Pokud jste v minulosti kódovali XHTML šablony a proklínali nedodržování standardů, pak se připravte na zcela novou výzvu. Vytvořit HTML e-mail tak, aby se zobrazoval ve všech e-mailových klientech stejně, je často o nervy.
HTML editory vám při vytvoření nového HTML souboru většinou vytvoří automaticky tento nebo podobný kód:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
</head>
<body>
</body>
</html>
Dnes již standardní HTML5 doctype není podporovaný e-mailovými klienty. Proto se používá klasické HTML v jeho nejjednodušší verzi.
Jedná se o základní elementy každé HTML stránky, kterou si na webu prohlížíte. V hlavičce <head> jsou informace o kódování stránky a do tagu <body> budeme vkládat obsah.
Do hlavičky <head> nevkládejte kaskádové styly. Většina webmailů vše od tagu <body> nahoru odřízne a šablona se rozpadne.
Výjimkou jsou styly pro responzivní šablonu - o té si řekneme více v jednom z příštích dílů.
Nepoužívejte ani CSS styly odkazované na externí soubor, budou odstraněny nebo ignorovány.
Co ale naopak můžete do hlavičky vložit, je titulek stránky. Vkládá se to tagu <title> a zobrazuje se v případě, že si příjemce zobrazí e-mail v prohlížeči (pokud mu to umožníte). Příklad:
<title>Novinky v systému | Mail Komplet</title>
Titulek by měl být pokaždé unikátní. Může to být například předmět e-mailu.
Základní layout šablony
Pro layout e-mailu nepoužíváme CSS pozicování (floating), ale staré dobré tabulky. Jedině tak budeme mít jistotu, že se e-mail bude korektně zobrazovat i lidem s prehistorickými e-mailovými klienty nebo s e-mailovými klienty, jejichž autoři ignorují vývoj doby a CSS nepodporují.
Definujeme hlavní tabulku, která bude obsahovat barvu pozadí e-mailu. Abychom předešli nečekanému uskakování, raději doplníme styly i do <body> a celou tabulku obalíme <div>em.
<body style="margin: 0px;">
<div style="margin: 0px; background-color: #ececec;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #ececec;">
</table>
</div>
</body>
<div> použijeme na změnu barvy pozadí celého e-mailu a to stejné zopakujeme v tabulce <table>, která zabírá celou plochu e-mailu.
Doplníme do tabulky řádek a jednu buňku. Buňku odsadíme od horní i dolní hrany prohlížeče pomocí stylu padding o 20 pixelů:
<body style="margin: 0px;">
<div style="margin: 0px; background-color: #ececec;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #ececec;">
<tr>
<td style="padding: 20px 0 20px 0;"></td>
</tr>
</table>
</div>
</body>
Do této buňky budeme vkládat zbytek e-mailu.
Definujeme jednotlivé bloky e-mailu
V naší šabloně chceme:
- hlavičku s logem a odkazy na sociální sítě,
- tělo e-mailu, kam vložíme obrázky a texty,
- patičku s doplňujícími informacemi o odesílateli a odkazem pro odhlášení.
Začneme hlavičkou
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="background-color: #ffffff; line-height: 22px; border-top: 5px solid #F23D2F; border-bottom: 1px solid #ececec;">
<tr>
<td style="padding: 25px 25px 25px 25px;">
<img src="images/logo-cervene.png" alt="Mail Komplet" width="224" height="40" style="display: block; border: none;" />
</td>
<td align="right" style="padding: 25px 25px 25px 25px;">
<a href="https://twitter.com/MailKomplet" style="text-decoration: none; display: inline-block;">
<img src="images/ikona-twitter.png" alt="Twitter" width="44" height="43" style="border: none;" />
</a>
<a href="http://www.facebook.com/mailkomplet" style="text-decoration: none; display: inline-block;">
<img src="images/ikona-facebook.png" alt="Facebook" width="44" height="43" style="border: none;" />
</a>
<a href="https://plus.google.com/103093606461377680326" style="text-decoration: none; display: inline-block;">
<img src="images/ikona-googleplus.png" alt="Google+" width="44" height="43" style="border: none;" />
</a>
</td>
</tr>
</table>
Pod hlavičku si připravíme tabulku pro textové sdělení na začátku e-mailu
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; font-size: 14px; line-height: 22px; color: #444444; margin-bottom: 0;">
<tr>
<td style="background-color: #ffffff; padding: 25px 25px 40px 25px; line-height: 22px;">
</td>
</tr>
</table>
A zbývá nám doplnit jednoduchou patičku
<table width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 22px;">
<tr>
<td valign="middle" align="center" style="padding: 20px 0; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 22px;">
<p style="text-align: center; margin: 0px;">
<a style="color: #444444; text-decoration: none;" href="${web_mail_url}">Zobrazit tento e-mail v prohlížeči</a> | <a style="color: #444444; text-decoration: none;" href="${unsubscribe_url}">Odhlásit se z odběru newsletterů</a><br />
<span style="color: #888888;">Toto je obchodní sdělení zasílané společností Mail Komplet</span>
</p>
</td>
</tr>
</table>
Máme-li nakódované tyto základní části, má již naše šablona svou tvář a e-mail se nerozsype, změníme-li jeho obsah (rovněž se zobrazí ve všech e-mailových klientech i prohlížečích správně).
Nedaří se vám ani po přečtení tohoto dílu vytvořit jednoduchou HTML šablonu? Nemůžete se dostat přes nějakou překážku? Napište nám a přiložte svůj HTML kód. Rádi vám poradíme. Nebo se s námi spojte na vaší oblíbené sociální síti.
Příště se naučíte
V příštím díle našeho seriálu se zaměříme podrobněji na obsah e-mailu a ukážeme si různé tipy a triky, které se na něj dají aplikovat. Sledujte nás na Facebooku, ať vám neuteče další díl!
Mohlo by vás zajímat:
Nenašli jste, co jste hledali?
Nenašli jste, co jste hledali v našem výukovém centru ani v našich videonápovědách?
Pokud potřebujete více pomoci, napište nám na e-mail nebo zavolejte na 517 070 000.
