13 pravidiel pre dizajn newslettra

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>&copy; &Scaron;t&uacute;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

Keby niečo…

Peter Murár

TW: @MUROsk

WB: www.muro.sk

EM: muro@muro.sk