Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Peter Orosz - Šablona od A do Z

1,860 views

Published on

Peter Orosz s velmi detailní a důkladnou přednáškou na téma HTML šablon. Přednáška plná technických tipů a hacků nejen pro Outlooky.

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

Peter Orosz - Šablona od A do Z

  1. 1. Šablóna: od A po Z Peter Orosz LinkedIn | peter@feedo.cz
  2. 2. Otázky: 1. Chcem to robiť? 2. Chcem to robiť dobre?
  3. 3. „Systém“ práce • stavba newslettru je hladký proces • neignorujem chyby, „ku ktorým sa vrátim“ • svoju šablónu spoznám aj o rok, aj o polnoci
  4. 4. „Systém“ práce
  5. 5. „Systém“ práce
  6. 6. Modularita
  7. 7. Modularita
  8. 8. Hybridný prístup Fluid Responsive Hybrid
  9. 9. Task branching
  10. 10. „Systém“ práce branch branch branch
  11. 11. Náš projekt
  12. 12. http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive- email-without-media-queries--cms-23919 Creating a Future-Proof Responsive Email Without Media Queries Nicole Merlin
  13. 13. https://github.com/peterorosz/vivmail2016 (01-scaffolding.html) Scaffolding "Lešenie"
  14. 14. Dôležité prvky <meta name="viewport" content="width=device-width, initial-scale=1.0"> • zúži šírku newslettru pre mobilné zariadenie
  15. 15. Dôležité prvky CSS Resety (<!— RESETS —>…) • normalizujú správanie sa prvkov v Outlook, Android Mail
  16. 16. Dôležité prvky <center style="width: 100%; table-layout: fixed; - webkit-text-size-adjust: 100%; -ms-text-size- adjust: 100%;"> • centruje prvky šablóny • stanovuje šírku šablóny pre mobilné zariadenia • zabraňuje klientom preformátovať text
  17. 17. Dôležité prvky <div style="max-width: 600px; margin: 0 auto;"> • extra centruje prvky šablóny pre niektoré klienty • stanovuje šírku šablóny na pre desktop
  18. 18. Dôležité prvky <!--[if (gte mso 9)|(IE)]>
 <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td>
 <![endif]--> • stanovuje šírku šablóny na pre Outlook na desktope • normalizuje správanie sa prvkov v Outlook
  19. 19. Dôležité prvky <table style="margin: 0 auto; width: 100%; max- width: 600px;" align="center" cellpadding="0" cellspacing="0" border="0"> • stanovuje šírku šablóny (pre mobil i desktop) • normalizuje správanie sa prvkov v Outlook
  20. 20. Dôležité prvky <!— Pre-header ->… • Zneviditeľní prvú vetu v šablóne, čím vznikne „extra Subject Line“
  21. 21. https://github.com/peterorosz/vivmail2016 (02-rows.html) Rows
  22. 22. Modularita
  23. 23. Štruktúra <tr>
 <td style="text-align: center; font-size: 0;">
 
 <!-- Insert columns here -->
 
 </td>
 </tr> • font-size „hack“ zabráni vznikaniu medzier medzi obrázkami v niektorých klientoch
  24. 24. text-align: … left center right display: inline-block
  25. 25. https://github.com/peterorosz/vivmail2016 (03-columns.html) Columns
  26. 26. Kostra 1 stĺpca (Outlook) <!--[if (gte mso 9)|(IE)]>
 <table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td width="600" valign="top">
 <![endif]--> <!--[if (gte mso 9)|(IE)]>
 </td>
 </tr>
 </table>
 <![endif]-->
  27. 27. Kostra viacerých stĺpcov <!--[if (gte mso 9)|(IE)]>
 <table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td width="300" valign="top">
 <![endif]—> <!--[if (gte mso 9)|(IE)]>
 </td><td width="300" valign="top">
 <![endif]--> <!--[if (gte mso 9)|(IE)]>
 </td>
 </tr>
 </table>
 <![endif]-->
  28. 28. „Výplň“ stĺpcov: 1 stĺpec <div style="width: 100%; max-width: 600px; display: inline-block; vertical-align: top;">
 <table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td> </td>
 </tr>
 </table>
 </div>
  29. 29. valign / vertical-align: … top bottom middle
  30. 30. valign / vertical-align: … top bottom middle top middle middle bottom bottom bottom
  31. 31. valign / vertical-align: … top middle bottom
  32. 32. „Výplň“ stĺpcov: 2 a viac <div style="width: 100%; max-width: 300px; display: inline-block; vertical-align: top;">
 <table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td> </td>
 </tr>
 </table>
 </div>
  33. 33. https://github.com/peterorosz/vivmail2016 (04-outer-alignment.html) Outer Alignment
  34. 34. Odsadenie (padding)
  35. 35. Odsadenie (padding)
  36. 36. Odsadenie (padding) <div style="width: 100%; max-width: 600px; display: inline-block; vertical-align: top;">
 <table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td style="padding: 10px;"> </td>
 </tr>
 </table>
 </div>
  37. 37. https://github.com/peterorosz/vivmail2016 (05-outer-alignment.html) Inner Alignment
  38. 38. Viac prvkov v 1 stĺpci <table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td>
 <!-- OBSAH -->
 </td>
 </tr>
 <tr>
 <td>
 <!-- OBSAH -->
 </td>
 </tr>
 </table>
  39. 39. Odsadenie prvkov stĺpca <table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td>
 <!-- OBSAH -->
 </td>
 </tr>
 <tr>
 <td style="padding: 14px 0 0 0;">
 <!-- OBSAH -->
 </td>
 </tr>
 </table>
  40. 40. Zarovnanie prvkov v stĺpci • POZOR - v Outlook, <table> nezdedí text-align od nadradeného prvku <table> <table style="text-align: center;">
 <tr>
 <td>
 <table> style="text-align: left;"
  41. 41. Zarovnanie prvkov v stĺpci • text-align dávame do najhlbšie vnoreného tagu <table> <table>
 <tr>
 <td>
 <table style="text-align: center;" >
  42. 42. https://github.com/peterorosz/vivmail2016 (06-backgrounds.html, 06-backgrounds-separator.html) Backgrounds
  43. 43. Podfarbenie modulu <tr>
 <td style="text-align: center; font-size: 0; background-color: #EEEEEE;">
 
 <!-- Insert columns here -->
 
 </td>
 </tr> • oštýlujeme <td> riadku
  44. 44. "Separator" <tr>
 <td>
 <table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td style="font-size: 0; line-height: 0; padding: 10px 0 0 0;">
 &nbsp;
 </td>
 </tr>
 </table>
 </td>
 </tr>
  45. 45. Obrázok na pozadí • https://backgrounds.cm
  46. 46. https://github.com/peterorosz/vivmail2016 (07-fonts.html) Fonts
  47. 47. font-family, -size, line-height <tr>
 <td style="padding: 14px 0 0 0; font-family: Arial, Helvetica, sans-serif; font-size: 40px; line-height: 48px;"> <b>Toto je nadpis. Vykričte sa!</b> </td>
 </tr> • Kvôli Outlook, Seznam, Centrum, Gmail pridať do každého najvnorenejšieho <td>
  48. 48. Op.pl "hack" <div style="width: 100%; max-width: 300px; display: inline-block; vertical-align: top; font-family: Arial, Helvetica, sans-serif;"> • font-family do každého <div> v šablóne • (inak override font Verdana)
  49. 49. <img> "alt" color, font-size <img src="#" width="580" height="200" alt="Alt." style="width: 100%; max-width: 580px;
 color: #000000; font-size: 20px;" />
  50. 50. https://github.com/peterorosz/vivmail2016 (08-fonts.html) Buttons
  51. 51. Špeciálny nástroj • https://buttons.cm • VML height, CSS line-height - výška tlačidla • VML width, CSS width - šírka tlačidla • VML fillcolor, CSS background-color • prepísať font-family, font-size
  52. 52. https://github.com/peterorosz/vivmail2016 (09-images.html) Images
  53. 53. Anatómia obrázku <img src="http://placehold.it/580x200?text=Banner" width="580" height="200" alt="Alt." style="width: 100%; max-width: 580px; height: auto; max-height: 200px; color: #000000; font-size: 20px;" /> • pre Outlook (nepozná max-width, max-height)
  54. 54. Anatómia obrázku <img src="http://placehold.it/580x200?text=Banner" width="580" height="200" alt="Alt." style="width: 100%; max-width: 580px; height: auto; max-height: 200px; color: #000000; font-size: 20px;" /> • pre mobilné zariadenia
  55. 55. Anatómia obrázku <img src="http://placehold.it/580x200?text=Banner" width="580" height="200" alt="Alt." style="width: 100%; max-width: 580px; height: auto; max-height: 200px; color: #000000; font-size: 20px;" /> • pre desktop klientov
  56. 56. Anatómia obrázku <img src="http://placehold.it/580x200?text=Banner" width="580" height="200" alt="Alt." style="width: 100%; max-width: 580px; height: auto; max-height: 200px; color: #000000; font-size: 20px;" />
  57. 57. Inline obrázky <tr>
 <td style="font-size: 14px;"> <img src="#" width="65" height="65" style="width: 100%; max-width: 65px; height: auto; max-height: 65px;" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="#" width="65" height="65" style="width: 100%; max-width: 65px; height: auto; max-height: 65px;"/> </td>
 </tr>
  58. 58. https://github.com/peterorosz/vivmail2016 (10-progressive-enhancement.html) Progressive enhancement
  59. 59. Media queries max-width: 400pxmax-width: 620px min-width: 401px max-width: 620px @media screen and...
  60. 60. Hádanka #1 @media screen and (max-width: 620px) {
 .vpravo { text-align: right; }
 .nastred { text-align: center; }
 }
 
 <div class="vpravo nastred">
 Můj text...
 </div>
  61. 61. Hádanka #2 @media screen and (max-width: 400px) {
 .nastred { text-align: center; }
 }
 
 @media screen and (min-width: 401px) and 
 (max-width: 620px) {
 td.nastred { text-align: center; }
 }
 
 <div class="nastred">
 Můj text...
 </div> ??? ???
  62. 62. Poradie media queries @media screen and (max-width: 620px) {} • mobil + phablet @media screen and (max-width: 400px) { • mobil @media screen and (min-width: 401px) and (max- width: 620px) {} • phablet
  63. 63. Plná šírka
  64. 64. Plná šírka @media screen and (max-width: 620px) {
 .responsive {
 width: 100% !important;
 max-width: 100% !important;
 height: auto !important;
 max-height: none !important;
 }
 } <div style="width: 100%; max-width: 300px; display: inline-block; vertical-align: top;" class="responsive"> <img src="#" width="280" height="200" alt="Alt." style="width: 100%; max-width: 280px; height: auto; max-height: 200px; color: #000000; font-size: 16px;" class="responsive" />
  65. 65. Phablety - 2 stĺpce @media screen and (min-width: 401px) and (max-width: 620px) {
 div.responsive {
 width: 50% !important;
 max-width: 50% !important;
 height: auto !important;
 max-height: none !important;
 }
 }
  66. 66. Phablety - 2 stĺpce
  67. 67. the end :) Peter Orosz LinkedIn | peter@feedo.cz

×