Jak na responzivní mailing

Kodérský tým Adaptic, s. r. o.
20. 9. 2013, Praha
Jak na responzivní mailing
Pokročilý návod k tvorbě šablon e-mailů

Princip responzivního mailu
Responzivní mail = tabulky + inline CSS1 + CSS3
Základem je HTML tabulka s inline styly, která se
zobrazí na desktopu, ve freemailech, v Outlooku
apod. Tu zvládne zobrazit většina zařízení.
K ní jsou v další vrstvě (přes styly v hlavičce a
media queries) připojeny styly pro pokročilá
zařízení. Využíváme toho, že umí CSS3 a
neodřezávají hlavičky.

Koncepce e-mailu
Blokované technologie → nepoužívat
Počítejte s blokováním obrázků
• javascript
• flash
Většina mailových programů vyžaduje k zobrazení obrázků svolení uživatele.
Načtením unikátního obrázku totiž lze zjistit, zda uživatel mail otevřel.
Zajistěte, aby byl obsah čitelný a přitažlivý i bez obrázků (včetně call2action
paletek). Takové e-maily mají o desítky procent vyšší míru prokliku.
E-maily složené z obrázkových dlaždic → plýtvání obchodním potenciálem.
• video
• formuláře
• iframe

Best practice I.
Rozměry
Struktura e-mailu
• čím jednodušší struktura, tím vyšší účinnost (a tím menší riziko chyby)
• jednosloupcový layout funguje nejlépe
• výrazné výzvy k akci
• umožněte sdílení obsahu přes sociální sítě
• pro desktopy šířka max. 640 pixelů
• pro iPhone šířka max. 320 pixelů
• klikatelné oblasti pro mobilní zařízení min. 44 x 44 pixelů

Best practice II.
• pouze základní fonty (Arial, Verdana, Tahoma…)
• pro desktopy 12 pixelů a větší, pro mobilní zařízení 15 pixelů a větší
• zarovnávání vlevo, nikdy do bloku
• definici fontů vložte opakovaně do všech buněk, k odstavcům, DIVům apod.
• nepoužívejte „font: …“, ale jednotlivé vlastnosti rozepište
Copywriting = klíč k úspěchu
Fonty a písmo
• nejdůležitější dejte nahoru (a zbytek smažte)
• důležitý je zejména titulek a podtitulek
• ověřte A/B testováním, co skutečně funguje

Základy kódování
Základní layout pro desktopy
• Outlook nepodporuje vlastnost „float“ ani vrstvy → tabulkový layout
• Gmail odřezává celou hlavičku → inline styly
• Outlook nepodporuje obrázky na pozadí → jen vkládané obrázky
• Centrum odřezává BODY → vložte DIV a v něm styly pro BODY zopakujte
• kolem e-mailu vytvořte mezeru, aby byl odsazen od reklamy ve freemailech
• v Lotus Notes nefungují colspan, rowspan → vnořené tabulky
• u každé buňky nutno zadat šířku – Lotus Notes neumí dopočítávat
• okraje přes margin někdy nefungují → řešit přes padding nebo cellpadding
• barvy zadávejte jako šestimístný kód (ne třímístný)
Stýskalo se vám po kódování pro IE6 a IE7? → tohle si užijete…

Tělo e-mailu I.
Element body
Padding a margin na nulu zajistí, že iOS mail nevytvoří kolem mailu chybný bílý
rámeček.
-webkit-text-size adjust a –ms-text-size-adjust ruší automatické zvětšení textu na
některých klientech → zařízení zachová nastavenou velikost písma.
<body style= "padding: 0 0 0 0; margin: 0 0 0 0; -webkit-text-size-adjust: none;
-ms-text-size-adjust: 100%; background-color: #ffffff; color: #000000; line-
height: 18px; font-family: …">

</body>

Tělo e-mailu II.
Wrapper
Některé freemaily (třeba Centrum) odřezávají hlavičku i s BODY, vnořený DIV
zajistí zachování stylů a pozadí.
Zopakujte zde definici fontů a výšky řádku.
Všimněte si, že barvy zadáváme 6místným kódem, některé freemaily třímístný
nepodporují. Stejně tak „background-color“ místo „background“.
<div style= "padding: 0 0 0 0; margin: 0 0 0 0; background-color: #ffffff; color:
#000000; text-align: center; line-height: 18px; font-size: 12px; font-family: …">

</div>

Tělo e-mailu III.
Hlavní tabulka
Pro vícesloupcové layouty lze tabulky zanořovat do sebe, pokaždé je ale třeba
zopakovat styly (hlavně pro fonty a výšku řádku).
U všech buněk uveďte šířky. Pozor, aby se součet šířek buněk tabulky rovnal šířce
tabulky!
Google Mail ignoruje rámečky buněk → řešit přes vložený DIV.
<table width= "600" cellspacing= "0" cellpadding= "0" border= "0" style=
“line-height: 1.5; font-size: 12px; font-family: …" >

</table>

Tělo e-mailu IV.
Obrázek
Pouze formáty GIF a JPG, PNG a další formáty někdy nefungují.
Border= "0" odstraní rámečky, style="display: block" odstraní mezery pod
obrázkem při vložení do buňky tabulky. Pokud někdy block nefunguje správně,
zkuste použít „float: left“.
Nepoužívejte relativní odkazy, jen absolutní cesty na server.
Zajistěte dlouhou životnost obrázků (příjemce se může vrátit i po roce).
<img src= "http://www.adaptic.cz/img/logo.gif " width= "150 " height= "70"
border= "0" style= "display: block">

Tělo e-mailu V.
Odkaz
Centrum nepodtrhává odkazy, resp. podtrhává je svou vlastní barvou → vložte do
odkazu ještě SPAN s definicí barvy a podtržení.
<a href= "http://www.adaptic.cz" style= "color: yellow"><span style= "color:
yellow; text-decoration: underline;">račte tudy</span></a>

Hlavička e-mailu I.
Doctype
Viewport meta tag
Důležitý pro responsive verzi. Zařízení ví, že se mu šířka stránky přizpůsobí a že
nemá zoomovat. Nefunguje v Blackberry, které pak obsah mailu nezobrazí. Ale
kolik lidí je u nás používá?
Gmail a Centrum automaticky přepisují doctype na XHTML 1.0 Strict, ale ani
HTML 4 nevadí. Volba doctype je tak užitečná spíš kvůli validaci (prevence chyb).
<meta name=“viewport“ content=“width=device-width, initial scale=1“>
Kódování
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Říkáme zařízení, jaké má mail kódování. Kriticky nutné → hrozí rozbitá diakritika.

Hlavička e-mailu II.
Titulek
Většina mailových programů titulek ignoruje. Ale pokud newslettery zobrazujete
na webu v archívu nebo umožňujete jejich zobrazení v prohlížeči, získáte plusové
body pro SEO a uživatelskou přívětivost.
Meta tag Description
<meta name="description" content=„Lákavý popisek" />
Málo důležité. Obsahuje-li klíčovou frázi, může zvýšit míru prokliku ve výsledcích
vyhledávání.
<title>Klíčová fráze</title>

Hlavička e-mailu III.
Media queries
Přiřazení stylů přes media queries umí použít pokročilá zařízení, která umí
zároveň CSS3, jako jsou kulaté rohy. Patří k nim Kindle Fire, iPhone, iPad, většina
verzí Androidu. Bohužel k nim nepatří mobilní aplikace pro Gmail nebo Yahoo!
mail.
Zde začíná responzivní magie. Ono „max-width“ omezuje šířku displaye zařízení
na 300px. Podobných definic můžete vyskládat za sebe víc a přizpůsobit tak
podobu mailu různým velikostem zařízení.
<style type="text/css">
@media screen and (max-width: 300px) {
/ * sem přijdou styly pro mobilní zařízení */
}
</style>

Hlavička e-mailu IV.
Styly pro mobilní zařízení
Unikátní názvy tříd, aby nedošlo ke kolizi ve freemailech.
„!important“ přepíše danou vlastnost zapsanou inline stylem.
Přiřazování tříd přes selektory zajistí funkčnost v Yahoo! mailu (jinak by Yahoo!
mail mylně aplikoval styly pro mobilní verzi na verzi pro desktopy).
table[class="adaptic_hide"] {
display: none !important;
}

Osvědčené techniky I.
Roztažení obrázků
Roztáhneme obrázek na celou šířku fluidního layoutu, výška se dopočítá.
Další možností je obrázek v buňce tabulky skrýt a na pozadí zobrazit jiný. Tato
technika také umožňuje zobrazovat odlišné obrázky pro klasický display a retina
display (s dvojnásobným rozlišením).
img[class="adaptic_wide"] {
width: 100% !important;
height: auto !important;
}

Spojování sloupců tabulky
Na malý telefon se dvousloupcová tabulka nevejde. Zobrazíme tedy obsah pod
sebou a buňky roztáhneme na 100 % šířky zařízení.
td[class="adaptic_td_split"] {
width: 100% !important;
float: left !important;
}
Osvědčené techniky II.

Osvědčené techniky III.
Další nastavení stylů mailu pro mobilní zařízení
• odmažte vše, co je v mobilní verzi zbytečné
• převeďte layout na fluidní (na 100% šířku)
• zvětšete písmo (cca 15 pixelů)
• pohrajte si s odsazeními pro větší přehlednost
Počítejte s dotykovým ovládáním, tj. zvětšete všechna tlačítka, odkazy,
call2action paletky min. na výšku 44 pixelů.
Existuje také technika zobrazování / skrývání jednotlivých částí e-mailu při kliknutí
na titulek. Ale pokud něco takového potřebujete, znamená to, že e-mail není
dostatečně jednoduchý.

Ladění
• validátor je náš nejlepší kamarád
• překontrolujte rozměry buněk tabulky
• nastavte u tabulek border= "1" a sledujte, jak se tabulka zobrazí
Řešení chyb
Testujte zobrazení mailu
• v různých prohlížečích a jejich různých verzích
• v různých programech (Outlook různých verzí, Thunderbird, Lotus Notes)
• na různých freemailech (Gmail, Seznam, Centrum) v kombinaci s různými
prohlížeči
• na různých zařízeních (telefony, tablety, čtečky…)
• v různých aplikacích (mobilní aplikace pro Gmail, Yahoo! Mail…)

Přečtěte si článek s ukázkovou šablonou na
www.adaptic.cz
www.facebook.com/Adaptic.cz
www.twitter.com/Adaptic

Jak na responzivní mailing

Recommandé

Recommandé

Contenu connexe

Similaire à Jak na responzivní mailing

Similaire à Jak na responzivní mailing (20)

Jak na responzivní mailing