Guida alla progettazione di e-mail HTML

La guida completa alla progettazione delle e-mail

Si può sapere come creare un sito web moderno e accessibile già. Conosci le regole, le ultime opzioni, ecc. Tuttavia si può davvero prendere tutta quella conoscenza e usarlo per la progettazione di e-mail? La risposta breve è no. A causa della varietà di client di posta elettronica e supporto limitato di CSS, ci sono alcune regole molto specifiche & dos / don'ts quando si tratta di progettazione e-mail. Questa guida ti aiuterà a spiegare i molti punti di cui dovresti essere a conoscenza quando utilizzi il tuo codice HTML per creare un'email in modo che venga visualizzata correttamente. 

Prima di iniziare, è importante notare che la progettazione della posta elettronica non è la stessa del web design. Se ti interessano gli standard W3C o usi le ultime novità in CSS, devi dimenticare tutto questo quando ti avvicini alla progettazione della posta elettronica. Fondamentalmente si può pensare come se fosse l'anno 2000.

Layout

  • 650px o meno larghezza di progettazione
    La regola generale per la dimensione della posta elettronica è di mantenerlo 650px o meno in larghezza. Ciò consente alla posta elettronica di essere visualizzata correttamente (in generale) nella maggior parte dei client di posta elettronica e delle configurazioni di visualizzazione.
  • I layout semplici sono i migliori
    Con il design e-mail semplice è meglio. Se si tenta di eseguire una progettazione complessa si incontrano molti test e debug problemi client di posta elettronica. Se si sta cercando di completare un design più avanzato essere pronti a utilizzare un sacco di tabelle e di impostare una buona quantità di tempo da parte per il test.
  • Usa tabelle HTML di base 
    Per creare il layout generale è necessario utilizzare le tabelle HTML standard. Le tecniche di mobile e layout CSS non verranno renderi correttamente in tutti i client di posta elettronica.
  • Prestare attenzione con la spaziatura interna delle celle della tabella
    Outlook prenderà la spaziatura interna da qualsiasi cella in una riga e la applicherà a tutte le celle della riga. Ciò potrebbe comportare alcune modifiche visive che non si desidera. Si dovrebbe provare ad applicare la stessa spaziatura interna per tutte le celle in una riga O inserire un div interno o tabella (che ha imbottitura) all'interno della cella che si desidera avere imbottitura. (Ulteriori informazioni)
  • Evitare l'utilizzo di colspans"" nelle tabelle
    Alcuni client di posta elettronica non supportano completamente quelli e altri avranno problemi di visualizzazione per le altre celle se si dispone di un colspan.

CSS

  • Non utilizzare fogli di stile esterni
    Non funzioneranno in molti dei client di posta elettronica e si dovrebbe essere incluso tutto il vostro CSS utilizzando CSS in linea all'interno del vostro HTML. 
  • Non utilizzare classi CSS - utilizzare sempre CSS  inline
    Molti client di posta elettronica non supportano le classi CSS. Invece di dichiarare le classi CSS è necessario utilizzare CSS inline. Un esempio potrebbe essere  <div style"color:#cccccc;" > contenuto</div>  invece di <div class"cssclassa" > contenuto</div> 
  • Non usare i tasti di scelta rapida 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" 
  • Evitare di utilizzare le opzioni di posizione o float CSS
    Alcuni client di posta elettronica ignoreranno entrambe le opzioni CSS float e position. Provare a utilizzare invece le tabelle.

Immagini e video

  • Usa URL di origine immagine assoluti 
    Invece di includere un'immagine come (<img src"img.gif">) è necessario includere l'URL assoluto del file, ad esempio (<img src"http://site.com/img.gif">) 
  • Usa sempre tag alt (<img src'"http://site.com/img.gif" alt" Società ABC" >) 
    La maggior parte dei client di posta elettronica disabilitano le immagini per impostazione predefinita. Quindi, a meno che non si dispone di tag alt i vostri abbonati vedranno solo una casella vuota. Con un tag alt i tuoi iscritti vedranno il testo che metti nel tag. 
  • Non incorporare video e/o Flash
    Non è una buona idea incorporare i video direttamente e / o lampeggiare nella tua email. Molti client di posta elettronica non supportano tale codice e molti programmi di rilevamento di spam e virus flageranno la tua e-mail come spam / dannoso. Invece di incorporare il tuo video / flash nella tua e-mail prendere uno screenshot di ciò che il video di flash player assomiglia e incorporare che. Quando fanno clic su di esso si può avere il video / flash aperto nel loro browser. 
  • Le GIF animate non sono completamente supportate
    Chiediti se hai davvero bisogno di un'animazione nella tua email. Sebbene la maggior parte dei client di posta elettronica supporti le 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. 
  • Prestare attenzione con le immagini giunte
    Se si dispone di un'immagine più grande che viene pliced e inserito nel codice HTML utilizzando le celle di tabella o tag img proprio accanto all'altro è necessario testare a fondo. Alcuni client di posta elettronica possono aggiungere ulteriore spazio tra le immagini e causare l'aspetto negativo della posta elettronica.
  • Evitare di utilizzare immagini per facilitare il layout
    Alcune persone usano immagini da 1 o 2 pixel per allineare gli elementi all'interno del loro layout. Alcuni client di posta elettronica / filtri penseranno che è una potenziale lettura / apertura immagine di monitoraggio e penalizzare l'e-mail per questo.
  • Testare la posta elettronica con le immagini disabilitate
    Dal momento che la maggior parte dei client di posta elettronica mostrano e-mail con immagini disabilitate per impostazione predefinita è molto importante controllare per vedere come la tua e-mail sembra con le immagini disabilitate.
  • Guarda le dimensioni dei tuoi file
    Proprio come con il normale web design che si desidera essere consapevoli delle dimensioni dei file di immagine per la tua e-mail. Cerca di tenerli bassi per assicurarti che si scaricheranno rapidamente per i tuoi abbonati.

Priorità bassa

  • Le immagini di sfondo non sono completamente supportate
    Se si utilizza un'immagine di sfondo tenere presente che alcuni client di posta elettronica non li mostreranno. Se si desidera ancora utilizzare un'immagine di sfondo, utilizzare le opzioni di sfondo HTML anziché CSS per dichiarare uno sfondo.
  • Colori di sfondo corpo intero 
    Molti client di posta elettronica (ad esempio Gmail) non mostrano un colore di sfondo impostato per il corpo principale (<body>  tag) Si consiglia di impostare un colore di sfondo nel tag body in modo che abbia anche un div a capo con un colore di sfondo che circonda il contenuto. In questo modo, anche se il colore di sfondo del corpo non è supportato si avrà qualcosa di abbastanza simile mostrato.

Varie

  • Non mettere nulla sopra il tag <body> di apertura
    Tutto ciò che si mette sopra il tag corpo sarà probabilmente spogliato e non utilizzato.
  • Non includere javascript
    E 'probabile che sarebbe stato spogliato nella maggior parte dei client di posta elettronica e alcuni filtri antispam possono rilevare come codice dannoso.
  • Evitare Microsoft Office come la peste 
    Il codice HTML generato garantirà quasi problemi. Inoltre, quando si copia e incolla da Office si incolla nella loro formattazione e probabilmente avranno problemi di progettazione. 
Altre domande? Invia una richiesta