Stilizare continut email in HTML cu directive CSS

By

Traian

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

  1. Uitandu-ma pe netul din Romania uite ca am aflat pe pagina dvs..
    Nu ma pot abtine sa nu zic ca sunt placut surprins de calitatea articolelor de
    pe acest sait si va doresc cat mai mult succes!

  2. Multumesc pentru aprecieri, dar nu sunt meritate, cel putin pentru aceste postari.

    Adevarul este ca desi in activitatea zilnica apar provocari si identificam solutii tehnice care par extraordinare, nu prea am gasit timpul dorit pentru redactarea de articole cu tot acest material de zi cu zi.

    Dar, sincer sa fiu ma gandesc sa imi fac loc si pentru aceasta activitate, mai ales ca blogul poate fi consultat ulterior ca index de probleme si solutii tehnice deja aplicate. Chiar si numai consultat doar de mine si eventual de colegii programatori care lucram sub “umbrela” Sector Web.

  3. Apropo, am vizitat http://oraexacta.eu/, site-ul dvs presupun si va apreciez ideea.

    Iar referitor la subiectul email html formatat cu directive CSS inline, adaug ca recent am folosit si imagine background multiplicata pe suprafata intregului newsletter: se foloseste atributul background al tag-ului table.

    Dar functioneaza si css inline pe tag-ul td al tabelului wrapper: background-image: url(….); background-position: top center; background-repeat: repeat-x repeat-y;

    Din toate testele efectuate – am folosit mailchimp.com pentru companii email de test pe Yahoo, Gmail in 3 browsere: Internet Explorer 8, Chrome si FireFox (cele doua la ultimele versiuni) – rezultatele sunt corecte.

    Mailchimp recomanda atributul background al tag-ului table

Leave a Reply

Adresa ta de email nu va fi publicată.