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

3. 10. 2013  |  Jan Štráfelda

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ňujeme proto zdarma návod na kódování šablon responzivních e-mailů.

Graf vývoje e-mailových platforem v čase
Statistiky nástroje Litmus
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á click rate a klesají konverze z newsletterů?

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 telefonuProblé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é.

Návod pro kódování responzivních e-mailů

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…).

Prezentace Jak na responzivní mailing na SlideShare Adaptic

Podělte se také aneb „Adaptic Quest“

  • Pomohl vám náš manuál? Oplaťte nám to tím, že na něj odkážete.
  • Používáte jiné techniky? Podělte se s námi v komentářích. Rádi manuál doplníme…

Vaše názory


Novinky

18. 8. 2014  |  Novinky

PPC mixér - nástroj zdarma

Bez nároku na odměnu jsme zveřejnili interní nástroj pro správce PPC reklamy. Umí čtyři různé užitečné funkce – vytváří kombinace klíčových slov, prohazuje jejich pořadí, vytváří k nim shody a odstraňuje diakritiku. Ať vám slouží!

celá novinka

21. 5. 2014  |  Novinky

Nový e-shop Servis-Whirlpool.cz

Moderní e-shop v responzivním designu? Desítky tisíc produktů skladem? A má být kompletně napojen na informační systém Pohoda E1? Nic z toho samozřejmě není problém...

celá novinka

Adaptic na Twitteru

Newsletter

více informací

Internetový slovníček

Vybrali jsme pro vás:

Ve slovníčku máme již 190 pojmů.

Facebook: sledujte nás