Quali sono le linee guida per la progettazione dell’email HTML?

Quali linee guida puoi fornire per la formattazione HTML avanzata nelle e-mail mantenendo una buona stabilità visiva su molti client e interfacce e-mail basate sul Web?

Una risposta non correlata a una domanda su Stack Overflow ha suggerito:

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

Che contiene le seguenti linee guida:

  1. Inserisci il foglio di stile in invece di
    Alcuni client di posta elimineranno i CSS fuori dalla testa, ma lascialo se il blocco di stile è (invalido) nel corpo.
  2. Usa gli stili in linea dove mai ansible
    Gmail rimuove qualsiasi foglio di stile, sia in che in , ma onora gli stili in linea assegnati utilizzando l’attributo style=""
  3. Ritorna ai tavoli
    Gli standard di posta elettronica hanno effettivamente fatto un enorme passo indietro negli ultimi anni grazie a Outlook 2007 che utilizzava il motore di rendering di Microsoft Word. Disimparare la maggior parte di ciò che hai imparato sul posizionamento senza fogli di stile.
  4. Non fare affidamento sulle immagini
    La maggior parte dei client e la maggior parte dei client di posta elettronica basati su Web non visualizzano le immagini a meno che l’utente non richieda specificamente che vengano visualizzati.

Ho anche alcune verità “non confermate” che non ricordo dove li ho letti.

  1. Non utilizzare più di due livelli di nidificazione nelle tabelle
    È vero. Che cosa succederà probabilmente se lo faccio? C’è qualche cliente / cliente particolare che soffoca su questo?
  2. Fai attenzione ad annidare le immagini di sfondo in celle / tabelle
    Come ho capito, potresti incontrare situazioni in cui l’immagine di sfondo viene applicata completamente nella tabella / cella decrescente, e non solo “splendere attraverso”. Di nuovo, vero o no? Quali clienti?

Mi piacerebbe arricchire questa lista con più linee guida ed esperienze dalle trincee.

Potete offrire ulteriori suggerimenti?

Aggiornamento: Sto specificatamente chiedendo le linee guida per la parte di progettazione in HTML e la coerenza di. Domande sulle linee guida generali per evitare i filtri antispam e cortesia comune sono già su SO.

In realtà è davvero difficile creare un’e-mail HTML decente, se ci si avvicina da una prospettiva “moderna HTML e CSS”.

Per ottenere i migliori risultati, immagina che sia il 1999.

  • Torna alle tabelle per il layout (o preferibilmente – non tentare alcun layout complesso)
  • Abbi paura delle immagini di sfondo (si rompono in Outlook 2007 e Gmail).
  • La cosa del tag style-in-the-body è dovuta al fatto che Hotmail lo accettava in quel modo – sono abbastanza sicuro che ora lo spogliano. Usa gli stili in linea con l’attributo style se devi usare i CSS.
  • Dimentica interamente il float
  • Ricorda che probabilmente le tue immagini saranno bloccate – usa lo sfondo e il colore del testo a tuo vantaggio – assicurati che ci sia del testo leggibile con le immagini disabilitate
  • Fai molta attenzione ai collegamenti, fai attenzione soprattutto a tutto ciò che assomiglia a un URL nel testo del link: farai arrabbiare i filtri “phishing” (ad es. www.someotherdomain.tld è cattivo )
  • Ricorda che la “piega” dei client webmail tende ad essere estremamente alta nella pagina (su uno schermo 1024×768, la maggior parte delle interfacce non mostrerà più di un centinaio di pixel): porta la tua id quadro in cima alla pagina in modo che il destinatario sa chi sei
  • La versione recente di Outlook ha un riquadro di anteprima “ritratto” che è significativamente più stretto di quanto ci si possa aspettare – sii molto prudente con i layout a larghezza fissa, se devi usarli, rendili il più stretti ansible.
  • Non pensare nemmeno a flash, Javascript, SVG, canvas o qualcosa del genere.
  • Test, molto. Assicurati di eseguire il test in un Outlook recente (le cose sono cambiate molto! Ora usa Word come motore di rendering HTML, ed è azzoppato: supporto HTML / CSS di Word 2007 ). Gmail è anche abbastanza pignolo. Sorprendentemente la webmail di Yahoo è estremamente buona, con un buon supporto CSS.

In bocca al lupo 😉

Aggiornamento per rispondere a ulteriori domande:

Non utilizzare più di due livelli di nidificazione nelle tabelle

Credo che questa sia una vecchia linea guida relativa a Lotus Notes. Le tabelle annidate dovrebbero essere a posto, ma in realtà, se hai un layout abbastanza complicato da averne bisogno, probabilmente avrai comunque problemi. Mantieni il tuo layout semplice .

Fai attenzione ad annidare le immagini di sfondo in celle / tabelle

Questo può essere collegato a quanto sopra, e lo stesso vale, se stai diventando così complicato , avrai dei problemi. Le versioni recenti di Outlook non supportano affatto le immagini di sfondo, quindi ti consigliamo di dimenticarle completamente.

Usa sempre multipart mime e fornisci un’alternativa in testo normale.

Le persone dietro Campaign Monitor hanno anche avviato un sito web di progetto di standard email con un sacco di buone informazioni.

Penso che questo sia un livello inferiore rispetto alla domanda che stai ponendo, ma se vuoi davvero che una email html sia vista correttamente dal maggior numero ansible di client, assicurati che utilizzi un MIME valido. In particolare, per un’e-mail che deve essere considerata come MIME valido, le intestazioni DEVONO (nel senso della RFC della parola) contenere entrambe le intestazioni:

 MIME-Version: Content-Type: 

I client molto rigidi visualizzeranno il tuo HTML come testo non elaborato se manca uno o l’altro di questi. Sareste sorpresi di quanti grandi venditori online che dovrebbero conoscere meglio hanno rovinato tutto (in particolare, ho ricevuto email HTML con mancante versione MIME: intestazioni di Amazon e ACM in passato)

Dai un’occhiata a questo standard, è come html5boilerplate, ma per le email: http://htmlemailboilerplate.com/

  • Le immagini di sfondo non sono affidabili.
  • Praticamente un gioco da ragazzi, ma non javascript .
  • Utilizza un editor che ti consente di inviare il file / buffer corrente come un’email o, per lo meno, di trovare un programma che ti permetta di inviare il contenuto di un file come email HTML. non testare le e-mail copiando l’HTML e incollandolo in Outlook (o qualsiasi altro programma di posta elettronica per quella materia).

Tre parole di consiglio: test, test, test.

Controlla il servizio di test delle email di LitmusApp.com. Gli mandi un messaggio e lo rendono in un gruppo di clienti e ti mostrano gli screenshot dei risultati. Non è perfetto, ma è abbastanza buono.

(A proposito, Lotus Notes prima dell’8,0 puzza davvero per la posta HTML)

Inoltre, oltre agli stili CSS in linea, consiglio di passare ai tag ovunque sia ansible.

Incorpora le tue immagini, non collegarti a loro.

Questo non va bene :

 Lolkat 

Questo è buono :

  

Sì, sembra strano ma dai un’occhiata a questa guida per quanto riguarda l’incorporamento delle immagini nelle e-mail .

Se includi un blocco di stile, non iniziare nessuna nuova riga con “. Nomest” o “.” nulla. Metti un tutore o qualcosa prima del periodo. Se non lo fai, alcuni sistemi di posta elettronica non visualizzeranno correttamente i tuoi fogli di stile.

Molte persone hanno erroneamente assunto che non possono utilizzare i blocchi CSS nelle e-mail a causa di questo comportamento … IIRC “.” è il delimitatore del corpo per SMTP. I sistemi tendono a sfuggire nei loro archivi di posta elettronica per impedire che il contenuto di un messaggio venga erroneamente riconosciuto come nuovo messaggio. Il modo in cui viene gestito tende a rompere qualsiasi stile iniziando su una nuova riga con un punto.