HTML e-postalarını şekillendirmek için en iyi uygulamalar [kapalı]

Bir e-posta bülteni için bir HTML şablonu tasarlıyorum. Birçok e-posta istemcisinin bağlantılı stil sayfalarını yoksaydığını ve diğerlerinin (Gmail dahil) CSS engelleme bildirimlerini tamamen yok saydığını öğrendim. Satır içi stil özellikleri benim tek seçimim mi? HTML e-postalarını şekillendirmek için en iyi uygulamalar nelerdir?

Campaign Monitor, çeşitli posta istemcileri arasında nelerin desteklendiğini ve nelerin olmadığını ayrıntılı olarak gösteren mükemmel bir destek matrisine sahiptir .

Bir e-postanın birkaç istemcide nasıl göründüğünü ve filtrelere vb. Yakalanıp yakalanmadığını görmek için Litmus gibi bir hizmet kullanabilirsiniz .

Daha önce HTML e-posta savaşında bulundum. E-posta istemcileri arasında maksimum uyumluluk için stil hakkında bazı ipuçları.

• Satır içi stiller en iyi arkadaşınızdır. Kesinlikle stil sayfalarını bağlamayın ve bir <style>etiket kullanmayın (GMail, örneğin, etiketi ve tüm içeriğini etiketler).

• Daha iyi kararınıza karşı, tabloları kullanın ve kötüye kullanın . <div>sadece kesmeyecek (özellikle Outlook'ta).

• Arka plan resimlerini kullanmayın , sivilceli ve sizi rahatsız edecektir.

• Bazı e-posta istemcilerinin, yazılan köprüleri otomatik olarak bağlantılara dönüştüreceğini unutmayın ( <a>kendiniz demirlemezseniz ). Bu bazen olumsuz etkiler elde edebilir (örneğin, köprülerin her birine farklı bir renk görünmesi için bir stil koyuyorsanız).

• Gerçek bir bağlantıyı farklı bir şeyle köprülemeye dikkat edin. Örneğin, yazmayın http://www.google.comve üzerine bağlanmayın https://gmail.com/. Bazı istemciler iletiyi Spam veya Önemsiz olarak işaretler.

• Olarak resimlerinizi kaydetme mümkün olduğunca az renkler boyutuna kaydedin.

• Mümkünse resimlerinizi e-postanıza ekleyin. E-postayı indirmek için harici bir web sunucusuna ulaşmak zorunda kalmaz ve e-postaya ek olarak görünmez.

Ve son olarak, test et, test et, test et ! Her e-posta istemcisi, işleri bir tarayıcıdan farklı şekilde yapar.

Posta şempanzesi, ne yapmama konusunda oldukça güzel bir makaleye sahiptir. (İstediğiniz şey için yanlış bir yol geldiğini biliyorum)

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

Genel olarak web tasarımı için kötü uygulama öğrendim her şey html e-posta için tek seçenek gibi görünüyor.

Temel bilgiler:

• Resimler için mutlak yollara sahip olun (örn. Https://stackoverflow.com/random-image.png )
• Düzen için tabloları kullanın (bunu tavsiye edeceğini asla düşünmemiştim!)
• Satır içi stiller kullanın (ve eski okul css de en fazla 2.1, kutu-gölge örneğin çalışmaz;))

Sadece ellerinizi alabildiğiniz kadar çok e-posta istemcisini test edin veya yukarıda önerilen bir başkası olarak Litmus kullanın! (Jim'e kredi)

DÜZENLE :

Posta şempanze, bu aracı topluluğun kullanımına sunarak harika bir iş çıkardı .

CSS sınıflarınızı sizin için html öğelerinize satır içi uygular!

Burada yayınlanan cevaplara ek olarak, bu makaleyi okuduğunuzdan emin olun:

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

HTML e-postaları hakkında her zaman geri döndüğüm kaynak CampaignMonitor'un CSS kılavuzudur .

İşleri yalnızca e-posta teslimi etrafında olduğundan, herkesin yanı sıra eşyalarını da biliyorlar

`` Öyle doluydu. Bir stil sayfası ile bir HTML sayfası yapmak, daha sonra stil sayfasını her öğenin stil attr uygulamak için jQuery kullanın. Bunun gibi bir şey:

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]);
    });
}

Ardından DOM'u kopyalayın ve e-postada kullanın.

Görüntü haritalamanın gayet iyi çalıştığını düşünüyorum. Görüntü olan üstbilgileriniz veya altbilgileriniz varsa, bgcolor = "boşluğu doldur" u uyguladığınızdan emin olun, çünkü çoğu durumda görünüm görüntüyü yüklemez ve saydam bir üstbilgiyle kalırsınız. En azından e-postanın tüm hissi ile çalışan bir renk belirlerseniz, kullanıcı için daha az şok olacaktır. Kesinlikle herhangi bir şekillendirme sayfası kullanmayın. Veya hiç CSS! Sadece kaçının.

Bir kelimeden veya paylaşılan Google Dokümanından içerik kopyaladığınıza bağlı olarak, (command + F) Tüm (') ve (") öğelerini bulup bunları düzenleme yazılımınızda (özellikle dreemweaver) değiştirdiğinizden emin olun çünkü kod olarak görünecektir ve bu iyi değil.

ALT en iyi arkadaşın. tüm resimlerinize metin eklemek için ALT etiketini kullanın. Çünkü olasılıklar doğru yüklenmeyecekler. Ve bu ALT metni, insanların (resimlere bakın) düğmesine tıklamasını sağlayan şeydir. Ayrıca resimlerinizi Genişlik, Yükseklik tanımlayın ve biniciyi 0 yapın, böylece resminizin etrafında garip çizgiler elde edemezsiniz.

Photoshop'taki tüm görüntüleri, görüntünün her iki tarafında (arka planı saydam hale getirin ve PNG 24 olarak kaydedin) bir 15px boarder ile düzenleyin. Bazen e-posta istemcileri, görüntülere uyguladığınız dolgu stillerini okumaz, böylece garip biçimlendirmeyi önler!

Ayrıca <style = "text-decoration: none; color: #herhangi bir renk burada isterseniz!" > çizgiyi kaldıracak ve size istenen görünümü verecektir.

Gerçekten ile tüm görünüm ve his üzerinde karışıklık bir sürü var.