• Save
Jak na responzivní mailing
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Jak na responzivní mailing

on

  • 4,599 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,599
Views on SlideShare
1,011
Embed Views
3,588

Actions

Likes
9
Downloads
0
Comments
0

6 Embeds 3,588

http://www.adaptic.cz 3582
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 Presentation Transcript

  • 1. 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ů
  • 2. 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.
  • 3. 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
  • 4. 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ů
  • 5. 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
  • 6. 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…
  • 7. 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>
  • 8. 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>
  • 9. 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>
  • 10. 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">
  • 11. 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>
  • 12. 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.
  • 13. 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>
  • 14. 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>
  • 15. 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; }
  • 16. 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; }
  • 17. 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.
  • 18. 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ý.
  • 19. 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…)
  • 20. Přečtěte si článek s ukázkovou šablonou na www.adaptic.cz www.facebook.com/Adaptic.cz www.twitter.com/Adaptic