Jak na responzivní maily

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">

</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%; …">

</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

Kodérský manuál
• www.adaptic.cz/znalosti/clanky/responzivni-maily/

Děkuji ;-)
Twittter: @Adaptic @Strafelda
Facebook: Adaptic.cz
Web: www.adaptic.cz

Jak na responzivní maily

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Jak na responzivní maily

Ähnlich wie Jak na responzivní maily (20)

Jak na responzivní maily