Peter Orosz - Šablona od A do Z

  • View
    1.530

  • Download
    0

Embed Size (px)

Transcript

  1. 1. ablna: od A po Z Peter Orosz LinkedIn | peter@feedo.cz
  2. 2. Otzky: 1. Chcem to robi? 2. Chcem to robi dobre?
  3. 3. Systm prce stavba newslettru je hladk proces neignorujem chyby, ku ktorm sa vrtim svoju ablnu spoznm aj o rok, aj o polnoci
  4. 4. Systm prce
  5. 5. Systm prce
  6. 6. Modularita
  7. 7. Modularita
  8. 8. Hybridn prstup Fluid Responsive Hybrid
  9. 9. Task branching
  10. 10. Systm prce 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 "Leenie"
  14. 14. Dleit prvky zi rku newslettru pre mobiln zariadenie
  15. 15. Dleit prvky CSS Resety () normalizuj sprvanie sa prvkov v Outlook, Android Mail
  16. 16. Dleit prvky
    centruje prvky ablny stanovuje rku ablny pre mobiln zariadenia zabrauje klientom preformtova text
  17. 17. Dleit prvky
    extra centruje prvky ablny pre niektor klienty stanovuje rku ablny na pre desktop
  18. 18. Dleit prvky stanovuje rku ablny na pre Outlook na desktope normalizuje sprvanie sa prvkov v Outlook
  19. 19. Dleit prvky stanovuje rku ablny (pre mobil i desktop) normalizuje sprvanie sa prvkov v Outlook
  20. 20. Dleit prvky Zneviditen prv vetu v ablne, m vznikne extra Subject Line
  21. 21. https://github.com/peterorosz/vivmail2016 (02-rows.html) Rows
  22. 22. Modularita
  23. 23. truktra font-size hack zabrni vznikaniu medzier medzi obrzkami v niektorch 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 stpca (Outlook)
  27. 27. Kostra viacerch stpcov
  28. 28. Vpl stpcov: 1 stpec
  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. Vpl stpcov: 2 a viac
  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)
  37. 37. https://github.com/peterorosz/vivmail2016 (05-outer-alignment.html) Inner Alignment
  38. 38. Viac prvkov v 1 stpci
  39. 39. Odsadenie prvkov stpca
  40. 40. Zarovnanie prvkov v stpci POZOR - v Outlook, nezded text-align od nadradenho prvku style="text-align: left;"
  41. 41. Zarovnanie prvkov v stpci text-align dvame do najhlbie vnorenho tagu
  42. 42. https://github.com/peterorosz/vivmail2016 (06-backgrounds.html, 06-backgrounds-separator.html) Backgrounds
  43. 43. Podfarbenie modulu otlujeme riadku
  44. 44. "Separator"
  45. 45. Obrzok na pozad https://backgrounds.cm
  46. 46. https://github.com/peterorosz/vivmail2016 (07-fonts.html) Fonts
  47. 47. font-family, -size, line-height Toto je nadpis. Vykrite sa! Kvli Outlook, Seznam, Centrum, Gmail prida do kadho najvnorenejieho
  48. 48. Op.pl "hack"
    font-family do kadho
    v ablne (inak override font Verdana)
  49. 49. "alt" color, font-size
  50. 50. https://github.com/peterorosz/vivmail2016 (08-fonts.html) Buttons
  51. 51. pecilny nstroj https://buttons.cm VML height, CSS line-height - vka tlaidla VML width, CSS width - rka tlaidla VML llcolor, CSS background-color prepsa font-family, font-size
  52. 52. https://github.com/peterorosz/vivmail2016 (09-images.html) Images
  53. 53. Anatmia obrzku pre Outlook (nepozn max-width, max-height)
  54. 54. Anatmia obrzku pre mobiln zariadenia
  55. 55. Anatmia obrzku pre desktop klientov
  56. 56. Anatmia obrzku
  57. 57. Inline obrzky
  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. Hdanka #1 @media screen and (max-width: 620px) { .vpravo { text-align: right; } .nastred { text-align: center; } }
    Mj text...
  61. 61. Hdanka #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; } }
    Mj text...
    ??? ???
  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; } }
  65. 65. Phablety - 2 stpce @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 stpce
  67. 67. the end :) Peter Orosz LinkedIn | peter@feedo.cz