Best practice per lo styling delle e-mail HTML [chiuso]

Sto progettando un modello HTML per una newsletter via email. Ho imparato che molti client di posta elettronica ignorano i fogli di stile collegati e molti altri (incluso Gmail) ignorano del tutto le dichiarazioni di blocco CSS. Gli attributi di stile in linea sono la mia unica scelta? Quali sono le migliori pratiche per lo styling delle e-mail HTML?

Campaign Monitor ha una matrice di supporto eccellente che descrive in dettaglio cosa è supportato e cosa non lo è tra i vari client di posta.

È possibile utilizzare un servizio come Litmus per visualizzare come appare un'e-mail tra più client e se vengono catturati da filtri, ecc.

Ho già combattuto la battaglia di email HTML in precedenza. Ecco alcuni dei miei consigli sullo stile per la massima compatibilità tra i client di posta elettronica.

• Gli stili in linea sono i tuoi migliori amici. Assolutamente non collegare fogli di stile e non utilizzare un <style>tag (GMail, ad esempio, rimuove quel tag e tutto il suo contenuto).

• Contro il tuo miglior giudizio, usa e abusa delle tabelle . <div>s non lo taglierà (specialmente in Outlook).

• Non usare immagini di sfondo , sono macchiate e ti infastidiranno.

• Ricorda che alcuni client di posta elettronica trasformeranno automaticamente i collegamenti ipertestuali digitati in collegamenti (se non <a>li ancorerai tu stesso). Questo a volte può ottenere effetti negativi (ad esempio se stai inserendo uno stile su ciascuno dei collegamenti ipertestuali per apparire di colore diverso).

• Fai attenzione al collegamento ipertestuale di un collegamento reale con qualcosa di diverso. Ad esempio, non digitare http://www.google.come quindi collegarlo a https://gmail.com/. Alcuni client contrassegneranno il messaggio come spam o posta indesiderata.

• Salva le tue immagini nel minor numero di colori possibile per risparmiare sulla dimensione.

• Se possibile, incorpora le tue immagini nella tua e-mail. L'e-mail non dovrà raggiungere un server Web esterno per scaricarli e non verranno visualizzati come allegati all'e-mail.

E, infine, prova, prova, prova ! Ogni client di posta elettronica fa le cose in modo diverso rispetto a un browser.

Lo scimpanzé della posta ha un articolo piuttosto carino su cosa non fare. (So ​​che suona nel modo sbagliato per quello che vuoi)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

In generale, tutte le cose che hai appreso e che sono cattive pratiche per il web design sembrano essere l'unica opzione per l'email html.

Le basi sono:

• Avere percorsi assoluti per le immagini (ad es. Https://stackoverflow.com/random-image.png )
• Usa le tabelle per il layout (non avrei mai pensato di consigliarlo!)
• Usa gli stili inline (e anche i vecchi css della vecchia scuola, al massimo 2.1, box-shadow non funzionerà per esempio;))

Metti alla prova il maggior numero di client di posta elettronica su cui puoi mettere le mani o usa Litmus come qualcun altro ha suggerito sopra! (merito a Jim)

MODIFICARE :

Mail Chimp ha fatto un ottimo lavoro rendendo questo strumento disponibile per la comunità.

Applica le tue classi CSS ai tuoi elementi html in linea per te!

Oltre alle risposte pubblicate qui, assicurati di leggere questo articolo:

http://24ways.org/2009/rock-solid-html-emails

La risorsa a cui finisco sempre per tornare alle e-mail HTML è la guida CSS di CampaignMonitor .

Poiché la loro attività è orientata esclusivamente alla consegna di e-mail, conoscono le loro cose e chiunque lo farà

'Fraid così. Vorrei creare una pagina HTML con un foglio di stile, quindi utilizzare jQuery per applicare il foglio di stile all'attrazione di stile di ciascun elemento. Qualcosa come questo:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

Quindi copia il DOM e usalo nell'e-mail.

Trovo che la mappatura delle immagini funzioni abbastanza bene. Se hai intestazioni o piè di pagina che sono immagini assicurati di applicare un bgcolor = "riempi lo spazio vuoto" perché nella maggior parte dei casi Outlook non caricherà l'immagine e ti verrà lasciata un'intestazione trasparente. Se almeno si designa un colore che funziona con la sensazione generale dell'e-mail, sarà meno scioccante per l'utente. Non tentare mai di utilizzare fogli di stile. O CSS a tutti! Basta evitarlo.

A seconda che tu stia copiando contenuti da una parola o da un documento google condiviso assicurati di (comando + F) Trova tutti i (') e (") e sostituiscili nel tuo software di editing (specialmente dreemweaver) perché verranno visualizzati come codice e non va bene.

ALT è il tuo migliore amico. usa il tag ALT per aggiungere del testo a tutte le tue immagini. Perché le probabilità sono che non si caricheranno bene. E quel testo ALT è ciò che induce le persone a fare clic sul pulsante (vedi immagini). Definisci anche larghezza, altezza delle immagini e rendi il boarder 0 in modo da non creare strane linee intorno all'immagine.

Prendi in considerazione la possibilità di modificare tutte le immagini in Photoshop con un bordo 15px su ciascun lato (rendi lo sfondo trasparente e salva come PNG 24) dell'immagine. A volte i client di posta elettronica non leggono gli stili di riempimento applicati alle immagini in modo da evitare strane formattazioni!

Inoltre ho trovato la riga sotto i link particolarmente fastidiosa quindi se applichi <style = "text-decoration: none; color: #whats color che vuoi qui!" > rimuoverà la linea e ti darà l'aspetto desiderato.

Ci sono molte cose che possono davvero rovinare l'aspetto generale.