Quali sono le linee guida per la progettazione di e-mail HTML? [chiuso]

101

Quali linee guida puoi fornire per la formattazione HTML ricca 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. Posiziona il foglio di stile al <body>posto di<head>
    Alcuni client di posta elettronica rimuoveranno CSS dalla testa, ma lo lasceranno se il blocco di stile è (non valido) nel corpo.
  2. Usa gli stili in linea dove possibile
    Gmail rimuoverà qualsiasi foglio di stile, sia in <head>che in <body>, ma rispetterà gli stili in linea assegnati utilizzando l' style=""attributo
  3. Torna alle tabelle
    Negli ultimi anni gli standard di posta elettronica hanno fatto un enorme passo indietro grazie a Outlook 2007 che utilizza il motore di rendering di Microsoft Word. Disimpara 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 sul Web non visualizzano le immagini a meno che l'utente non ne richieda specificamente la visualizzazione.

Ho anche alcune verità "non confermate" che non ricordo dove le ho lette.

  1. Non utilizzare più di due livelli di nidificazione nelle tabelle
    È vero. Cosa è probabile che succeda se lo faccio? C'è qualche cliente / cliente particolare che soffoca su questo?
  2. Fai attenzione a nidificare le immagini di sfondo nelle celle / tabelle
    Da quanto ho capito potresti incontrare situazioni in cui l'immagine di sfondo viene applicata completamente di nuovo nella tabella / cella discendente, e non solo "risplende". Ancora una volta, vero o no? Quali clienti?

Vorrei arricchire questo elenco con più linee guida ed esperienze dalle trincee.

Potete offrire ulteriori suggerimenti?

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

html  email 
— kaa
fonte
— John

Risposte:

63

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 interrompono in Outlook 2007 e Gmail).
  • La cosa del tag di stile nel corpo è perché Hotmail lo accettava in quel modo - sono abbastanza sicuro che ora lo spogliano. Usa stili in linea con l' styleattributo se devi usare CSS.
  • Dimenticati del tutto float
  • Ricorda che le tue immagini saranno probabilmente 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 con i link, fai particolare attenzione a tutto ciò che sembra un URL nel testo del link: farai arrabbiare i filtri di "phishing" (ad esempio, <a href="http://domain.tld">www.someotherdomain.tld</a>è male )
  • Ricorda che la "piega" sui client webmail tende ad essere estremamente in alto nella pagina (su uno schermo 1024x768, la maggior parte delle interfacce non mostra più di un centinaio di pixel o giù di lì): inserisci la tua identità in alto in modo che il destinatario sa chi sei.
  • La versione recente di Outlook ha un riquadro di anteprima "verticale" che è significativamente più stretto di quanto ci si potrebbe aspettare: fare molta attenzione ai layout a larghezza fissa, se è necessario utilizzarli, renderli più stretti possibile.
  • Non pensare nemmeno a flash, Javascript, SVG, canvas o qualcosa del genere.
  • Prova, molto. Assicurati di testare in un recente Outlook (le cose sono cambiate molto! Ora utilizza Word come motore di rendering HTML ed è paralizzato: supporto HTML / CSS di Word 2007 ). Anche Gmail è piuttosto schizzinoso. Sorprendentemente, la webmail di Yahoo è estremamente buona, con un buon supporto CSS.

In bocca al lupo ;)

Aggiorna per rispondere ad 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 andare bene, ma in realtà, se hai un layout abbastanza complicato da averne bisogno, probabilmente avrai comunque problemi. Mantieni il tuo layout semplice .

Fai attenzione a nidificare le immagini di sfondo nelle celle / tabelle

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

— Dan
fonte
3
Perché il supporto delle email HTML non si è evoluto così tanto? Perché dovremmo continuare ad attuare tutte queste cattive pratiche, come se fossimo tornati nel 1999?
— smonff
Non c'è alcuna soluzione per sostenere bgimages stackoverflow.com/a/17358553/413032 . Alternando una ms-word html. @ Smonff Sono completamente d'accordo con te. ........ Perché un html reso da MS-Word!
— Davut Gürbüz
1
controllare Codifica e-mail 101 dalla cartina di tornasole, la speranza aiuta.
— shaijut
13

Usa sempre multipart mime e fornisci un'alternativa di testo normale.

— JeeBee
fonte
2

Penso che questo sia un livello inferiore rispetto alla domanda che stai facendo, ma se vuoi davvero che un'e-mail html venga visualizzata correttamente dal maggior numero di client possibile, assicurati che utilizzi un MIME valido. In particolare, affinché un'e-mail sia considerata MIME valida, le intestazioni DEVONO (nel senso RFC della parola) contenere entrambe queste intestazioni:

MIME-Version:
Content-Type:

I client molto severi visualizzeranno il tuo HTML come testo grezzo se uno o l'altro di questi manca. Saresti sorpreso di quanti grandi fornitori online che dovrebbero saperne di più hanno sbagliato (in particolare, ho ricevuto e-mail HTML con versione MIME mancante: intestazioni da Amazon e ACM in passato)

— jj33
fonte
1
  • Le immagini di sfondo non sono affidabili.
  • Praticamente un gioco da ragazzi, ma niente javascript .
  • Usa un editor che ti consenta di inviare il file / buffer corrente come e-mail o, per lo meno, di trovare un programma che ti consenta di inviare il contenuto di un file come e-mail HTML. non testare le tue e-mail copiando il codice HTML e incollandolo in Outlook (o in qualsiasi altro programma di posta).
— Jonathan Arkell
fonte
1

Tre parole di consiglio: prova, prova, prova.

Controlla il servizio di test della posta elettronica di LitmusApp.com. Invii loro un messaggio e loro lo visualizzano in un gruppo di client e ti mostrano schermate dei risultati. Non è perfetto, ma è abbastanza buono.

(A proposito, Lotus Notes prima della 8.0 fa davvero schifo per la posta HTML)

Inoltre, oltre ai semplici stili CSS in linea, consiglio di passare ai tag ove possibile.

— Eli
fonte
0

Se includi un blocco di stile, non iniziare nessuna nuova riga con ".classname" o "." nulla. Metti un tutore o qualcosa del genere prima del ciclo. Se non lo fai, alcuni sistemi di web mail non visualizzeranno correttamente i tuoi fogli di stile.

Molte persone hanno erroneamente presunto di non poter utilizzare i blocchi CSS nelle e-mail a causa di questo comportamento ... IIRC "." è il delimitatore del corpo per SMTP. I sistemi tenderanno a scappare nei loro archivi di posta per evitare che il contenuto di un messaggio venga riconosciuto erroneamente come un nuovo messaggio. Il modo in cui viene gestito tende a rompere qualsiasi stile iniziando su una nuova riga con un punto.

— Einstein
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.