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

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í konverze z e-mail marketingu?

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.

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

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