O webu
HTML emaily

Při odesílání e-mailů existuí dvě základní možnosti:

  1. poslat zprávu v čistém textu,

  2. vytvořit HTML stránku e-mailu a tu odeslat

Oba přístupy mají své výhody i nevýhody.

Proč psát e-maily v plain textu

S prostým textem je obecně méně problému. Na druhou stranu existují případy, kdy je potřeba odběratelům poslat poutavější obsah, než je prostý text. Jedná se typicky o obrázky a podobně.

Možné problémy

Mezi e-mailovými klienty existují značné rozdíly ve schopnostech, co je možné zobrazit.

Vzhledem k rozdílnému chování různých e-mailových klientů je tvůrce HTML e-mailů tlačen k používání jen těch věcí, co fungují všude.

Mobile first – Podobně jako většinou u webů je vhodné i e-mail vytvářet přístupem mobile first. Dle statistik používání mobilní e-mailové klienti vedou. Kvůli omezené funkčnosti @media pravidel se tak nabízí dokonce přístup „mobile only“, protože není všude možné vytvořit optimální e-mail pro mobil i desktop.

Media queries s !important, aby přebily inline styly.

  • :hover efekty,
  • inline SVG,
  • posicování (absolutní, fixní i relativní)
  • background obrázky
  • CSS gradient
  • obrázky připojené přes Data URI (Gmail)
  • nepoužívat margin
  • padding používat jen u tabulek

Inline styly

Používání CSS je lépe podporované v atributech style. Z externího CSS nebo stylů v hlavičce je tak vhodné vše inlinovat. V PHP existují hotová řešení:

Případně JS řešení:

Pokud není potřeba inlinování stylů automatisovat, jde použít online nástroje:

Hotová node.js řešení

Testování HTML e-mailů

EML formát

Pro testování v desktopových e-mailových klientech se může hodit uložit e-mail do *.eml souboru. To je téměř obyčejný HTML soubor doplněný o pár hlaviček s informaci o e-mailu:

MIME-Version: 1.0
Date: Sat, 25 May 2019 18:18:46 +0200
From: Odesílatel <email@example.com>
Subject: Přednět e-mailu
Thread-Topic: Přednět e-mailu
To: "Příjemce" <email@example.com>
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html; charset="utf-8"

Tento soubor jde upravovat a otevírat v e-mailových klientech bez nutnosti něco posílat.

  • Premailer – odeslání HTML na e-mail
  • PutsMail – inlinování CSS a odeslání HTML na vybrané e-mailové adresy

Datová velikost

Jaká by měla být datová velikost HTML e-mailů a jaké jsou možné problémy při doručování:

HTML e-maily na mobilech

Velká část e-mailů bývá otevírána na mobilech.

Velikost do 100 kB.

Počáteční textový obsah e-mailu se zobrazuje jako úryvek – je proto dobré na začátek umístit text s bohatou informační hodnotou.

Změna velikosti písma

Na iOS se příliš malé písmo automaticky přizpůsobuje. Vypnout to jde přes:

* { -webkit-text-size-adjust: none; }

Automatický převod telefonů

IOS se snaží v textu detekovat telefonní čísla a převádět je do klikací podoby. Vypnout tento převod jde přes:

<meta name="format-detection" content="telephone=no">

Jiná možnost je rozbít telefony nebo URL neutrálními HTML značkami:

<p>http<span>://</span>mydomain<span>.</span>com</p>

Formuláře v e-mailech

Do HTML e-mailu je teoreticky možné vložit formulář. Podpora je ale nejistá a používat formulář v e-mailu není pro uživatele obvyklé, takže je lepší se formulářům uvnitř mailu vyhnout.

Hotové šablony

Vytvářet HTML šablonu pro nový e-mail není nutné od píky, ale jde využít nějakou hotovou šablonu:

Odkazy