• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Jak na responzivní mailing
 

Jak na responzivní mailing

on

  • 4,098 views

Pokročilý návod k tvorbě šablon respozivních e-mailů. Upraveno pro české prostředí (včetně freemailů Seznam a Centrum).

Pokročilý návod k tvorbě šablon respozivních e-mailů. Upraveno pro české prostředí (včetně freemailů Seznam a Centrum).

Statistics

Views

Total Views
4,098
Views on SlideShare
782
Embed Views
3,316

Actions

Likes
8
Downloads
0
Comments
0

6 Embeds 3,316

http://www.adaptic.cz 3310
http://plus.url.google.com 2
http://www.linkedin.com 1
https://www.google.cz 1
http://translate.googleusercontent.com 1
http://www.google.cz 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Jak na responzivní mailing Jak na responzivní mailing Presentation Transcript

    • 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: …"> <!-- zde bude wrapper --> </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: …"> <!-- zde bude hlavní tabulka --> </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: …" > <!-- obsah tabulky --> </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