Blog

  • Home
  • La guida pratica per creare la tua email HTML

La guida pratica per creare la tua email HTML

La guida pratica per creare la tua email HTML

Questa veloce guida ti aiuta a imparare come strutturare un template di email per le tue campagne email, partendo da un esempio pratico.

Nozioni di base HTML

Qualsiasi modello HTML è composto da due parti:

Sezione di intestazione : qualsiasi codice inserito tra <head> e </head> è considerato, dal motore di rendering di un client di posta elettronica, la sezione di intestazione. Qualsiasi query multimediale, stile e animazioni CSS sono specificate in questa sezione.

Body : Qualsiasi codice inserito tra <body> e </body> è la sezione body e il motore di rendering utilizza il codice per creare la struttura della tua e-mail.

Passaggio 1:
Come preparare il modello HTML <head>

La sezione head di qualsiasi email assomiglia al seguente codice:

 < ! DOCTYPE  html  PUBLIC   "-//W3C//DTD XHTML 1.0 Transitional//EN"   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 < html  xmlns = "https://www.w3.org/1999/xhtml" >
 < head >
 < title > Test  Email  Esempio < / title >
 < meta  http - equiv = "Content-Type"   content = "text/html; charset=UTF-8"   / >
 < meta  http - equiv = "X-UA-Compatible"   content = "IE=edge"   / >
 < meta  name = "viewport"   content = "width=device-width, initial-scale=1.0 "   / >
 <style>
 <!---  CSS   code   ( if   any )   --->
 </style>
 < / head >

<! DOCTYPE> viene utilizzato per informare il motore di rendering su quali tag HTML aspettarsi e su quale serie di regole aderiscono HTML e CSS. Anche se alcuni client di posta elettronica (client di webmail come Gmail, Google Apps, Yahoo! Mail e Outlook.com) eliminano il codice e applicano il proprio, è buona norma includerlo nel codice di posta elettronica.

Anche se sei libero di scegliere tra XHTML 1.0, Transitional XHTML 1.0 e Strict HTML5, la maggior parte degli sviluppatori di e-mail vale la pena usare Transitional XHTML 1.0.

<meta http-equiv = ” Content-Type ” /> specifica come elaborare testo e caratteri speciali nella tua e-mail. “Text / html” indica al motore di rendering di considerare le seguenti stringhe di testo come html.

<meta name = “viewport” /> indica al dispositivo su cui viene visualizzata l’e-mail di impostare l’area visualizzabile dell’e-mail in base alla larghezza dello schermo.

Il titolo dell’e-mail è scritto tra il tag <title>. Quando un iscritto fa clic su “Visualizza online”, il titolo dell’e-mail viene visualizzato nella scheda del browser.

Passaggio 2:
Come modellare la tua e-mail

Lo styling è bello, ma è difficile.

Qualunque sia lo stile che intendi implementare nella tua e-mail come la formattazione del testo, la dimensione dell’immagine, le query multimediali vanno tra i tag <stile> come classi diverse.Il formato di base per l’aggiunta del tag <style> è <style type = “text / css”> dove in “text / css” specifica il tipo di supporto come CSS. Il posizionamento del tag <style> è complicato poiché 6 client di posta elettronica su 36 non supportano il tag <style> in <head> e Gmail non lo supporta nel corpo dell’email.

Formattazione del testo

Nel caso in cui sia necessario aggiungere una condizione di formattazione centralizzata (mostrata di seguito) per qualsiasi testo, è possibile specificare gli attributi nella classe specifica.

ad es. per disabilitare la decorazione del testo nei collegamenti ipertestuali, aggiungere:

.em_defaultlink a {
  color: inherit !important;
  text-decoration: none !important;
}

Media query

Nel caso in cui si stia codificando un messaggio di posta elettronica reattivo, le query multimediali devono essere aggiunte nel seguente formato:

@media only screen and (min-width: ___px) and (max-width: ___px)
{
.(class_name)
{
  (attributes to be implemented)
}
}

Ad esempio, considerare la seguente media query:

@media only screen and (min-width:481px) and (max-width:699px) {
.em_main_table {
  width: 100% !important;
}
.em_wrapper {
  width: 100% !important;
}
.em_hide {
  display: none !important;
}
.em_img {
  width: 100% !important;
  height: auto !important;
}
.em_h20 {
  height: 20px !important;
}
.em_padd {
  padding: 20px 10px !important;
}
}

Quando l’e-mail viene visualizzata in un dispositivo compreso tra la larghezza dello schermo di 481 e 699 px:

  • La larghezza dell’email (em_main_table) è forzata al 100% a causa dell’attributo “larghezza: 100%! Important;”.
  • La sezione associata alla classe em.hide deve essere nascosta a causa dell’attributo “display: none! Important;»
  • La sezione associata alla classe em.h20 avrà l’altezza fissa di 20px a causa dell’attributo “height: 20px! Important;»
  • Qualsiasi elemento associato alla classe em_padd avrà un padding fisso di 20px (orizzontale) e 10px (verticale).

Passaggio 3:
Aspetto del codice <head> finale

Quindi, il nostro codice <head> finale sarà:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Test Email Esempio</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0 " />
<style>
<!---Text decoration removed -->
.em_defaultlink a {
  color: inherit !important;
  text-decoration: none !important;
<!---Media Query for desktop layout -->
@media only screen and (min-width:481px) and (max-width:699px) {
.em_main_table {
  width: 100% !important;
}
.em_wrapper {
  width: 100% !important;
}
.em_hide {
  display: none !important;
}
.em_img {
  width: 100% !important;
  height: auto !important;
}
.em_h20 {
  height: 20px !important;
}
.em_padd {
  padding: 20px 10px !important;
}
}
@media screen and (max-width: 480px) {
.em_main_table {
  width: 100% !important;
}
.em_wrapper {
  width: 100% !important;
}
.em_hide {
  display: none !important;
}
.em_img {
  width: 100% !important;
  height: auto !important;
}
.em_h20 {
  height: 20px !important;
}
.em_padd {
  padding: 20px 10px !important;
}
.em_text1 {
  font-size: 16px !important;
  line-height: 24px !important;
}
u + .em_body .em_full_wrap {
  width: 100% !important;
  width: 100vw !important;
}
}
</style>
</head>

Passaggio 4:
Come costruire il tuo <body>

L’intervallo di 600 px per le e-mail è stato calcolato per Windows Outlook funzionante su un monitor desktop da 1024 px, 10 anni fa. Ora i dispositivi con una larghezza dello schermo di almeno 800 px hanno invaso il mercato; così puoi creare e-mail con una larghezza di almeno 700 px e aggiungere colori di sfondo per emulare e-mail widescreen. Quindi, iniziamo con un corpo del 100% di larghezza con il colore #fefefef.

<body class="em_body" style="margin:0px; padding:0px;" bgcolor="#efefef">

In questo aggiungiamo una tabella allineata al centro a 700px

 <table align="center" width="700" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:700px;">

Ora includeremo un testo di pre-intestazione e “visualizza online” come parte di una cella, annidando un’altra tabella nella tabella.

<tr>
          <td style="padding:15px;" class="em_padd" valign="top" bgcolor="#efefef" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
              <tbody><tr>
                <td style="font-family:'Open Sans', Arial, sans-serif; font-size:12px; line-height:15px; color:#0d1121;" valign="top" align="center">Test Email Sample | <a href="#" target="_blank" style="color:#0d1121; text-decoration:underline;">View Online</a></td>
              </tr>
            </tbody></table></td>
        </tr>

Ora aggiungiamo l’immagine che vuoi:

 <tr>
          <td valign="top" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
              <tbody><tr>
                <td valign="top" align="center"><img class="em_img" alt="Benvenuto sulla Mia Email Newsletter" style="display:block; font-family:Arial, sans-serif; font-size:30px; line-height:34px; color:#000000; max-width:700px;" src="...percorso immagine..." width="700" border="0" height="345"></td>
              </tr>
            </tbody></table></td>
        </tr>

Ora, aggiungiamo una tabella separata per la copia dell’email:

 <tr>
          <td valign="top" align="center" bgcolor="#0d1121" style="padding:35px 70px 30px;" class="em_padd"><table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="center" valign="top" style="font-family:'Open Sans', Arial, sans-serif; font-size:16px; line-height:30px; color:#ffffff;">Questa è una email di esempio che deve essere contenuta in un singolo paragrafo</td>
              </tr>
              <tr>
                <td height="15" style="font-size:0px; line-height:0px; height:15px;">&nbsp;</td>
<!—questo è uno spazio di 15px per separare due paragrafi -->
              </tr>
              <tr>
                <td align="center" valign="top" style="font-family:'Open Sans', Arial, sans-serif; font-size:18px; line-height:22px; color:#fbeb59; letter-spacing:2px; padding-bottom:12px;">Questo è il paragrafo 2 della dimensione del carattere 18px e il colore del carattere # fbeb59 con una spaziatura di linea di 15px</td>
              </tr>
              <tr>
                <td height="25" class="em_h20" style="font-size:0px; line-height:0px; height:25px;">&nbsp;</td>
<!—questo è uno spazio di 25px per separare due paragrafi -->
              </tr>
<tr>
                <td align="center" valign="top" style="font-family:'Open Sans', Arial, sans-serif; font-size:18px; line-height:22px; color:#fbeb59; text-transform:uppercase; letter-spacing:2px; padding-bottom:12px;"> Questo è il paragrafo 3 della dimensione del carattere 18px e il colore del carattere # fbeb59 con una spaziatura di linea di 25px e maiuscola</td>
              </tr>
            </table></td>
        </tr>

Ora aggiungiamo un piè di pagina compatibile CAN-SPAM:

<tr>
          <td valign="top" align="center" bgcolor="#f6f7f8" style="padding:38px 30px;" class="em_padd"><table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td valign="top" align="center" style="padding-bottom:16px;"><table align="center" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td valign="top" align="center"><a href="#" target="_blank" style="text-decoration:none;"><img src="images/fb.png" alt="fb" style="display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:26px;" border="0" width="26" height="26" /></a></td>
                      <td width="6" style="width:6px;">&nbsp;</td>
                      <td valign="top" align="center"><a href="#" target="_blank" style="text-decoration:none;"><img src="images/tw.png" alt="tw" style="display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:27px;" border="0" width="27" height="26" /></a></td>
                      <td width="6" style="width:6px;">&nbsp;</td>
                      <td valign="top" align="center"><a href="#" target="_blank" style="text-decoration:none;"><img src="images/yt.png" alt="yt" style="display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:26px;" border="0" width="26" height="26" /></a></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td align="center" valign="top" style="font-family:'Open Sans', Arial, sans-serif; font-size:11px; line-height:18px; color:#999999;"><a href="#" target="_blank" style="color:#999999; text-decoration:underline;">POLICY PRIVACY</a> | <a href="#" target="_blank" style="color:#999999; text-decoration:underline;">TERMINI DI SERVIZIO</a> | <a href="#" target="_blank" style="color:#999999; text-decoration:underline;">POLITICA RESI</a><br />
                  &copy; 2020 Nome della tua azienda. Tutti i diritti riservati.<br />
                  Se non desideri ricevere ulteriori e-mail da noi, per favore <a href="#" target="_blank" style="text-decoration:none; color:#999999;">annulla l'iscrizione</a></td>
              </tr>
            </table></td>
        </tr>

Ora, prima di chiudere il corpo, aggiungiamo il seguente codice, aggiunge ulteriore spazio per forzare il layout del desktop in Gmail:

<div class="em_hide" style="white-space: nowrap; display: none; font-size:0px; line-height:0px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>

Risultato finale:

Il risultato finale lo puoi trovare su questo articolo File di esempio per la tua email html.

1 tuo già cliente vale 5 nuovi clienti, ma forse non lo sai