1. casa
  2. Domanda e risposta
  3. Best practice e considerazioni sulla scrittura di e-mail in HTML

Best practice e considerazioni sulla scrittura di e-mail in HTML

2010-02-09 8 views
68

Ho sviluppato siti Web per oltre un decennio, ma ho scoperto rapidamente che molte delle mie abitudini nello sviluppo per il Web sono inutili quando si sviluppano per i client di posta elettronica. Ciò mi ha causato un'enorme quantità di frustrazione, quindi ho pensato di porre una domanda che avrebbe potuto far emergere le migliori pratiche e le considerazioni necessarie per gli altri come me che potrebbero trovarsi a progettare per gmail, outlook, ecc. Di volta in volta.Best practice e considerazioni sulla scrittura di e-mail in HTML

Esempio:<style>...</style> vs CSS in linea.

In breve: cosa trasferisce dal mondo web all'e-mail e cosa no.

fonte

2010-02-09 Sampson

risposta

5

Css e tabelle in linea - pensa allo sviluppo del Web intorno al 2000 e starai bene. Il monitoraggio della campagna ha una risorsa eccellente per ciò che i client email possono gestire. Utilizzare anche http://www.emailonacid.com/ per i test - salva dover inviare un sacco di test.

fonte

2010-02-09 14:44:02 matpol

+0

anche alcune linee guida fornite da MailChimp qui: http://www.mailchimp.com/articles/email_marketing_guide/ –

27

Ho fatto questi (abbastanza volte) per il mio lavoro per un po 'di tempo. Ci sono molte insidie ​​con e-mail HTML. Diversi client di posta elettronica rendono l'HTML in modo diverso l'uno dall'altro e rendono IE6 un aspetto avanzato.

Ecco un riassunto di ciò che ho imparato finora.

  • Usa in linea CSS: Stili non sono sempre supportate.
  • Usa layout di tabella: lo so, ma i layout div sono dipendenti dal css e molti client di posta elettronica non possono farcela.
  • Non utilizzare il rowspan: ciò causa strani problemi di spaziatura.
  • Non utilizzare immagini di sfondo: il supporto per questi è limitato.
  • Tag immagine di stile con "display: block": questo risolve i problemi di spaziatura con hotmail.
  • Se si utilizzano più tabelle, annidarle in una tabella padre: ciò arresta problemi di spaziatura più strani.
  • Non utilizzare Javascript: Ancora non supportato molto bene.
  • Assicurati che la tua email sia leggibile senza immagini: L'utente non può caricarli.
  • Fornire una versione online e collegarlo ad esso: questo consente agli utenti di vedere il contenuto previsto, anche se il loro client di posta elettronica è terribile.
  • Test, test, test: Solo perché funziona in un client di posta elettronica non significa che funzioni in altri. Un grande ha ya è Outlook 2007. Usa la parola per il rendering HTML (sigh).

Questo è lontano da un elenco completo, ma dovrebbe impostare la maggior parte delle persone sulla strada giusta.

fonte

2010-02-09 14:56:02 Magpie

0

Questo è un bene troppo, in modo da vedere che cosa CSS in linea è supportata in del browser che cosa e-mail: (! Google) http://www.campaignmonitor.com/css/

I e anche raccomando litmusapp. Questo è un buon strumento per controllare le cose.

fonte

2010-05-28 09:17:08 jos

91

Questo sembra un ottimo posto per elencare alcune risorse per chiunque cerchi di imparare l'e-mail HTML. Questo è (probabilmente) l'elenco più completo di risorse email HTML che troverai sul web. Buon apprendimento.

Getting Started Guide:

supporto CSS & Guide generali:

si dovrebbe sempre inline tuo CSS in html-mail.Ecco un elenco di CSS Inlining Tools

Guide Responsive:

Templates & Frameworks:

Responsive Esempi alternative:

anche il link Responsive Ted Goas sopra è un esempio eccellente fluido.

Risoluzione dei problemi & Generale Guide:

È necessario utilizzare VML per ottenere immagini di sfondo che funzionano in Outlook (ad eccezione di in the body tag). Qui ci sono alcuni link VML:

fonte

2014-01-29 17:04:18 John

 Problemi correlati

  • Nessun problema correlato^_^