Jan Štráfelda - Průvodce internetovými projekty
celá ČR (přes video)  |  776 678 044  |  jan@strafelda.cz

Responzivní maily: návod na kódování

E-maily čte na mobilních zařízeních už skoro 50 % příjemců. A číslo prudce stoupá. Firmy však stále posílají newslettery v nevhodném formátu. Zveřejňuji proto zdarma návod na kódování šablon responzivních e-mailů.

E-book za mail

Získejte podrobný návod Jak na e-mail marketing (52 stran). Více informací.

Žádný spam, jen užitečný obsah. Newsletter posílám cca 8× ročně. Odhlásíte se kdykoliv.

Proč to řešit

Přizpůsobování webů pro mobilní zařízení je dnes velké téma. O e-mailech se však skoro nepíše – a přitom by na chytrých telefonech měly fungovat, i když web ještě responzivní nemáte. Prohlédněte si přiložený graf. Ukazuje, jak se za poslední rok změnil poměr zobrazení e-mailů na různých platformách. Už chápete, proč vám padá míra prokliku a klesají konverzee-mail marketingu?

Graf vývoje e-mailových platforem v čase
Statistiky nástroje Litmus, leden 2015

Co je responzivní e-mail

Technicky vzato, jde o klasický HTML mail, ke kterému je připojena další vrstva. V té je ošetřeno zobrazení pro různé šířky zařízení. Otevřete si ukázkovou šablonu níže a zkuste si postupně zmenšovat okno prohlížeče. Vidíte, jak se šablona přizpůsobuje a postupně mění podobu jednotlivých prvků? Sledujte, co při zmenšování okna dělá hlavička, patička, kdy se zvětšilo písmo a jak se tlačítka přizpůsobila pro snazší ovládání prstem.

Ukázková HTML šablona Adaptic newsletteru (otevřete si v novém okně)

Super vynález! Kde je háček?

Ve skutečnosti je to mnohem složitější. Ona „responzivní vrstva“ je vlastně sada pravidel, která těsně nasedají na jednotlivé prvky základní HTML šablony. Říkají, jak se má daný prvek chovat při různých velikostech okna. Při návrhu grafiky e-mailu je tedy třeba chování jednotlivých prvků dobře promyslet. Samozřejmě platí, že čím jednodušší struktura e-mailu, tím lépe se vše kóduje. To jde naštěstí ruku v ruce s efektivitou – jednoduché e-maily fungují nejlépe.

Spousta současných mailových programů také nerespektuje webové standardy. Zejména Outlook od verze 2007, některé freemaily (Gmail, Centrum) apod. Proto je tak náročné (= drahé) vytvořit šablonu HTML e-mailu a proto není možné spravovat obsah newsletteru přes klasický WYSIWYG editor, jako to děláte v redakčním systému.

Ukázka responzivního e-mailu na desktopu a v mobilním telefonu Ukázka responzivního e-mailu na desktopu a v mobilním telefonu Problém se často řeší rozřezáním grafiky e-mailu na obdélníkové dlaždice, které se do HTML šablony pouze naskládají. I když má toto řešení velké nevýhody (obsah není vidět při zobrazení bez obrázků, e-mail je náchylnější k označení jako spam), řada firem ho používá, protože je rychlé, levné a umožňuje kreativní řešení obsahu newsletteru. Nad takovými dlaždicemi ale responzivní vrstvu neuděláte.

Testování a ladění mailingu

Dalším háčkem je složitější testování a ladění. Už dříve to bylo komplikované, šablonu newsletteru (a nejlépe každé číslo před rozesláním) bylo třeba testovat v těchto programech:

  • v různých prohlížečích a jejich různých verzích
  • v různých mailových programech a jejich různých verzích (Outlook, Thunderbird, ideálně i Lotus Notes...)
  • na různých freemailech (Gmail, Seznam, Centrum, případně i Yahoo! mail)

Nově k tomu přibyly:

  • nativní aplikace různých operačních systémů (Android, iOS, Windwows Phone, Blackberry OS...)
  • různá zařízení s různě velkým displayem (telefony, tablety, čtečky…)
  • různé mobilní aplikace (pro Gmail, mobilní Yahoo! Mail…)

Přitom často platí, že odladění chyby v jednom zařízení způsobuje chybu v jiném (viz třeba meta tag viewport). Kódování šablony HTML mailu je tak skutečný boj o nervy, je to jedna z nejhorších prací v oboru. I když přesně víte, jak na to, existuje dlouhá řada výjimek, hacků k ošetření chyb apod. Často je také třeba různě krkolomně kombinovat prastaré techniky s těmi nejnovějšími.

Ladění obvykle znamená odeslání desítek testovacích e-mailů, z nichž každý musíte zkontrolovat v jednotlivých programech a zařízeních. Chybu opravíte a pošlete si další sérii. A tak dokola. I když existují specializované nástroje, které kontrolu usnadní (třeba výše zmíněný Litmus), je to časově náročné.

Abychom si celý proces usnadnili, používáme manuál, kam si zapisujeme osvědčené postupy. Jeho zkrácenou podobu nyní nabízíme veřejně. Třeba vám tím ušetříme několik dnů zbytečného zkoumání. Upozorněte na něj svou agenturu či kodéry a proberte s nimi možnosti úprav. Neboť nadešel čas se nad podobou newsletterů znovu zamyslet. A nejen newsletterů, to samé platí i pro další e-maily, které z webu posíláte (třeba kopie poptávky, informace o objednávce…).

Graf vývoje e-mailových platforem v čase

Prezentace Jak na responzivní mailing na SlideShare Adaptic

O autorovi

Jsem Jan Štráfelda a působím jako průvodce online projekty. Potřebujete předělat web či e-shop? Nebo posunout internetový marketing? Poradím s obojím. 14 let budování vlastní digitální agentury mě skvěle vyškolilo – a rád se o zkušenosti podělím.

S čím také umím pomoci:

Své znalosti sdílím i na LinkedIn. Přidejte se k 2 811 marketérům, kteří z nich již pravidelně těží.

Komentáře (0)

Zatím tu nejsou žádné komentáře.

Přidávání nových komentářů k tomuto článku bylo uzavřeno.