it-swarm-tr.com

Gmail için HTML e-postası oluşturma

Dahili bir stil sayfası kullanan bir HTML e-postası oluşturuyorum, yani.

<!doctype html>
<html>
<head>
  <style type="text/css">
    h2.foo {color: red}    
  </style>
</head>
<body>
 <h2 class="foo">Email content here</foo>
</body>
</html>

Gmail’de görüntülendiğinde, dahili stil sayfasındaki tüm stiller göz ardı edilir. Görünüşe göre Gmail, satır içi kurallar dışındaki tüm stilleri yoksayar.

 <h2 style="color: red">Email content here</foo>

Bu, Gmail ile görüntülendiğinde HTML e-postaları stillendirmek için tek seçeneğim mi?

83
Dónal

Her şey için satır içi stilleri kullanın. Bu site sınıflarınızı satır içi stillere dönüştürür: http://premailer.dialect.ca/

61
substate

Gmail, ana alandaki stil etiketleri için temel destek vermeye başladı. Henüz resmi bir şey bulamadınız, ancak kendiniz kolayca deneyebilirsiniz.
Sınıf ve kimlik seçicilerini görmezden geliyor gibi görünüyor, ancak temel eleman seçicileri çalışıyor.

<!doctype html>
<html>
  <head>
    <style type="text/css">
      p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}  
    </style>
  </head>
  <body>
    <p>Email content here</p>
  </body>
</html>

posta gövdesini içeren div ile sınırlı olarak kendi baş bölgesinde bir stil etiketi oluşturacak

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>
11
fuchs777

Buradaki cevaplar bugün 30 Eylül 2016'dan itibaren modası geçmiş. Gmail şu anda style'daki head etiketi için destek desteği ve medya sorguları için. Gmail tek endişe kaynağınızsa, modern bir geliştirici gibi sınıfları kullanmak güvenlidir!

Başvuru için, RESMI GMAIL CSS BELGELERI kontrol edebilirsiniz.

Yan not olarak, Gmail, style ( başvuru , yine de güncelleştirilinceye kadar) desteklemeyen tek büyük müşteriydi. Bu, neredeyse stilleri satır içi yapmayı güvenle durdurabileceğiniz anlamına gelir. Daha belirsiz müşterilerden bazıları hala onlara ihtiyaç duyabilir. 

11
Matthew Johnson

E-posta göndermeye yönelik hizmetlerin ve araçların sizin için CSS'nizi sıraya koyabileceğini ve <style> etiketlerindeki CSS’nin Gmail’de çalışmasına izin verebileceğini unutmayın.

Örneğin, MailChimp ile e-posta gönderiyorsanız, <style> etiketlerinden gelen CSS'niz varsayılan olarak otomatik olarak satır içine alınacaktır. Mandrill ile, Ayarlar sekmesinin "Varsayılanları Gönderme" bölümündeki "HTML E-postalarında Satır İçi CSS Stilleri" kutusunu işaretleyerek bu işlevi etkinleştirebilirsiniz (varsayılan olarak performans nedenleriyle .

Image showing how to do this in Mandrill

2
Mark Amery

Sınıfları ve satır içi stilleri destekleyen herkesle aynı fikirdeyim. Bunu şimdiye kadar öğrenmiş olabilirsiniz, ancak stil sayfanızda tek bir hata varsa, Gmail bunu dikkate almaz.

CSS’nizin mükemmel olduğunu düşünebilirsiniz, çünkü çok sık yaptınız, neden CSS’imde hatalar olsun ki? CSS Doğrulayıcı ile çalıştırın (örneğin http://www.css-validator.org/ ) ve ne olduğunu görün. Bunu bazı Gmail ekran sorunlarıyla karşılaştıktan sonra yaptım ve şaşırdım ki, birkaç Microsoft Outlook'a özgü stil bildirimi hata olarak geldi.

Bana anlamlı geldiği için stil sayfalarından kaldırdım ve şöyle bir only for Microsoft kod bloğuna koydum.

<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

Bu sadece basit bir örnek, ama kim bilir, bir süre işe yarayabilir.

1
Shawn Spencer

Diğerlerinin dediği gibi, bazı e-posta programları css stillerini okumaz. Zaten yazılan bir web e-postanız varsa, zurb'dan tüm stillerinizi sıraya koymak için aşağıdaki aracı kullanabilirsiniz:

http://zurb.com/ink/inliner.php

Bu, mailchimp, kampanya izleyicisi vb. Gibi yukarıda belirtilen şablonları kullandığınızda, bazı e-posta programlarında çalışmayacağınız gibi, oldukça kullanışlı olur. Bu araç, okuyacak olan posta programları için stil bölümünüzden çıkar ve istediğiniz biçimde daha fazla okunabilirlik elde etmek için tüm stilleri sıraya koyar.

0
Chad Dupuis