Best practice per lo stile di email HTML



2 Answers

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

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

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

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

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

  • Fai attenzione a collegare ipertestuali a un collegamento reale con qualcosa di diverso. Ad esempio, non digitare http://www.google.com e quindi collegarlo a https://gmail.com/ . Alcuni client contrassegneranno il messaggio come Spam o Junk.

  • Salva le tue immagini nel minor numero possibile di colori per risparmiare sulle dimensioni.

  • Se possibile, incorpora le tue immagini nella tua email. L'e-mail non dovrà raggiungere un server Web esterno per scaricarli e non appariranno 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.

Question

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




'Così male. Creo una pagina HTML con un foglio di stile, quindi uso jQuery per applicare il foglio di stile allo stile attr 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 utilizzalo nell'e-mail.







Related



Tags

html html   css css   email