ݺߣ

ݺߣShare a Scribd company logo

Jak na responzivní maily

•Download as PPTX, PDF•
•
Adaptic, s.r.o.
Adaptic, s.r.o.

Prezentace z druhého srazu Frontendistů (Brno). Jak responzivní maily fungují, proč má smysl je řešit a ukázky některých kodérských technik. Celý článek k tématu najdete na https://www.strafelda.cz/responzivni-maily-navod

1 of 18
Downloaded 12 times
Jan Štráfelda, Adaptic, s. r. o. 2. sraz Frontendistů, Brno 26. 3. 2014 Jak na responzivní maily
• HTML: tabulky a inline styly pro Outlook & spol. • hlavička: media queries & CSS3 pro smartphony, tablety a čtečky Jak to funguje
Proč responzivní maily (Litmus, 9. 3. 2014)
• 10-15 % přístupů na web tvoří v ČR mobilní zařízení • 150× denně kontrolují lidé svůj telefon • 80 % příjemců smaže mail, nevypadá-li na telefonu dobře • jen 3,3 % příjemců zobrazí tentýž mail na více zařízeních Další důvody pro responzivní maily
• iOS Mail app (iPhone, iPad) • Android 4.X OEM app • Windows Phone 7.5 • BlackBerry 7 OS • Kindle Fire • Gmail v prohlížeči E-mailoví klienti +++ Podporují --- Nepodporují • Android Gmail app • iPhone Gmail app • Android Yahoo!mail • iPhone Yahoo!mail • Windows Phone 7, 8 • Outlook.com v prohlížeči
• 25 % Apple iPhone + • 13 % Outlook • 12 % Apple iPad • 10 % Gmail • 9 % Google Android + Statistiky přístupů (Litmus, únor 2014, 323 mil. otevřených mailů) • 8 % Apple Mail • 6 % Outlook.com • 5 % Yahoo! Mail • 3 % Windows Life Mail • 2 % Windows Mail
• jednosloupcový layout • 100% šířka (320 px pro iPhone vs. 640 px pro desktop) • fluidní obrázky • velký text (15 px vs. 12 px pro desktop) • větší tlačítka (44 × 44 pixelů) • výrazná CTA • kontrasty Struktura & best practice
Zrušíme odsazení u BODY <body style= "padding: 0 0 0 0; margin: 0 0 0 0"> <!-- zde bude wrapper --> </body> • iOS mail nevytvoří kolem mailu chybný bílý rámeček
Zrušíme automatické zvětšení textu <body style= "…-webkit-text-size-adjust: none; -ms-text-size-adjust: 100%; …"> <!-- zde bude wrapper --> </body> • důležité pro Safari a Windows Mobile
Přizpůsobíme šířku obsahu, vypneme zoom <head> <meta name="viewport" content="width=device-width, initial scale=1"> … </head> • nefunguje v BlackBerry → obsah mailu se vůbec nezobrazí!
Media queries <style type="text/css"> @media screen and (max-width: 300px) { /* styly pro mobilní zařízení */ } </style> • styl se použije pro zařízení s max. šířkou 300px
Přiřazení stylu k prvku table[class="adaptic_hide"] { display: none !important; } • unikátní názvy tříd (kolize ve freemailech) • !important přepíše zápis v inline stylu • přiřazení třídy přes selektor kvůli Yahoo! mailu
Tabulka o více sloupcích td[class="adaptic_td_split"] { width: 100% !important; float: left !important; } • zobrazíme obsah buněk pod sebou • roztáhneme na 100 % šířky
Roztažení obrázků img[class="adaptic_wide"] { width: 100% !important; height: auto !important; } • roztáhneme obrázek na šířku boxu, výška se dopočítá • lze také obrázek v TD skrýt a na pozadí zobrazit jiný
Ukázka šablony • http://www.adaptic.cz/img/newsletter/gfx-2013/_mail.htm
ձٴDZáí
Kodérský manuál • www.adaptic.cz/znalosti/clanky/responzivni-maily/
Děkuji ;-) Twittter: @Adaptic @Strafelda Facebook: Adaptic.cz Web: www.adaptic.cz

More Related Content

Jak na responzivní maily

  • 1. Jan Štráfelda, Adaptic, s. r. o. 2. sraz Frontendistů, Brno 26. 3. 2014 Jak na responzivní maily
  • 2. • HTML: tabulky a inline styly pro Outlook & spol. • hlavička: media queries & CSS3 pro smartphony, tablety a čtečky Jak to funguje
  • 3. Proč responzivní maily (Litmus, 9. 3. 2014)
  • 4. • 10-15 % přístupů na web tvoří v ČR mobilní zařízení • 150× denně kontrolují lidé svůj telefon • 80 % příjemců smaže mail, nevypadá-li na telefonu dobře • jen 3,3 % příjemců zobrazí tentýž mail na více zařízeních Další důvody pro responzivní maily
  • 5. • iOS Mail app (iPhone, iPad) • Android 4.X OEM app • Windows Phone 7.5 • BlackBerry 7 OS • Kindle Fire • Gmail v prohlížeči E-mailoví klienti +++ Podporují --- Nepodporují • Android Gmail app • iPhone Gmail app • Android Yahoo!mail • iPhone Yahoo!mail • Windows Phone 7, 8 • Outlook.com v prohlížeči
  • 6. • 25 % Apple iPhone + • 13 % Outlook • 12 % Apple iPad • 10 % Gmail • 9 % Google Android + Statistiky přístupů (Litmus, únor 2014, 323 mil. otevřených mailů) • 8 % Apple Mail • 6 % Outlook.com • 5 % Yahoo! Mail • 3 % Windows Life Mail • 2 % Windows Mail
  • 7. • jednosloupcový layout • 100% šířka (320 px pro iPhone vs. 640 px pro desktop) • fluidní obrázky • velký text (15 px vs. 12 px pro desktop) • větší tlačítka (44 × 44 pixelů) • výrazná CTA • kontrasty Struktura & best practice
  • 8. Zrušíme odsazení u BODY <body style= "padding: 0 0 0 0; margin: 0 0 0 0"> <!-- zde bude wrapper --> </body> • iOS mail nevytvoří kolem mailu chybný bílý rámeček
  • 9. Zrušíme automatické zvětšení textu <body style= "…-webkit-text-size-adjust: none; -ms-text-size-adjust: 100%; …"> <!-- zde bude wrapper --> </body> • důležité pro Safari a Windows Mobile
  • 10. Přizpůsobíme šířku obsahu, vypneme zoom <head> <meta name="viewport" content="width=device-width, initial scale=1"> … </head> • nefunguje v BlackBerry → obsah mailu se vůbec nezobrazí!
  • 11. Media queries <style type="text/css"> @media screen and (max-width: 300px) { /* styly pro mobilní zařízení */ } </style> • styl se použije pro zařízení s max. šířkou 300px
  • 12. Přiřazení stylu k prvku table[class="adaptic_hide"] { display: none !important; } • unikátní názvy tříd (kolize ve freemailech) • !important přepíše zápis v inline stylu • přiřazení třídy přes selektor kvůli Yahoo! mailu
  • 13. Tabulka o více sloupcích td[class="adaptic_td_split"] { width: 100% !important; float: left !important; } • zobrazíme obsah buněk pod sebou • roztáhneme na 100 % šířky
  • 14. Roztažení obrázků img[class="adaptic_wide"] { width: 100% !important; height: auto !important; } • roztáhneme obrázek na šířku boxu, výška se dopočítá • lze také obrázek v TD skrýt a na pozadí zobrazit jiný
  • 18. Děkuji ;-) Twittter: @Adaptic @Strafelda Facebook: Adaptic.cz Web: www.adaptic.cz