Guida alla progettazione di email HTML

In questo articolo, imparerai suggerimenti utili per creare email HTML da zero.

Layout

• 650 px o meno di larghezza
  di progetto La regola generale per la dimensione dell'email è di mantenerla 650px o meno in larghezza. Ciò consente alle email di essere visualizzate correttamente nella maggior parte dei client e delle configurazioni di posta elettronica.
• I layout semplici sono i migliori
  Con la progettazione di email, semplice è meglio. Se provi a fare una progettazione complicata, incontrerai molti test e debug con problemi del client di posta elettronica. Se si desidera completare un progetto più avanzato, essere pronti a utilizzare molte tabelle e mettere da parte una ragionevole quantità di tempo per il test.
• Utilizzare tabelle HTML di base Sarà necessario utilizzare tabelle
  HTML standard per creare il layout generale. Le tecniche di layout e fluttuanti CSS non verranno visualizzate correttamente in tutti i client di posta elettronica.
• Prestare attenzione con la spaziatura
  interna delle celle della tabella Outlook applicherà la spaziatura interna da qualsiasi cella di fila a tutte le celle della riga. Ciò potrebbe comportare alcune modifiche visive che non si desiderano. Sarebbe meglio se provassi ad applicare la stessa spaziatura interna per tutte le celle di fila o posizionassi un div o un tavolo interno (che ha padding) all'interno della cella che si desidera avere padding. (Maggiori informazioni)
• Evitare di utilizzare colspans="" nelle tabelle
  Alcuni client di posta elettronica non supportano completamente questi e altri avranno problemi di visualizzazione per le altre celle se si dispone di un colspan.

CSS

• Non utilizzare fogli
  di stile esterni Funzioneranno solo in pochi client di posta elettronica e dovresti includere tutti i tuoi CSS utilizzando CSS in linea all'interno del tuo HTML. 
• Non utilizzare classi CSS: utilizzare sempre CSS in linea Molti client di posta elettronica non supportano le classi CSS
  . Invece di dichiarare le classi CSS, è necessario utilizzare CSS inline. Un esempio potrebbe essere
  contenuto
  Invece di
  contenuto
   
• Non utilizzare scorciatoie
  CSS CSS consente di impostare normalmente le proprietà in gruppi. Ad esempio style="font: 12px, Arial" Invece di raggruppare tali attributi, è necessario impostare ogni parte singolarmente. Ad esempio style="font-size:12px; font-family:Arial"
• Evita di utilizzare le opzioni CSS float o position Alcuni client di posta elettronica ignoreranno sia le opzioni
  float che quelle di posizione CSS. Prova invece a usare le tabelle.

Immagini e video

• Utilizzare URL di origine dell'immagine assoluti Invece di includere un'immagine come (), è necessario includere l'URL
  assoluto del file, ad esempio ()
• Usa sempre i tag alt ()
  La maggior parte dei client di posta elettronica disabilita le immagini per impostazione predefinita. A meno che tu non abbia tag alt, i tuoi iscritti vedranno solo una casella vuota. Con un tag alt, i tuoi iscritti vedranno il testo che hai inserito nel tag. 
• Non incorporare video o Flash
  Incorporare video direttamente o flash nella tua email non è una buona idea. Molti client di posta elettronica non supportano tale codice e molti programmi di rilevamento di spam e virus contrassegnano la tua email come spam / dannosa. Invece di incorporare il tuo video o flash nella tua email, fai uno screenshot di come appare il video del flash player e incorporalo. Puoi avere il video o il flash aperto nel loro browser quando fanno clic su di esso. 
• Le GIF animate non sono completamente supportate
  Chiediti se hai bisogno di un'animazione nella tua email. Mentre la maggior parte dei client di posta elettronica supporta GIF animate, Outlook 2007 non lo supporta. I client di posta elettronica che non supportano le GIF animate mostreranno probabilmente il primo fotogramma della sequenza di animazione. 
• Fai attenzione alle immagini
  giuntate Se hai un'immagine più grande giuntata e inserita nel tuo HTML usando celle di tabella o tag img uno accanto all'altro, dovrai testare a fondo. Alcuni client di posta elettronica possono aggiungere spazio extra tra le immagini e causare un brutto aspetto dell'email.
• Evita di usare le immagini per facilitare il layout Alcune persone usano immagini da 1 o 2 pixel per allineare gli elementi all'interno del layout
  . Alcuni client di posta elettronica o filtri penseranno che sia una potenziale immagine di tracciamento letta o aperta e penalizzeranno l'email.
• Testare l'email con le immagini disabilitate Poiché la maggior parte dei client di posta elettronica mostra email con immagini disabilitate per impostazione predefinita, è necessario verificare l'aspetto dell'email con le immagini disabilitate
  .
• Guarda le dimensioni
  dei tuoi file Come con il web design tradizionale, vuoi essere consapevole delle dimensioni dei file di immagine per la tua email. Cerca di tenerli bassi per assicurarti che vengano scaricati rapidamente per i tuoi iscritti.

Priorità bassa

• Le immagini di sfondo non sono completamente supportate
  Se utilizzi un'immagine di sfondo, ricorda che alcuni client di posta elettronica non le mostreranno. Se desideri comunque utilizzare un'immagine di sfondo, utilizza le opzioni di sfondo HTML invece di utilizzare CSS per dichiarare uno sfondo.
• Colori
  di sfondo del corpo intero Molti client di posta elettronica (ad esempio Gmail) non mostrano un colore di sfondo impostato per il corpo principale (tag). Se stai impostando un colore di sfondo nel tag del corpo, dovresti anche avere un div di ritorno a capo con un colore di sfondo che circonda il contenuto. In questo modo, anche se il colore di sfondo del corpo non è supportato, avrai qualcosa di simile.

Varie

• Non mettere nulla sopra l'aperturaTutto
  ciò che metti sopra il body tag verrà probabilmente rimosso e inutilizzato.
• Non includere javascript
  È probabile che venga rimosso nella maggior parte dei client di posta elettronica e i filtri antispam potrebbero rilevarlo come codice dannoso.
• Evita Microsoft Office
  L'HTML generato garantirà quasi i problemi. Inoltre, quando si copia e incolla da Office, si incollerà la loro formattazione e probabilmente si verificheranno problemi di progettazione.