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;"> </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;"> </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;"> </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;"> </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 /> © 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;"> </div>
Risultato finale:
Il risultato finale lo puoi trovare su questo articolo File di esempio per la tua email html.
