Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 t...
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...
• iOS Mail app (iPhone, iPad)
• Android 4.X OEM app
• Windows Phone 7.5
• BlackBerry 7 OS
• Kindle Fire
• Gmail v prohlíže...
• 25 % Apple iPhone +
• 13 % Outlook
• 12 % Apple iPad
• 10 % Gmail
• 9 % Google Android +
Statistiky přístupů
(Litmus, ún...
• jednosloupcový layout
• 100% šířka (320 px pro iPhone vs. 640 px pro desktop)
• fluidní obrázky
• velký text (15 px vs. ...
Zrušíme odsazení u BODY
<body style= "padding: 0 0 0 0; margin: 0 0 0
0">
<!-- zde bude wrapper -->
</body>
• iOS mail nev...
Zrušíme automatické zvětšení textu
<body style= "…-webkit-text-size-adjust: none;
-ms-text-size-adjust: 100%; …">
<!-- zde...
Přizpůsobíme šířku obsahu, vypneme zoom
<head>
<meta name="viewport"
content="width=device-width, initial scale=1">
…
</he...
Media queries
<style type="text/css">
@media screen and (max-width: 300px) {
/* styly pro mobilní zařízení */
}
</style>
•...
Přiřazení stylu k prvku
table[class="adaptic_hide"] {
display: none !important;
}
• unikátní názvy tříd (kolize ve freemai...
Tabulka o více sloupcích
td[class="adaptic_td_split"] {
width: 100% !important;
float: left !important;
}
• zobrazíme obsa...
Roztažení obrázků
img[class="adaptic_wide"] {
width: 100% !important;
height: auto !important;
}
• roztáhneme obrázek na š...
Ukázka šablony
• http://www.adaptic.cz/img/newsletter/gfx-2013/_mail.htm
Testování
Kodérský manuál
• www.adaptic.cz/znalosti/clanky/responzivni-maily/
Děkuji ;-)
Twittter: @Adaptic @Strafelda
Facebook: Adaptic.cz
Web: www.adaptic.cz
Upcoming SlideShare
Loading in …5
×

Jak na responzivní maily

1,891 views

Published on

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.

Published in: Technology
  • Be the first to comment

Jak na responzivní maily

  1. 1. Jan Štráfelda, Adaptic, s. r. o. 2. sraz Frontendistů, Brno 26. 3. 2014 Jak na responzivní maily
  2. 2. • HTML: tabulky a inline styly pro Outlook & spol. • hlavička: media queries & CSS3 pro smartphony, tablety a čtečky Jak to funguje
  3. 3. Proč responzivní maily (Litmus, 9. 3. 2014)
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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ý
  15. 15. Ukázka šablony • http://www.adaptic.cz/img/newsletter/gfx-2013/_mail.htm
  16. 16. Testování
  17. 17. Kodérský manuál • www.adaptic.cz/znalosti/clanky/responzivni-maily/
  18. 18. Děkuji ;-) Twittter: @Adaptic @Strafelda Facebook: Adaptic.cz Web: www.adaptic.cz

×