HTML e-posta tasarımı için hangi kurallar var? [kapalı]

Question 1

Pek çok istemcide ve web tabanlı e-posta arayüzlerinde iyi görsel kararlılığı korurken, e-postalarda zengin HTML biçimlendirmesi için hangi yönergeleri verebilirsiniz?

Stack Overflow'daki bir soruya ilgisiz bir cevap önerilir:

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

Aşağıdaki yönergeleri içeren:

Stil sayfasını <body>yerine yerleştirin<head>
Bazı e-posta istemcileri CSS'yi baştan çıkarır, ancak stil bloğu gövdede (geçersiz bir şekilde) ise bırakın.
Hiç mümkün satır içi stilleri kullanın
Gmail olsun içinde, herhangi bir stil şerit olacak <head>veya <body>, ancak onur satır içi stilleri kullanarak atanan style=""niteliği
Tablolara dönün
E-posta standartları, Microsoft Word işleme motorunu kullanan Outlook 2007 sayesinde son yıllarda geriye doğru dev bir adım attı. Stil sayfaları olmadan konumlandırma hakkında öğrendiklerin çoğunu unutun.
Resimlere güvenmeyin
Çoğu istemci ve çoğu web tabanlı e-posta istemcisi, kullanıcı özellikle görüntülenmelerini istemediği sürece resimleri görüntülemeyecektir.

Ayrıca onları nerede okuduğumu hatırlamadığım birkaç "doğrulanmamış" gerçek var.

Tablolarda ikiden fazla iç içe yerleştirme düzeyi kullanmayın
Bu doğru mu. Yaparsam ne olur? Bu konuda boğulan belirli bir müşteri / müşteri var mı?
Hücrelere / tablolara arka plan resimlerini yerleştirirken dikkatli olun
Anladığım kadarıyla, arka plan resminin azalan tabloya / hücreye tamamen yeniden uygulandığı ve sadece "parladığı" durumlarla karşılaşmayabilirsiniz. Yine, doğru mu değil mi? Hangi müşteriler?

Bu listeyi siperlerden daha fazla kılavuz ve deneyimle detaylandırmak istiyorum.

Başka önerilerde bulunabilir misin?

Güncelleme: Özellikle HTML'deki tasarım bölümü için yönergeler ve oradaki tutarlılık istiyorum. İstenmeyen posta filtrelerinden kaçınmaya yönelik genel yönergeler ve ortak nezaket hakkındaki sorular SO'da zaten var.

Question 2

Aslında bu gerçekten bir 'modern bir HTML ve CSS' perspektifinden yaklaşım ise, iyi bir HTML e-posta yapmak zor.

En iyi sonuçlar için 1999 olduğunu hayal edin.

Düzen için tablolara geri dönün (veya tercihen - karmaşık bir düzen denemeyin)
Arka plan resimlerinden korkun (Outlook 2007 ve Gmail'de bozulurlar).
Vücuttaki stil etiketi olayı, Hotmail'in eskiden bunu bu şekilde kabul etmesidir - eminim ki şimdi de çıkarmışlardır. styleCSS kullanmanız gerekiyorsa öznitelikle birlikte satır içi stilleri kullanın.
Tamamen unutun float
Resimlerinizin muhtemelen engelleneceğini unutmayın - kendi yararınıza arka plan ve metin rengi kullanın - resimlerin devre dışı bırakıldığı okunabilir metinler olduğundan emin olun
Bağlantılara çok dikkat edin, özellikle bağlantı metninde URL'ye benzeyen herhangi bir şeye karşı dikkatli olun - 'kimlik avı' filtrelerini kızdıracaksınız (örn. <a href="http://domain.tld">www.someotherdomain.tld</a> . Kötü )
Web posta istemcilerindeki "kıvrımın" sayfanın yukarısında son derece yüksek olma eğiliminde olduğunu unutmayın (1024x768 bir ekranda çoğu arayüz yüz pikselden fazla göstermez) - kimlik bilgilerinizi en üstte, böylece alıcı kim olduğunu biliyor.
Outlook'un son sürümünde, beklediğinizden önemli ölçüde daha dar olan bir "portre" önizleme bölmesi vardır - sabit genişlikli düzenlere karşı çok dikkatli olun, bunları kullanmanız gerekiyorsa, olabildiğince dar yapın.
Düşünme bile böyle flaş, Javascript, SVG, tuval, ya da başka şey.
Çok test edin. Yakın tarihli bir Outlook'ta test ettiğinizden emin olun (işler çok değişti! Artık HTML oluşturma motoru olarak Word kullanıyor ve sakatlandı: Word 2007 HTML / CSS desteği ). Gmail de oldukça titiz. Şaşırtıcı bir şekilde Yahoo'nun web postası, güzel CSS desteğiyle son derece iyi.

İyi şanslar ;)

Diğer soruları yanıtlamak için güncelleyin:

Tablolarda ikiden fazla iç içe yerleştirme düzeyi kullanmayın

Bunun Lotus Notes ile ilgili daha eski bir kılavuz olduğuna inanıyorum. İç içe tablolar iyi olmalı , ancak gerçekten, onlara ihtiyaç duyacak kadar karmaşık bir düzeniniz varsa, muhtemelen yine de sorun yaşarsınız. Düzeninizi basit tutun .

Arka plan resimlerini hücrelere / tablolara yerleştirirken dikkatli olun

Bu, yukarıdakilerle ilgili olabilir ve aynısı geçerlidir, eğer bu kadar karmaşıklaşırsanız, o zaman sorunlarınız olacaktır . Outlook'un son sürümleri arka plan resimlerini hiç desteklemediğinden, bunları tamamen unutmanız önerilir.

Question 3

Her zaman çok parçalı mime kullanın ve düz metin alternatifi sağlayın.

Question 4

Campaign Monitor'ün arkasındaki kişiler , birçok iyi bilginin bulunduğu bir E-posta Standartları Projesi web sitesi de başlattı .

Question 5

Bu şablona bir göz atın, html5boilerplate gibidir, ancak e-postalar için: http://htmlemailboilerplate.com/

Question 6

Bunun sorduğunuz sorudan daha düşük bir seviye olduğunu düşünüyorum, ancak bir html e-postasının mümkün olduğunca çok müşteri tarafından doğru şekilde görüntülenmesini istiyorsanız, geçerli MIME kullandığından emin olun. Özellikle, bir e-postanın geçerli MIME olarak değerlendirilmesi için, başlıklar (kelimenin RFC anlamında) bu başlıkların her ikisini de İÇERMELİDİR:

MIME-Version:
Content-Type:

Çok katı istemciler, bunlardan biri eksikse HTML'nizi ham metin olarak görüntüler. Bunu daha iyi bilmesi gereken kaç büyük çevrimiçi satıcının bunu mahvettiğine şaşıracaksınız (özellikle, MIME Sürümü eksik HTML e-postaları aldım: geçmişte Amazon ve ACM başlıkları)

Question 7

Arka plan resimleri güvenilir değildir.
Pratik olarak zahmetsiz, ancak javascript yok .
Geçerli dosyayı / arabelleği bir e-posta olarak göndermenize veya en azından bir dosyanın içeriğini HTML e-postası olarak göndermenize izin verecek bir program bulmanıza izin veren bir düzenleyici kullanın. e-postalarınızı HTML'yi kopyalayıp outlook'a (veya bu konuyla ilgili başka bir posta programına) yapıştırarak test etmeyin .

Question 8

Üç kelimelik tavsiye: test edin, test edin, test edin.

LitmusApp.com'un e-posta test hizmetine göz atın. Onlara bir mesaj gönderirsiniz ve bunu bir grup istemcide işlerler ve size sonuçların ekran görüntülerini gösterirler. Mükemmel değil ama oldukça iyi.

(Bu arada, 8.0'dan önceki Lotus Notes gerçekten HTML postası için gerçekten kokuyor)

Ayrıca, yalnızca satır içi CSS stillerinin ötesinde, mümkün olan her yerde etiketlere geçmenizi öneririm.

Question 9

Görsellerinizi gömün, onlara bağlantı vermeyin.

Bu kötü :

<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>

Bu iyi :

<img src=cid:myImage/>

Evet, tuhaf görünüyor, ancak e-postalara resim yerleştirmeyle ilgili bu kılavuzu inceleyin .

Question 10

Bir stil bloğu ekliyorsanız, yeni bir satıra ".classname" veya "" ile başlamayın. herhangi bir şey. Dönemden önce bir kuşak veya başka bir şey koyun. Bunu yapmazsanız, bazı web posta sistemleri stil sayfalarınızı düzgün şekilde görüntülemeyecektir.

Birçok kişi yanlış bir şekilde, bu davranış nedeniyle e-postalarda CSS bloklarını kullanamayacaklarını varsaymıştır ... IIRC "." SMTP için gövde sınırlayıcıdır. Sistemler, bir iletinin içeriğinin yeni bir ileti olarak yanlış tanınmasını önlemek için posta depolarında kaçma eğiliminde olacaktır. Bunun ele alınma şekli, nokta ile yeni bir satırda başlayan herhangi bir stili bozma eğilimindedir.