invito ad evento in html da inviare con la mail

**liviasettantuno** · 25-01-2011, 17:15

Buondì a tutti,
ho ricevuto da un cliente la richiesta di realizzargli un invito in formato html ad un evento che stanno preparando e che poi loro invieranno ai loro clienti tramite posta elettronica.

Sono ancora alle prime armi con l'html e quindi avrei bisogno del vostro supporto per capire bene:
ho letto appena adesso un articolo tratto dal sito HTML.it dal titolo "e-mail in html perfette "

http://webdesign.html.it/articoli/leggi/3378/e-mail-in-html-perfette/

da cui si evince:
-devo realizzare il file in html con le tabelle e riprendere in mano un po' di preistoria...
-devo testarlo il più possibile su più client di posta (mi sapete suggerire quali?).

Da quel che ho capito io realizzo il mio file in DW con il css incorporato (mi pare che si faccia con Premailer, mi confermate?) e invio questo al cliente... giusto? o devo dargli altro?

Avete in generale consigli o suggerimenti da darmi?

Grazie anticipatamente a chi mi supporterà (e sopporterà!!!)
Livia

**Federix** · 25-01-2011, 18:03

Con i livelli si ottengono gli stessi risultati delle tabelle, però si hanno alcuni piccoli problemi di compatibilità con le webmail.
La miglior cosa da fare è realizzare un'immagine unica contente tutta la newsletter, frammentarla in 4 immagini diverse e intabellarle dentro le celle, usando per i collegamenti le mappe immagine.

Al cliente devi inviare il file HTML e le immagini che devono essere linkate in maniera assoluta (http://www........immagine.jpg) e non relativa (/immagini/immagine.jpg).
Inoltre è sconsigliabile metter gli stili CSS in un file esterno perché le nuove webmail bloccano i file esterni delle mail, quindi anche i file css oltre che le immagini. Sempre meglio dichiarare gli stili dentro <head> o anche inline.

**liviasettantuno** · 25-01-2011, 18:39

Grazie della risposta Federix.
...Mappe immagini? come le faccio da photoshop cs5? ho letto cosa sono ma non capisco come farle...

Livia

**Federix** · 25-01-2011, 19:00

Mi cogli in fallo

In Photoshop non saprei come fare, io l'HTML lo scrivo sempre a mano

**liviasettantuno** · 26-01-2011, 10:32

Si scusami, avevo inteso male io...

**liviasettantuno** · 27-01-2011, 17:55

In merito a questo invito, l'avrei impostato così. E' assolutamente la prima volta che la faccio e lavorando con i css non ho perniente dimestichezza con le tabelle...Qualcuno potrebbe dirmi i problemi che presenta...?

Ne approfitto per fare una domanda: ma se io la progetto solamente, le immagini e i link li ho su locale. Al cliente le immagini come gliele passo? (ossia non posso fare
<img src:"http://www. ..."> perché l'invito l'ho sul mio computer)

Grazie anticipatamente
Livia

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Invito ad evento</title>
</head>

<body bgcolor="#f9f9ef" style="margin: 0px; background-color: #f9f9ef; width: 900px; text-align: center; font-family: Verdana, Geneva, sans-serif;">
<table class="fondo" cellspacing="0" border="0" bgcolor="#f9f9ef" style="margin: 0px; background-color: #f9f9ef; width: 900px; text-align: center; font-family: Verdana, Geneva, sans-serif;" cellpadding="0">
<tr>
<td width="900" height="1200" valign="top">
	<table cellpadding="0" cellspacing="0" border="0" align="center">
	<tr>
		<td width="601">[img]testata.jpg[/img]</td>
	</tr>
	<tr>
	<td align="center" height="50" bgcolor="#FFF" style="width: 601px; background-color: #FFF; text-align: center; font-weight: bold; color: #C00; font-size: 14px; font-family:Verdana, Geneva, sans-serif;" width="601">QUANTE VOLTE I PROFESSIONISTI DEL CONTROLLING E DELL'IT… 
    </td>
	</tr>
	<tr>
	<td>
		<table cellpadding="0" cellspacing="0" border="0" align="center">
		<td width="151">[img]mondo.jpg[/img]</td>
		<td align="center" bgcolor="#FFF" style="background-color: #FFF; font-size: 14px; line-height: 22px; text-align: center; color: #666; font-family:Verdana, Geneva, sans-serif;" width="450">… non riescono a supportare la propria Azienda 
    	con informazioni tempestive?

 		… sono chiamati solo a fornire dati o processi?

		 … vengono esclusi dai processi decisionali? </td>
 		</table>
	</td>
	</tr>
	<tr>
	<td align="center" height="50" bgcolor="#FFF" style="background-color: #FFF; font-size: 14px; line-height: 22px; text-align: center; color: #000; font-weight: bold; font-family:Verdana, Geneva, sans-serif;" width="601"> e quindi il margine di contribuzione non viene gestito come si vorrebbe?
    </td>
    </tr>
    <tr>
	<td align="center" height="30" bgcolor="#FFF" style="width: 601px; background-color: #FFF; text-align: center; font-weight: bold; color: #C00; font-size: 14px; font-family:Verdana, Geneva, sans-serif;" width="601"> PERCHÈ?
    </td>
    </tr>
     <tr>
	<td width="601" height="30">[img]link1.jpg[/img]
    </td>
    </tr>
    <tr>
	<td align="center" height="90" bgcolor="#FFF" style="background-color: #FFF; font-size: 14px; line-height: 22px; text-align: center; color: #000; font-family:Verdana, Geneva, sans-serif;" width="601">I processi di comprensione dei dati passati e i cicli di simulazione impongono 

	  ritmi di lavoro estenuanti per la sola produzione di report, 

	  spesso poco utili alla guida dell'Azienda.</td>
    </tr>
    <tr>
	<td>
		<table cellpadding="0" cellspacing="0" border="0" align="center">
		  <td align="center" bgcolor="#FFF" style="background-color: #FFF; font-size: 14px; line-height: 22px; text-align: center; color: #666; font-family:Verdana, Geneva, sans-serif;" width="450">Prendiamoci un break per ragionare insieme, 

		    con la partecipazione di IBM, sulle soluzioni che permettono 

		    di governare il processo di controllo del Core Business. </td>
         <td width="151">[img]omino.jpg[/img]</td>
 		</table>
	</td>
	</tr>
    <tr>
	<td width="601" >[img]baseagenda.jpg[/img]
    <table cellpadding="10" cellspacing="0" border="0" align="center">
		      <tr><td align="justify" bgcolor="#f8f4e3" style="background-color: #f8f4e3; font-size: 14px; line-height: 22px; text-align: justify; color: #000; font-family:Verdana, Geneva, sans-serif;" width="580">BRAIN FORCE, principale partner IBM Cognos in Italia, da anni supporta i propri clienti sia con competenze finance che informatiche, anche con soluzioni plug&amp;play, nella costruzione di sistemi di controllo della marginalità grazie ai quali sarete in grado di:
                <ul>[*]comprendere le informazioni generate dai dati[*]simulare gli scenari del futuro e proporre azioni correttive[*]
razionalizzare gli investimenti informatici, riducendo il TCO[/list]
                   </td></tr>
                   <tr>
                   <td align="center" bgcolor="#f8f4e3" style="color: #C00; font-size: 21px; text-align: center; font-weight: bold; background-color: #f8f4e3; font-family:Verdana, Geneva, sans-serif;" width="590">AGENDA - 15 OTTOBRE</td></tr>
                   <tr bgcolor="#f8f4e3">
                   <td>
                   <table cellpadding="0" cellspacing="0" border="0" >
		  <tr>
          	<td align="left" height="30" bgcolor="#f8f4e3" style="background-color: #f8f4e3; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold; font-family:Verdana, Geneva, sans-serif;" width="75">10.00 </td>
         	<td align="left" height="30" bgcolor="#f8f4e3" style="background-color: #f8f4e3; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold; font-family:Verdana, Geneva, sans-serif;" width="515">Registrazione e welcome coffee</td>
         </tr>
          <tr>
          	<td align="left" height="30" bgcolor="#efe6c5" style="background-color: #efe6c5; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold; font-family:Verdana, Geneva, sans-serif;" width="75">10.30 </td>
         	<td align="left" height="30" bgcolor="#efe6c5" style="background-color: #efe6c5; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold;" width="515">Benvenuto di IBM e INIZIO LAVORI</td>
         </tr>
          <tr>
          	<td align="left" height="30" bgcolor="#f8f4e3" style="background-color: #f8f4e3; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold;" width="75">10.45 </td>
         	<td align="left" height="30" bgcolor="#f8f4e3" style="background-color: #f8f4e3; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold;" width="515">La gestione del core business: il margine di contribuzione</td>
         </tr>
          <tr>
          	<td align="left" height="30" bgcolor="#efe6c5" style="background-color: #efe6c5; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold;" width="75"></td>
         	<td align="left" height="30" bgcolor="#efe6c5" style="background-color: #efe6c5; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold;" width="515">----------</td>
         </tr>
         <tr>
          	<td align="left" height="30" bgcolor="#f8f4e3" style="background-color: #f8f4e3; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold;" width="75"></td>
         	<td align="left" height="30" bgcolor="#f8f4e3" style="background-color: #f8f4e3; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold;" width="515">----------</td>
         </tr>
          <tr>
          	<td align="left" height="30" bgcolor="#efe6c5" style="background-color: #efe6c5; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold;" width="75">12.15</td>
         	<td align="left" height="30" bgcolor="#efe6c5" style="background-color: #efe6c5; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold;" width="515">Sessione Q&A</td>
         </tr>
         <tr>
          	<td align="left" height="30" bgcolor="#f8f4e3" style="background-color: #f8f4e3; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold;" width="75">12.30</td>
         	<td align="left" height="30" bgcolor="#f8f4e3" style="background-color: #f8f4e3; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold;" width="515">Domande e Risposte</td>
         </tr>
          <tr>
          	<td align="left" height="30" bgcolor="#efe6c5" style="background-color: #efe6c5; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold;" width="75">12.45</td>
         	<td align="left" height="30" bgcolor="#efe6c5" style="background-color: #efe6c5; font-size: 14px; line-height: 22px; text-align: left; color: #000; font-weight: bold;" width="515">Buffet Lunch</td>
         </tr>
         <tr>
           <td align="center" height="100" bgcolor="#f8f4e3" style="background-color: #f8f4e3; font-size: 14px; line-height: 22px; text-align: center; color: #000; font-weight: bold;" colspan="2">
L'evento è completamente gratuito ma è necessaria la registrazione.
    

    Luogo: Boscolo Exedra Hotel 5 stelle

Piazza della Repubblica, 47 - 00187 Roma </td></tr>
 		</table>
 		</table>
    </td>
    </tr>
    </table>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="center" height="30" bgcolor="#FFF" style="background-color: #FFF; font-size: 14px; line-height: 22px; text-align: center; color: #000; font-weight: bold;" colspan="3">come raggiungere l'hotel</td></tr>
		  <tr><td align="left" valign="text-top" bgcolor="#FFF" style="background-color: #FFF; font-size: 12px; line-height: 16px; text-align: left; color: #666; vertical-align: text-top;" width="200">Dall'Autostrada
              

            L'autostrada dista circa 4 km.
Uscita Roma Nord e seguire indicazioni per la Via Salaria direzione centro e quindi

per la Stazione Termini.</td>
         <td align="left" valign="text-top" bgcolor="#FFF" style="background-color: #FFF; font-size: 12px; line-height: 16px; text-align: left; color: #666; vertical-align: text-top;" width="200">Dalla Stazione Termini
           

           La stazione dista meno 

           di 1 km. In taxi bastano 5 minuti. A piedi 10 minuti 
           

           (dalla Stazione verso Piazza 

           della Repubblica).</td>
         <td align="left" height="240" valign="text-top" bgcolor="#FFF" style="background-color: #FFF; font-size: 12px; line-height: 16px; text-align: left; color: #666; vertical-align: text-top;" width="200">Dall'Aeroporto Leonardo da Vinci - Fiumicino:
L'aeroporto dista circa 25 Km.
In taxi si impiegano circa 45 minuti e il costo è di circa Euro 50.
In treno dall'aeroporto alla stazione Termini (35 minuti e circa 3,5 euro).
È altresì possibile prenotare un servizio di pick up direttamente presso la portineria dell'Hotel.</td></tr>
<tr>
<td align="left" bgcolor="#FFF" style="border-top: 1px #999 solid; border-bottom: 1px #999 solid; text-align: left; font-size: 12px; color: #000; background-color: #FFF;" colspan="2">BRAIN FORCE SpA
   

   Via Alessandro Volta, 16
   

   20093 Cologno Monzese, Mi </td>
   <td align="left" bgcolor="#FFF" style="border-top: 1px #999 solid; border-bottom: 1px #999 solid; text-align: left; font-size: 12px; color: #000; background-color: #FFF;">[img]ibm.jpg[/img]</tr>
 		</table>
        <table><tr><td width="601" align="justify" height="30" bgcolor="#FFF" style="text-align: justify; font-size: 10px; line-height: 13px; color: #000; background-color: #FFF;" >
I suoi dati sono custoditi nella nostra banca dati nel rispetto del Decreto Legislativo 196/03. Verranno utilizzati per tenerLa aggiornata in modo gratuito e senza impegno sulle nostre iniziative. Le ricordiamo che, in qualsiasi momento, potrà chiedere la modifica / cancellazione dei Suoi dati personali contattando il nostro servizio clienti - Email: eventi@brainforce.it - Fax 02.27300901 - Tel 02.254427.1 - Messaggio inviato da Brain Force SpA.</td></tr></table>
</table>

<map name="Map" id="Map">
  <area shape="rect" coords="199,1,400,36" href="#" alt="registrazione all'evento" />
</map>
</body>
</html>

**Federix** · 27-01-2011, 19:30

È preferibile utilizzare gli inline CSS ed eliminare tutti gli attributi deprecati (bgcolor, font, border, cellaspacing...). Inoltre le immagini devono essere linkate direttamente ad un sito, non così:

codice:

[img]mondo.jpg[/img]

ma cosi

codice:

Discussione: invito ad evento in html da inviare con la mail

Strumenti discussione

Ricerca discussione

Visualizza

invito ad evento in html da inviare con la mail

Permessi di invio