Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?
Transcript of Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?
![Page 1: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/1.jpg)
HTML a CSS pre mobilný mail
Peter Orosz Feedo.cz | Feedo.sk | Feedo.pl
![Page 2: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/2.jpg)
Mobilita je v prvom rade:
…optimalizácia kódu šablóny tak, aby užívateľ nemusel:
• scrollovať zľava doprava
• zoomovať
![Page 3: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/3.jpg)
Mobilita je ďalej…
• optimalizácia rozmerov tlačidiel
• skrytie prebytočných prvkov
• úprava farieb pre zlepšenie kontrastu
![Page 4: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/4.jpg)
A) fluidita• rozloženie ostáva rovnaké• menia sa len rozmery blokov
![Page 5: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/5.jpg)
B) responzivita
• menia sa rozmery blokov • mení sa aj rozloženie blokov
![Page 6: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/6.jpg)
• 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
![Page 7: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/7.jpg)
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
![Page 8: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/8.jpg)
• 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
![Page 9: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/9.jpg)
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
![Page 10: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/10.jpg)
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
![Page 11: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/11.jpg)
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
![Page 12: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/12.jpg)
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
![Page 13: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/13.jpg)
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
![Page 14: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/14.jpg)
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
![Page 15: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/15.jpg)
Problém kúpených šablon
😍✓ 🔍👀?
media queries
![Page 16: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/16.jpg)
Podpora media queries
✓ áno
X nie
Pomer typov zariadení Vašich klientov zistíte pomocou nástrojov:
• Litmus
• Email Insights (integrácia do Silverpop)
![Page 17: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/17.jpg)
Podpora media queries
![Page 18: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/18.jpg)
Kúpiť šablónu?
![Page 19: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/19.jpg)
😍✓
vs.
Jsem hezčí!
Fungujibez media queries!!!
nič moc…✓
Podcenenie funkčného kompromisu:„funkčný kompromis“
![Page 20: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/20.jpg)
Naša šablóna
😍✓ nič moc…✓ 🔍👀?
„funkčný kompromis“
media queries
progressiveenhancement
![Page 21: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/21.jpg)
Tvorba responzívnej šablóny
![Page 22: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/22.jpg)
![Page 23: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/23.jpg)
#1 „back-end“
1.html
![Page 25: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/25.jpg)
• viewport meta tag - povinné
• Facebook meta tagy (texty a obrázky pre zdieľanie)
• „Pre-header“ (text za Subject Line)
![Page 26: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/26.jpg)
#2„funkčný kompromis“
2.html
![Page 27: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/27.jpg)
„Falošný float“
• 600px:
• 2-stĺpcový layout: 2 * 300px
• 3-stĺpcový layout: 3 * 200px
![Page 28: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/28.jpg)
„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
![Page 29: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/29.jpg)
• 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
![Page 30: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/30.jpg)
• malé bočné paddingy (max. 10px)
11 2 311
![Page 31: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/31.jpg)
obdobne dokončíme3-stĺpcové bloky:
3.html
![Page 32: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/32.jpg)
Progressive enhancement: media queries pro iPhone
4.html
![Page 33: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/33.jpg)
Media queries
width, max-width (všetky tabuľky s pevným width)
height: auto (všetky obrázky)
![Page 34: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/34.jpg)
Media queries
všetky tabuľky s pevným width
všetky obrázky
![Page 37: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/37.jpg)
Redukcia kódu• https://kangax.github.io/html-minifier/
Industry standard: < 100 kBFeedo e-blast (15 bannerov): ~ 50 kB
![Page 38: Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?](https://reader034.fdocument.pub/reader034/viewer/2022051300/58effb4d1a28ab24598b456d/html5/thumbnails/38.jpg)
Ďakujem :)