38
HTML a CSS pre mobilný mail Peter Orosz Feedo.cz | Feedo.sk | Feedo.pl
HTML a CSS pre mobilný mail
Peter Orosz Feedo.cz | Feedo.sk | Feedo.pl
Mobilita je v prvom rade:
…optimalizácia kódu šablóny tak, aby užívateľ nemusel:
• scrollovať zľava doprava
• zoomovať
Mobilita je ďalej…
• optimalizácia rozmerov tlačidiel
• skrytie prebytočných prvkov
• úprava farieb pre zlepšenie kontrastu
A) fluidita• rozloženie ostáva rovnaké• menia sa len rozmery blokov
B) responzivita
• menia sa rozmery blokov • mení sa aj rozloženie blokov
• obsahuje Váš e-mail množstvo textu?
• komunikuje Váš e-mail1 posolstvo = je kratšieho rozsahu?
• zaobíde sa Váš e-mailbez množstva obrázkov?
• designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope?
=> fluidita
Fluidita
Fluidita• obsahuje Váš e-mail
množstvo textu?
• komunikuje Váš e-mail1 posolstvo = je kratšieho rozsahu?
• zaobíde sa Váš e-mailbez množstva obrázkov?
• designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope?
=> fluidita
• obsahuje Váš e-mail množstvo textu?
• komunikuje Váš e-mail1 posolstvo = je kratšieho rozsahu?
• zaobíde sa Váš e-mailbez množstva obrázkov?
• designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope?
Fluidita špatný príklad
Fluidita• obsahuje Váš e-mail
množstvo textu?
• komunikuje Váš e-mail1 posolstvo = je kratšieho rozsahu?
• zaobíde sa Váš e-mailbez množstva obrázkov?
• designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope?
špatný príklad
fixne 420px
Fluidita• obsahuje Váš e-mail
množstvo textu?
• komunikuje Váš e-mail1 posolstvo = je kratšieho rozsahu?
• zaobíde sa Váš e-mailbez množstva obrázkov?
• designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope?
=> fluidita
Fluidita• obsahuje Váš e-mail
množstvo textu?
• komunikuje Váš e-mail1 posolstvo = je kratšieho rozsahu?
• zaobíde sa Váš e-mailbez množstva obrázkov?
• designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope?
=> fluidita
Fluidita• obsahuje Váš e-mail
množstvo textu?
• komunikuje Váš e-mail1 posolstvo = je kratšieho rozsahu?
• zaobíde sa Váš e-mailbez množstva obrázkov?
• designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope?
=> fluidita
Fluidita• obsahuje Váš e-mail
množstvo textu?
• komunikuje Váš e-mail1 posolstvo = je kratšieho rozsahu?
• zaobíde sa Váš e-mailbez množstva obrázkov?
• designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope?
=> fluidita
Responzivita• ste e-shop, ktorý posiela
„e-blast“?
• obsahuje Váš mail desiatky obrázkov?
• používate kratšie texty, spoliehate sa na množstvo CTA?
=> responzivita
Problém kúpených šablon
😍✓ 🔍👀?
media queries
Podpora media queries
✓ áno
X nie
Pomer typov zariadení Vašich klientov zistíte pomocou nástrojov:
• Litmus
• Email Insights (integrácia do Silverpop)
Podpora media queries
Kúpiť šablónu?
😍✓
vs.
Jsem hezčí!
Fungujibez media queries!!!
nič moc…✓
Podcenenie funkčného kompromisu:„funkčný kompromis“
Naša šablóna
😍✓ nič moc…✓ 🔍👀?
„funkčný kompromis“
media queries
progressiveenhancement
Tvorba responzívnej šablóny
#1 „back-end“
1.html
• viewport meta tag - povinné
• Facebook meta tagy (texty a obrázky pre zdieľanie)
• „Pre-header“ (text za Subject Line)
#2„funkčný kompromis“
2.html
„Falošný float“
• 600px:
• 2-stĺpcový layout: 2 * 300px
• 3-stĺpcový layout: 3 * 200px
„Falošný float“obmedzenie šírky pre Outlook
obmedzenie šírky pre Outlook
obmedzenie šírky pre ostatné
vnorené tabuľky so stĺpcami
vnorené tabuľky so stĺpcami
hack pre Outlook
• line-height vždy v px - povinné
• mso-line-height-rule: exactly; vždy pred line-height
• Hack pre Outlook - button klikateľný po celom obsahu
http://buttons.cm
• malé bočné paddingy (max. 10px)
11 2 311
obdobne dokončíme3-stĺpcové bloky:
3.html
Progressive enhancement: media queries pro iPhone
4.html
Media queries
width, max-width (všetky tabuľky s pevným width)
height: auto (všetky obrázky)
Media queries
všetky tabuľky s pevným width
všetky obrázky
Redukcia kódu• https://kangax.github.io/html-minifier/
Industry standard: < 100 kBFeedo e-blast (15 bannerov): ~ 50 kB
Ďakujem :)
