Stilizare continut email in HTML cu directive CSS

By

Traian

3 comments

CSS, HTML

Salut,

Este luni, 12 mai 2014, putem incepe saptamana cu un articol practic (voi prezenta tot ceea ce folosesc de aprox. 2 ani pentru trimiterea de newslettere in masa. Si nu am avut probleme de afisare defectuoasa a continutului in diferiti clienti de email!!!)

Sunt cateva lucruri obligatorii:

  • formatati codul html cu tabele (nu cu div-uri)
  • folositi css inline
  • folositi cateva directive css pentru fiecare din tag-urile: <tr>,<td>, <a> si <img>
  • trimiteti pentru test mesajul de email cu mailchimp.com; testati pentru adrese de destinatie: yahoo.com, gmail.com si deschideti si cu Outlook
  • pentru situatii in care aveti probleme, cautati pe Google; am gasit cateva sfaturi pe stackoverflow.com*: Best practices for styling html emails sau The ultimate guide to CSS
  • furnizati url-ul complet pentru imagini

stackoverflow.com este un site excelent, aflu intotdeauna idei verificate pentru rezolvarea problemelor carora le caut solutii. (Anul acesta la How To Web Bucuresti am avut bucuria sa audiez expunerea unui programator de la Stockeverflow despre tehnlogia si proiectarea care face posibila incarcarea rapida a unui site atat de complex, cu atat de multi vizitatori)

Asadar combinatia de html si css folosita de mine uzual este:


<table style="margin: 0px; padding: 0px; border-spacing: 0px; width: 100%;" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr style="padding: 10px; margin: 0;">
<td style="margin: 0; padding: 0; vertical-align: top; text-align: center; width: 100%;" align="center" valign="top">
<table id="Table_01" style="padding: 0;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr style="margin: 0; padding: 0;">
<td style="margin: 0; padding: 0;" colspan="3"><a href="http://www.domeniul 1.ro/povestire-dupa-romanul-lui-martin.html" target="_blank">
<img id="slice_01" style="margin: 0; padding: 0; display: block; line-height: 50%;" src="http://www.domeniul1.org/images/slice_01.jpg" alt="" width="729" height="588" border="0" /></a></td>
</tr>
<tr style="margin: 0; padding: 0;">
<td style="margin: 0; padding: 0;" colspan="2"><a href="http://www.domeniul1.ro/cartile-martin" target="_blank">
<img id="Newsletter_02" style="margin: 0; padding: 0; display: block; line-height: 50%;" src="http://www.domeniul1.org/images/Newsletter_02.jpg" alt="" width="364" height="153" border="0" /></a></td>
<td style="margin: 0; padding: 0;"><a href="http://www.curteaveche.ro/cartilemartin/" target="_blank">
<img id="Newsletter_03" style="margin: 0; padding: 0; display: block; line-height: 50%;" src="http://www.domeniul1.org/images/Newsletter_03.jpg" alt="" width="365" height="153" border="0" /></a></td>
</tr>
<tr style="margin: 0; padding: 0;">
<td style="margin: 0; padding: 0;"><a href="http://www.domeniul2.ro/" target="_blank">
<img id="Newsletter_04" style="margin: 0; padding: 0; display: block; line-height: 50%;" src="http://www.domeniul1.org/images/Newsletter_04.jpg" alt="" width="318" height="89" border="0" /></a></td>
<td style="margin: 0; padding: 0;" colspan="2"><img id="Newsletter_05" style="margin: 0; padding: 0; display: block; line-height: 50%;" src="http://www.domeniul1.org/images/Newsletter_05.jpg" alt="" width="411" height="89" border="0" /></td>
</tr>
<tr style="margin: 0; padding: 0;">
<td style="margin: 0; padding: 0;"><img style="margin: 0; padding: 0; display: block; line-height: 50%;" src="http://www.domeniul1.org/images/spacer.gif" alt="" width="318" height="1" border="0" /></td>
<td style="margin: 0; padding: 0;"><img style="margin: 0; padding: 0; display: block; line-height: 50%;" src="http://www.domeniul1.org/images/spacer.gif" alt="" width="46" height="1" border="0" /></td>
<td style="margin: 0; padding: 0;"><img style="margin: 0; padding: 0; display: block; line-height: 50%;" src="http://www.domeniul1.org/images/spacer.gif" alt="" width="365" height="1" border="0" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

 

3 Comments

    Leave a Reply

    Adresa ta de email nu va fi publicată.

    Acest sit folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.