O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?

2.432 visualizações

Publicada em

Hlubší analýza kódu aneb co se (ne)děje na pozadí?

Publicada em: Marketing
  • Seja o primeiro a comentar

Peter Orosz - Hlubší analýza kódu aneb co se (ne)děje na pozadí?

  1. 1. HTML a CSS pre mobilný mail Peter Orosz Feedo.cz | Feedo.sk | Feedo.pl
  2. 2. Mobilita je v prvom rade: …optimalizácia kódu šablóny tak, aby užívateľ nemusel: • scrollovať zľava doprava • zoomovať
  3. 3. Mobilita je ďalej… • optimalizácia rozmerov tlačidiel • skrytie prebytočných prvkov • úprava farieb pre zlepšenie kontrastu
  4. 4. A) fluidita • rozloženie ostáva rovnaké • menia sa len rozmery blokov
  5. 5. B) responzivita • menia sa rozmery blokov • mení sa aj rozloženie blokov
  6. 6. • obsahuje Váš e-mail množstvo textu? • komunikuje Váš e-mail
 1 posolstvo = je kratšieho rozsahu? • zaobíde sa Váš e-mail
 bez množstva obrázkov? • designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope? => fluidita Fluidita
  7. 7. Fluidita • obsahuje Váš e-mail množstvo textu? • komunikuje Váš e-mail
 1 posolstvo = je kratšieho rozsahu? • zaobíde sa Váš e-mail
 bez množstva obrázkov? • designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope? => fluidita
  8. 8. • obsahuje Váš e-mail množstvo textu? • komunikuje Váš e-mail
 1 posolstvo = je kratšieho rozsahu? • zaobíde sa Váš e-mail
 bez množstva obrázkov? • designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope? Fluiditašpatný príklad
  9. 9. Fluidita • obsahuje Váš e-mail množstvo textu? • komunikuje Váš e-mail
 1 posolstvo = je kratšieho rozsahu? • zaobíde sa Váš e-mail
 bez množstva obrázkov? • designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope? špatný príklad fixne 420px
  10. 10. Fluidita • obsahuje Váš e-mail množstvo textu? • komunikuje Váš e-mail
 1 posolstvo = je kratšieho rozsahu? • zaobíde sa Váš e-mail
 bez množstva obrázkov? • designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope? => fluidita
  11. 11. Fluidita • obsahuje Váš e-mail množstvo textu? • komunikuje Váš e-mail
 1 posolstvo = je kratšieho rozsahu? • zaobíde sa Váš e-mail
 bez množstva obrázkov? • designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope? => fluidita
  12. 12. Fluidita • obsahuje Váš e-mail množstvo textu? • komunikuje Váš e-mail
 1 posolstvo = je kratšieho rozsahu? • zaobíde sa Váš e-mail
 bez množstva obrázkov? • designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope? => fluidita
  13. 13. Fluidita • obsahuje Váš e-mail množstvo textu? • komunikuje Váš e-mail
 1 posolstvo = je kratšieho rozsahu? • zaobíde sa Váš e-mail
 bez množstva obrázkov? • designujete e-mail v štýle „microsite“ = nevadí Vám scrollovanie na desktope? => fluidita
  14. 14. 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
  15. 15. Problém kúpených šablon 😍✓ 🔍👀? media queries
  16. 16. Podpora media queries ✓ áno X nie Pomer typov zariadení Vašich klientov zistíte pomocou nástrojov: • Litmus • Email Insights
 (integrácia do Silverpop)
  17. 17. Podpora media queries
  18. 18. Kúpiť šablónu?
  19. 19. 😍✓ vs. Jsem hezčí! Funguji
 bez media queries!!! nič moc…✓ Podcenenie funkčného kompromisu: „funkčný kompromis“
  20. 20. Naša šablóna 😍✓ nič moc…✓ 🔍👀? „funkčný kompromis“ media queries progressive
 enhancement
  21. 21. Tvorba 
 responzívnej šablóny
  22. 22. #1 „back-end“ 1.html
  23. 23. • http://www.emailology.org/
  24. 24. • viewport meta tag - povinné • Facebook meta tagy (texty a obrázky pre zdieľanie) • „Pre-header“ (text za Subject Line)
  25. 25. #2
 „funkčný kompromis“ 2.html
  26. 26. „Falošný float“ • 600px: • 2-stĺpcový layout: 2 * 300px • 3-stĺpcový layout: 3 * 200px
  27. 27. „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
  28. 28. • 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
  29. 29. • malé bočné paddingy
 (max. 10px) 11 2 311
  30. 30. obdobne dokončíme
 3-stĺpcové bloky: 3.html
  31. 31. Progressive enhancement: media queries pro iPhone 4.html
  32. 32. Media queries width, max-width (všetky tabuľky s pevným width) height: auto (všetky obrázky)
  33. 33. Media queries všetky tabuľky s pevným width všetky obrázky
  34. 34. Redukcia kódu • https://kangax.github.io/html-minifier/
  35. 35. Redukcia kódu • https://kangax.github.io/html-minifier/
  36. 36. Redukcia kódu • https://kangax.github.io/html-minifier/ Industry standard: < 100 kB Feedo e-blast (15 bannerov): ~ 50 kB
  37. 37. Ďakujem :)

×