18
Jan Štráfelda, Adaptic, s. r. o. 2. sraz Frontendistů, Brno 26. 3. 2014 Jak na responzivní maily
| Date post: | 29-Nov-2014 |
| Category: |
Technology |
| Upload: | adaptic-sro |
| View: | 866 times |
| Download: | 2 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
Testování
Kodérský manuál
•www.adaptic.cz/znalosti/clanky/responzivni-maily/
Děkuji ;-)Twittter: @Adaptic @StrafeldaFacebook: Adaptic.cz
Web: www.adaptic.cz
