Jan Štráfelda - Průvodce online -projektem
Praha/Mělník  |  776 678 044  |  jan@strafelda.cz  |  Pošlete mi poptávku

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ů.

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:

Nově k tomu přibyly:

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

E-mail marketing

Zaujal jsem vás? Přihlašte se do mailingu a mé další texty už vám neuniknou:

 

Zprávy posílám cca 8 × ročně. Odhlásit se můžete kdykoliv. Více informací.

Komentáře (0)

Přidat nový komentář

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

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