La guida pratica per creare la tua email HTML
05/05/2017 8 min 332 Formazione IT

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.

Richiedi una consulenza personalizzata

Tags dell’articolo: