Download - 13 pravidiel pre dizajn newslettra
![Page 1: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/1.jpg)
13 pravidielpre dizajn
newslettera
[Obsah] [Doručenie] [Dizajn]
![Page 2: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/2.jpg)
MINIMALIZMUS
Čo najjednoduchšie, čo najjasnejšie
![Page 3: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/3.jpg)
#1 Jednoduchý layout
• Čím menej stĺpcov, tým lepšie
• Krása jedno-stĺpcového dizajnu
• Blogoidné, nie portáloidné
![Page 4: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/4.jpg)
![Page 5: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/5.jpg)
![Page 6: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/6.jpg)
#2 Šírka najviac 600 px
• Vhodné aj pre menšie rozlíšenia a vertikálne rozvrhnutie e-mailových klientov
• Dobrá dĺžka riadku (čitateľnosť)
• Centrovanie, nie zarovananie
• Tabuľka (600px) v tabuľke (100%)
![Page 7: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/7.jpg)
<table width="100%">
<tr>
<td>
<table width="600" align="center">
<tr>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
</table>
</td>
</tr>
</table>
![Page 8: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/8.jpg)
#3 Jednoduché pozadia
• Textúry a obrázky znižujú čitateľnosť
• Čím menej rušivých prvkov
• Ak, tak nenápadné a s mierou
![Page 9: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/9.jpg)
![Page 10: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/10.jpg)
![Page 11: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/11.jpg)
![Page 12: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/12.jpg)
#4 Podobnosť s webom
• Naznačenie vizuálnej súvislosti
• Nemusí byť 100 % (farby, logo, štýl)
• Zdieľaný kredit značky
![Page 13: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/13.jpg)
![Page 14: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/14.jpg)
HTML 3.2 RULEZ!
Zabudnite na to, čo viete o modernom webe
![Page 15: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/15.jpg)
#5 Tabuľkový layout
<div id="header"><h4>Header 1</h4>
</div><div id="content">
Lorem ipsum dolor...</div><div id="footer">
footer</div>
<table><tr>
<td><h4>Header 1</h4></td></tr><tr>
<td>Lorem ipsum dolor</td></tr><tr>
<td>footer</td></tr></table>
![Page 16: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/16.jpg)
#6 Žiadny JavaScript
• Žiadne trackovacie kódy
• Žiadne efekty, pop-up okná(!) atď.
• Riziko, že skončíte v SPAMe
![Page 17: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/17.jpg)
#7 Minimum CSS
• Čím menej CSS, tým lepšie
• Stop linkovaniu externých CSS
• Zredukujte CSS v hlavičke
• V kurze sú inline štýly
• Absencia border
• Čo sa dá, formátovať cez HTML
![Page 18: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/18.jpg)
...<p class="normalny-text">Lorem ipsum dolor</p>...
...<p style="font-size:12px;">Lorem ipsum dolor</p>...
...<p><font size="2">Lorem ipsum dolor</font></p>...
![Page 19: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/19.jpg)
NEPRIESTREĽNÉOBRÁZKY
Treba vedieť, ako na nich
![Page 20: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/20.jpg)
#8 Absolútne cesty
• Treba presne určiť, kde sa obrázok nachádza
• Obrázky nie sú súčasťou e-mailu
• Nenachádzajú ani na PC koncového užívateľa
![Page 21: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/21.jpg)
<img src="images/header.jpg" alt= "faktura" width="" height="" border="0">
![Page 22: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/22.jpg)
<img src="http://m.websupport.sk/static/images/header.jpg" alt= "faktura" width="" height="" border="0">
![Page 23: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/23.jpg)
#9 Alternatívne popisky
• Pre prípad problémov s obrázkom (nedostupnosť, vypnuté...)
• Stručná charakteristika obrázku
![Page 24: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/24.jpg)
<img src="images/header.jpg" alt="" width="600" height="221" border="0">
![Page 25: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/25.jpg)
<img src="images/header.jpg" alt= "hlavička newslettra"width="600" height="221" border="0">
![Page 26: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/26.jpg)
#10 Len žiadne rozmery
• Nedefinovať ani výšku a šírku
• Vynucujú prázdneho miesta
• Zdržiavajú – nútia skrolovať bez pridanej hodnoty (keďže chýba obrázok)
![Page 27: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/27.jpg)
<img src="images/header.jpg" alt= "hlavička newslettra" width="600" height="221" border="0">
![Page 28: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/28.jpg)
<img src="images/header.jpg" alt= "hlavička newslettra" width="" height="" border="0">
![Page 29: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/29.jpg)
PRE KAŽDÝ PRÍPAD
Nie každý vidí e-mail tak, ako vy
![Page 30: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/30.jpg)
#11 Obrázok v prázdnom priestore
• Niektoré prehliadače majú problém vykresliť prázdnu bunku v tabuľke
<td width="300">Lorem ipsum dolor sit amet</td><td width="10"></td><td width="300">Lorem ipsum dolor sit amet</td>
<td width="300">Lorem ipsum dolor sit amet</td><td width="10"><img src="images/spacer.gif" width="10" height="1" /></td><td width="300">Lorem ipsum dolor sit amet</td>
![Page 31: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/31.jpg)
#12 ASCII entity
• V rôznych prostrediach sa ťažko garantuje zobrazovanie špeciálnych znakov
<p>© Štúdio 94, s.r.o.<p>
<p>© Štúdio 94, s.r.o.<p>
![Page 32: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/32.jpg)
#13 Online verzia
• Čítanie v prehliadači pohodlnejšie
• Zdieľanie v sociálnych médiách
• Neskoršie prehliadanie newslettrapri návšteve webu
• Archív
![Page 33: 13 pravidiel pre dizajn newslettra](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55959d891a28ab71748b47fd/html5/thumbnails/33.jpg)