13 pravidiel pre dizajn newslettra
TRANSCRIPT
13 pravidielpre dizajn
newslettera
[Obsah] [Doručenie] [Dizajn]
MINIMALIZMUS
Čo najjednoduchšie, čo najjasnejšie
#1 Jednoduchý layout
• Čím menej stĺpcov, tým lepšie
• Krása jedno-stĺpcového dizajnu
• Blogoidné, nie portáloidné
#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%)
<table width="100%">
<tr>
<td>
<table width="600" align="center">
<tr>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
</table>
</td>
</tr>
</table>
#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
#4 Podobnosť s webom
• Naznačenie vizuálnej súvislosti
• Nemusí byť 100 % (farby, logo, štýl)
• Zdieľaný kredit značky
HTML 3.2 RULEZ!
Zabudnite na to, čo viete o modernom webe
#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>
#6 Žiadny JavaScript
• Žiadne trackovacie kódy
• Žiadne efekty, pop-up okná(!) atď.
• Riziko, že skončíte v SPAMe
#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
...<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>...
NEPRIESTREĽNÉOBRÁZKY
Treba vedieť, ako na nich
#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
<img src="images/header.jpg" alt= "faktura" width="" height="" border="0">
<img src="http://m.websupport.sk/static/images/header.jpg" alt= "faktura" width="" height="" border="0">
#9 Alternatívne popisky
• Pre prípad problémov s obrázkom (nedostupnosť, vypnuté...)
• Stručná charakteristika obrázku
<img src="images/header.jpg" alt="" width="600" height="221" border="0">
<img src="images/header.jpg" alt= "hlavička newslettra"width="600" height="221" border="0">
#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)
<img src="images/header.jpg" alt= "hlavička newslettra" width="600" height="221" border="0">
<img src="images/header.jpg" alt= "hlavička newslettra" width="" height="" border="0">
PRE KAŽDÝ PRÍPAD
Nie každý vidí e-mail tak, ako vy
#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>
#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>
#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