O webu
    HTML emaily

    HTML e-maily

    Vytváření HTML e-mailů, které fungují ve všech emailových klientech.

    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
    Ping atribut

    Atribut ping

    HTML atribut ping umožňuje pingnout nějakou další stránku při prokliknutí odkazu.

    Cacheování obsahu z cizí stránky

    Cacheování obsahu cizí stránky

    Jak cacheovat výsledky obsahu staženého z cizí stránky.

    Komentáře

    Web jecas.cz píše Bohumil Jahoda, kontakt
    Seznam všech článků
    2013–2025