template mail html validato per tutti i client di posta

**lopinsjk** · 27-10-2009, 14:24

Salve,

ho creato questo semplicissimo template per le mail. L'originale (da me modificato) l'ho preso in un sito dove si possono trovare template validati (dicono loro). Il fatto è che se lo invio non viene visualizzato correttamente da Gmail e da Libero. Mentre per il secondo è normale per Gmail non capisco anche perché nel sito sostengono questo:

30 Free HTML email templates

Getting your email to look great in all the major email clients can be a challenge at times, so we’ve done the hard work for you with these 30 free email templates. We’ve tested them in all the major email clients, so add your own content.

* Outlook (2007)
* Apple Mail
* Windows Live Mail
* Hotmail
* Lotus Notes
* Outlook Express
* Yahoo! Mail
* AOL
* Thunderbird
* Gmail (older)
* Gmail (latest)

Questo è il codice del template:

codice:

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Country House Ristorante Marilena la Casella</title>
   <style type="text/css" media="screen">
      body {
         margin: 0;
         padding: 0;
         background-color: #460F14;
      }

      a img {
         border: none;
      }

      td.permission {
         padding: 20px 0 20px 0;
      }

      td.header h1 {
         font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
         font-size: 55px;
         font-weight: bold;
         color: #ffffff;
         margin: 0;
         padding: 0;
      }

      td.side table {
         margin: 0;
      }

      td.sidebar {
         background-color: #F47C20;
         padding: 0 17px 0 16px;
      }

      td.sidebar h3 {
         font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
         font-size: 16px;
         font-weight: bold;
         color: #ffffff;
         text-align: center;
         text-transform: uppercase;
         margin: 0 0 10px 0;
         padding: 0;
      }

      td.sidebar h3.left {
         font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
         font-size: 16px;
         font-weight: bold;
         color: #ffffff;
         text-align: left;
         text-transform: uppercase;
         margin: 0 0 10px 0;
         padding: 0;
      }

      td.sidebar h4 {
         font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
         font-size: 13px;
         font-weight: normal;
         color: #f8e54a;
         text-align: left;
         margin: 0 0 4px 0;
         padding: 0;
      }

      td.sidebar h4 a {
         font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
         font-size: 13px;
         font-weight: normal;
         color: #f8e54a;
         text-align: left;
      }

      td.sidebar ul {
         font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #ffffff;
         margin: 0 0 10px 0;
         padding: 0;
         list-style-type: none;
      }

      td.sidebar ul li {
         padding: 0 0 10px 0;
      }

      td.sidebar ul li a {
         font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #ffffff;
         text-decoration: none;
      }

      td.sidebar p {
         font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #ffffff;
         margin: 0 0 16px 0;
         padding: 0;
      }

      td.sidebar img.button {
         display: block;
         text-align: center;
         padding: 0 0 4px 0;
      }      

      td.title {
         background-color: #F47C20;
         padding: 2px 10px 4px 10px
      }

      td.title h2 {
         font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
         font-weight: bold;
         font-size: 18px;
         color: #B92436;
         margin: 0;
         padding: 0;
         text-align:left
      }
      
      a {
      	color: #B92436;
      	font-weight: bold
      }
      
      a:hover {
      	color: #fff;
      	font-weight: bold
      }
      
      ul {
         font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #f2f2f2;
         padding: 0 0 10px 0
      }
      
      td.body {
         background-color: #871918
      }

      td.body p {
         font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
         font-size: 14px;
         font-weight: normal;
         color: #f2f2f2;
         margin: 0;
         padding: 0 0 10px 0;
      }
      
      td.body h3 {
         font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
         
         font-weight: normal;
         color: #f2f2f2
      }

      td.body p a {
         font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
         font-size: 14px;
         font-weight: normal;
         color: #f8e54a;
      }

      td.body p.continua {
         margin: 0;
         padding: 0;
      }

      td.body p.continua a {
         font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
         font-size: 11px;
         font-weight: normal;
         color: #f3d444;
      }

      td.body img {
         padding: 0 0 10px 0;
      }

      td.body img.inline {
         padding: 0 20px 0 0;
      }

      td.bottom {
         height: 2px;
         background-color: #741615;
      }

      td.footer {
         font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
         text-align:center;
         font-size: 11px;
         font-weight: normal;
         color: #cccccc;
         padding: 5px 0 0 0;
      }
      
      td.footer a {
      	color: #F47C20;
      	font-weight: bold	
      }
      
      td.footer a:hover {
      	color: #fff;
      	font-weight: bold	
      }
   </style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="25%" class="spacer"></td>
      <td align="left">         
         <table width="560" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td width="560" valign="continua">                  
                  <table width="560" border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td height="87" class="header"></td>
                     </tr>
                     <tr>
                        <td class="body">                           
                           <table width="560" border="0" cellspacing="10" cellpadding="0">
                              <tr>
                                 <td class="body">
                                    

ciao</p>
                                 </td>
                              </tr>
                           </table>                           
                        </td>
                     </tr>
                     
                     <tr>
                        <td class="title"><h2>Ponte Ognissanti 2009</h2></td>
                     </tr>
                     <tr>
                        <td class="body">                           
                           <table width="560" border="0" cellspacing="10" cellpadding="0">
                              <tr>
                                 <td class="body">
                                    

<h3>Offerta &quot;Pi&ugrave; pernotti meno spendi&quot;</h3></p>
                                    <p class="continua">Continua a leggere &raquo;</p>
                                 </td>
                              </tr>
                           </table>                           
                        </td>
                     </tr>
                     <tr>
                        <td height="4" class="bottom"></td>
                     </tr>
                     
                     <tr>
                        <td class="title"><h2>Festa dell'immacolata 2009</h2></td>
                     </tr>
                     <tr>
                        <td class="body">                           
                           <table width="560" border="0" cellspacing="10" cellpadding="0">
                              <tr>
                                 <td class="body">
                                    

<h3>Offerta &quot;Pi&ugrave; pernotti meno spendi&quot;</h3></p>
                                    <p class="continua">Continua a leggere &raquo;</p>
                                 </td>
                              </tr>
                           </table>                           
                        </td>
                     </tr>
                     <tr>
                        <td height="4" class="bottom"></td>
                     </tr>
                     <tr>
                        <td class="title"><h2>Natale 2009</h2></td>
                     </tr>
                     <tr>
                        <td class="body">                           
                           <table width="560" border="0" cellspacing="10" cellpadding="0">
                              <tr>
                                 <td class="body">
                                    

<h3>Offerta &quot;Pi&ugrave; pernotti meno spendi&quot;</h3></p>
                                    <p class="continua">Continua a leggere &raquo;</p>
                                 </td>
                              </tr>
                           </table>                           
                        </td>
                     </tr>
                     <tr>
                        <td height="4" class="bottom"></td>
                     </tr>
                  </table>                  
               </td>               
            </tr>
            <tr>
               <td valign="continua" class="footer" colspan="3">
                  loc. la Casella di San Martino :: Lisciano Niccone (PG) :: CAP 06060 :: Umbria :: Italy

                  Telefono +39 339 45 132 45 :: Fax +39 075 844 246

                  Web www.marilenalacasella.com :: E-Mail info@marilenalacasella.com

                  Blog marilenalacasella.wordpress.com :: Twitter MarilenaCasella

                  Facebook Country House Ristorante 	Marilena la Casella

                  Google Maps Country House Ristorante Marilena la Casella

               </td>
            </tr>
         </table>         
      </td>
   </tr>
</table>
<div id="quoteDIV" style="color:#fff; font-size:130%"></div>
</body>
</html>

**fcaldera** · 27-10-2009, 14:27

alcuni client di posta eliminano lo stile.
Ergo vedrai facilmente una pagina non formattata come ti aspetti

**lopinsjk** · 27-10-2009, 15:59

infatti è così. Come faccio a risolvere? Non usando i css? Quello che non mi spiego è come fanno a dire che quei template sono validati per gmail. Lo dicono qua:

33 template gratuiti

Saluti

**fcaldera** · 27-10-2009, 16:05

hai presente i vecchi tag html <font face... size... color...> oppure <center> o <table>
e gli attributi di presentazione (width, height, hspace, vspace...)?
devi usare anche quelli

**lopinsjk** · 27-10-2009, 16:07

e mi assicuri che tutto funzionerà?

**ricman** · 27-10-2009, 16:13

Originariamente inviato da lopinsjk
Quello che non mi spiego è come fanno a dire che quei template sono validati per gmail. Lo dicono qua:

Semplice... perchè la posta arriva, è colorata e più o meno un po' di formattazione la tiene

**lopinsjk** · 27-10-2009, 16:15

infatti un po la tiene e questo perché ho usato tabelle. Ma non si vedono colori e hover dei link.. e il padding non esiste =(

che tristezza

**fcaldera** · 27-10-2009, 16:40

Originariamente inviato da lopinsjk
e mi assicuri che tutto funzionerà?

assolutamente no.

Dipende da cosa intendi tu per "tutto"

Di certo non credere di avere un equivalente preciso delle proprietà css con i soli tag ed attributi di presentazione.

Per esempio font-size: 13px diventerà circa <font size="3">...</font> con buona pace della precisione; lo stesso vale per i margini e i padding che dovrai realizzare presumibilmente con tabelle annidate.

**ricman** · 27-10-2009, 18:02

E' l'unico caso in cui potresti usare FronPage

**lopinsjk** · 28-10-2009, 01:21

Originariamente inviato da ricman
E' l'unico caso in cui potresti usare FronPage

Hai capito bene.. dream weaver a go go! Che tristezza. Cmq ho risolto in parte. Ho realizzato un ibrido tra css e table. Se sono fortunato quelli che hanno libero e gmail e utilizzano un client come Thund. o Outlook la leggono benissimo perché si attivano i css altrimenti vedono la stessa mail come versione tabellare simile nella struttura ma molto più scarna di quella css...

ciao a tutti

Discussione: template mail html validato per tutti i client di posta

Strumenti discussione

Ricerca discussione

Visualizza

template mail html validato per tutti i client di posta

Permessi di invio