Acasă » Blog » Stilizare continut email in HTML cu directive CSS

Stilizare continut email in HTML cu directive CSS

Share this post on social!
newsletter

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 comentarii la „Stilizare continut email in HTML cu directive CSS”

  1. 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.

  2. 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

Lasă un răspuns

Traian Constantin Predan

Traian Constantin Predan

Inginer absolvent al Politehnicii București proiectează și construiește sisteme online. Lucrează proiecte extrem de diverse, îi plac viziunile noi care provoacă la dezvoltarea unor soluții tehnice eficiente și stabile.