Download pdf - Peter Orosz - Šablona od A do Z

Šablóna: od A po ZPeter Orosz

LinkedIn | [email protected]

https://www.linkedin.com/in/peorosz

mailto:[email protected]

Otázky:

1. Chcem to robiť?

2. Chcem to robiť dobre?

„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



Modularita

Modularita

Hybridný prístup

Fluid Responsive Hybrid

Task branching


branch branch branch

Náš projekt

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

http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

https://github.com/peterorosz/vivmail2016 (01-scaffolding.html)

Scaffolding "Lešenie"

https://github.com/peterorosz/vivmail2016

Dôležité prvky

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• zúži šírku newslettru pre mobilné zariadenie

Dôležité prvky

CSS Resety (<!— RESETS —>…)

• normalizujú správanie sa prvkov v Outlook, Android Mail

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

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

Dôležité prvky

• stanovuje šírku šablóny na pre Outlook na desktope

• normalizuje správanie sa prvkov v Outlook

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

Dôležité prvky

<!— Pre-header ->…

• Zneviditeľní prvú vetu v šablóne, čím vznikne „extra Subject Line“

https://github.com/peterorosz/vivmail2016 (02-rows.html)

Rows


Modularita

Štruktúra

<tr> <td style="text-align: center; font-size: 0;">  </td> </tr>

• font-size „hack“ zabráni vznikaniu medzier medzi obrázkami v niektorých klientoch

text-align: …

left center right

display: inline-block

https://github.com/peterorosz/vivmail2016 (03-columns.html)

Columns


Kostra 1 stĺpca (Outlook)



Kostra viacerých stĺpcov



„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>

valign / vertical-align: …

top

bottom

middle


top

bottommiddle

top

middle middle

bottombottom

bottom


topmiddle

bottom

„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>


https://github.com/peterorosz/vivmail2016 (04-outer-alignment.html)

Outer Alignment


Odsadenie (padding)

Odsadenie (padding)

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;">


https://github.com/peterorosz/vivmail2016 (05-outer-alignment.html)

Inner Alignment


Viac prvkov v 1 stĺpci<table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td>  </td> </tr> <tr> <td>  </td> </tr> </table>

Odsadenie prvkov stĺpca<table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td>  </td> </tr> <tr> <td style="padding: 14px 0 0 0;">  </td> </tr> </table>

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;"

Zarovnanie prvkov v stĺpci

• text-align dávame do najhlbšie vnoreného tagu <table>

<table> <tr> <td> <table style="text-align: center;" >

https://github.com/peterorosz/vivmail2016 (06-backgrounds.html,

06-backgrounds-separator.html)

Backgrounds


Podfarbenie modulu

<tr> <td style="text-align: center; font-size: 0; background-color: #EEEEEE;">  </td> </tr>

• oštýlujeme <td> riadku

"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;"> </td> </tr> </table> </td> </tr>

Obrázok na pozadí

• https://backgrounds.cm

https://backgrounds.cm

https://github.com/peterorosz/vivmail2016 (07-fonts.html)

Fonts


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>

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)

<img> "alt" color, font-size

<img src="#" width="580" height="200" alt="Alt." style="width: 100%; max-width: 580px; color: #000000; font-size: 20px;" />

https://github.com/peterorosz/vivmail2016 (08-fonts.html)

Buttons


Š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

https://buttons.cm

https://github.com/peterorosz/vivmail2016 (09-images.html)

Images


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)

Anatómia obrázku


• pre mobilné zariadenia

Anatómia obrázku


• pre desktop klientov

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;" />

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;" /> <img src="#" width="65" height="65" style="width: 100%; max-width: 65px; height: auto; max-height: 65px;"/>

</td> </tr>

https://github.com/peterorosz/vivmail2016 (10-progressive-enhancement.html)

Progressive enhancement


Media queries

max-width: 400pxmax-width: 620px min-width: 401px

max-width: 620px

@media screen and...

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>

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>

??? ???

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

Plná šírka

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" />

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; } }

Phablety - 2 stĺpce

the end :)Peter Orosz

LinkedIn | [email protected]

https://www.linkedin.com/in/peorosz

mailto:[email protected]