email Tutorial
Iniziare con la posta elettronica
Ricerca…
Osservazioni
L'e-mail HTML è l'uso di un sottoinsieme di HTML e CSS per formattare un messaggio e-mail come una pagina Web utilizzando colori, grafici, colonne di tabelle e collegamenti.
Link utili:
HTML e testo normale
L'e-mail HTML è l'uso di un sottoinsieme di HTML e CSS per formattare un messaggio e-mail come una pagina Web utilizzando colori, grafici, colonne di tabelle e collegamenti.
Quando invii un'email, è importante inviare sia testo normale che HTML. Lo fai inviando la tua email come MIME multiparte. La maggior parte dei provider di servizi di posta elettronica dispone di strumenti per la costruzione automatica del MIME. Alcuni genereranno una versione in testo normale basata sulla tua versione HTML, e ci sono anche strumenti di terze parti .
Esempio di un'email di solo testo:
# EMAIL TITLE GOES HERE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-1
---
## Subheader goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-2
---
Footer and Sender information
Unsubscribe here: http://www.website.com/unsubscribe
Si noti che con il recente lancio di Apple Watch, è emersa una nuova parte MIME: text/watch-html . Questo contenuto verrà visualizzato solo nell'Apple Watch (e in tutti gli altri client che supportano questo tipo MIME).
Client di posta elettronica e motori di rendering
I client di posta elettronica utilizzano diversi motori di rendering per il rendering di email HTML:
- Apple Mail, Outlook per Mac, Android Mail e iOS Mail utilizzano WebKit
- Outlook 2000/02/03 utilizza Internet Explorer 6
- Outlook 2007/10/13 utilizza Microsoft Word
- I client Web utilizzano il rispettivo motore del browser (ad esempio Safari utilizza WebKit, Chrome utilizza Blink)
Alcuni client aggiungeranno anche i propri stili sopra i tuoi, per esempio Gmail imposta tutti i font <td> in font-family: arial,sans-serif; , che potrebbe avere un impatto sul rendering di un'email.
Prima del 2016, tutti i prodotti Gmail hanno eliminato tag <link> , qualsiasi CSS all'interno di tag <style> e qualsiasi altro CSS non allineato. Alla fine del 2016, Gmail ha iniziato a supportare il tag <style> e le media-query nella maggior parte dei suoi prodotti. Ecco un aggiornamento dal 23 novembre 2016 :
Nozioni di base (tabelle e CSS incorporati)
Tabelle per il layout
La struttura di un file di posta elettronica HTML è simile a quella di una pagina Web:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
Tuttavia un layout CSS basato su <div> non funziona nella posta elettronica come avviene sul web. I principali client di posta elettronica non offrono supporto per cose come float e flexbox, o lo manipolano in modi diversi. <div> s ha anche problemi di posizionamento e di modello box in diversi client, in particolare Outlook. Esistono alcune tecniche per codificare un'e-mail utilizzando solo <div> s, ma è più sicuro attenersi alle tabelle per il layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation”>
<tr>
<td width="200">
<h1>Hello World!</h1>
</td>
<td width="400">
<p>This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
CSS in linea
L'applicazione di uno stile in linea conferisce priorità agli stili più lontani (come gli stili client webmail) e funziona anche intorno ai client di posta elettronica che eliminano i CSS dai file head o esterni di CSS. CSS in linea è il modo migliore per garantire una visualizzazione coerente in ogni client di posta elettronica.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body style="background: #000000;">
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation” style="margin: auto; background: #ffffff;">
<tr>
<td width="200" style="padding: 20px; background-color: #eeeeee;">
<h1 style="font-weight: bold; color: #444444; font-family: Georgia, serif;">Hello World!</h1>
</td>
<td width="400" style="padding: 20px;">
<p style="color: #444444; font-family: arial, sans-serif; margin: 0;">This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
Hai un paio di opzioni per integrare i CSS:
- Scrivi CSS in linea mentre vai
- Utilizza frammenti locali nel tuo editor
- Utilizza un inliner CSS basato sul Web come questo
- Utilizza un inliner CSS programmatico come questo
- Utilizzare un processo di compilazione come questo o una lingua di template
- Lascia che il tuo fornitore di servizi di posta elettronica gestisca l'inlining per te (se lo supportano)
Email di codifica per tutti i client di posta elettronica
Metodo di codifica utilizzato: ibrido / spugnoso
È sempre stato un mito che i div non possano essere usati nelle e-mail. Ci sono client email (a differenza di Outlook) che possono rendere correttamente i div. L'esempio seguente illustrerà come è possibile codificare un'e-mail che funzionerà con l'app Gmail (con aggiornamenti non ancora implementati), i dispositivi Samsung e altri client di posta elettronica che non leggono le query multimediali.
Presentazione delle dichiarazioni condizionali di Outlook
Le dichiarazioni condizionali di Outlook sono molto utili quando si tratta di eseguire il rendering di e-mail o di mostrare qualcosa di specifico come fall backs per Outlook.
<!--[if (gte mso 9)|(IE)]>
<![endif]-->
Il codice sopra riportato è maggiore di microsoft outlook 9 o IE
Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15
Versioni per istruzioni condizionali elencate.
Avvio di un modello di email ibrido
Ogni passaggio è stato spiegato in modo tale che dovrebbe essere facile per chiunque abbia una conoscenza HTML di base da comprendere.
Per prima cosa iniziamo con una tabella wrapper che si estenderà su tutto lo schermo e con una classe di container.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
Successivamente, aggiungiamo una query multimediale per i client di posta elettronica che non leggono la larghezza massima ma leggono il CSS nell'intestazione. La query multimediale sarà indirizzata a tutte le schermate e mostrerà il contenitore con una larghezza di 700 pixel.
@media only screen and (max-width : 700px) {
.container{width:700px;}
}
Quindi aggiungiamo un'istruzione condizionale di outlook che mantiene la tabella (con contenitore di classe) in una larghezza di 700 pixel.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="700">
<![endif]-->
<table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
<tbody>
<tr>
<td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Il codice sopra dovrebbe ora tenere il tuo modello in Outlook a 700px di larghezza.
Ora per le colonne. Sotto il codice verranno create due colonne uguali sul modello sia a 350px di larghezza.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Dopo questo il limite è solo la tua immaginazione o il designer. Quando i progetti sono fatti, è importante essere coinvolti nella fase di inquadratura del filo, quindi non ci sono sorprese una volta che il progetto è in fase di codifica.
Nota:
- Le immagini Retina avranno bisogno di immagini impostate a livello di elemento non sul suo stile <img src = "" width = "" ...
- Puoi ancora scegliere di fare CSS in linea o puoi scegliere di usare CSS in testa solo se tutti i tuoi client supportano CSS in testa.
