Gmail için HTML e-postayı şekillendirme

99

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 stillerin göz ardı edildiği görülüyor. Görünüşe göre Gmail, satır içi kurallar dışındaki tüm stilleri yok sayıyor, ör.

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

Gmail ile görüntülendiğinde HTML e-postalarının stilini belirlemek için tek seçeneğim bu mu?

— Dónal
kaynak

14

Evet, çoğu web tabanlı e-posta istemcisi dahili stil sayfalarını tanımadığından, bu sadece bir tanesidir. Aslında satır içi stil oluşturma, html haber bültenleri tasarlamanın önerilen yoludur.

— Mike

Bildiğim kadarıyla, e-posta okuyucularının html 3.2 ve css 1.1'i desteklemesi beklenebilir.

E-postanızı nasıl oluşturdunuz? Demek istediğim, niyet yaratma kodunu eklediniz mi?

— RaphMclee

7

Açılış <html>etiketi kullanmak genellikle iyi bir uygulamadır ;)

— Zaz

1

Gmail berbat. iOS uygulaması ve Web tabanlı uygulama da!

— Adrian Florescu

19

Buradaki yanıtlar bugün 30 Eylül 2016 itibarıyla geçerliliğini yitirmiş durumda. Gmail şu anda içindeki etiketin yanı sıra medya sorgularını da destekliyor . Tek endişeniz Gmail ise, modern bir geliştirici gibi sınıfları güvenle kullanabilirsiniz!stylehead

Referans için, resmi gmail CSS belgelerine bakabilirsiniz .

Bir yan not olarak, Gmail desteklemeyen tek büyük istemciydi style( yine de güncellenene kadar referans ). Bu, stilleri sıraya koymayı neredeyse güvenli bir şekilde durdurabileceğiniz anlamına gelir . Daha belirsiz müşterilerden bazıları hala onlara ihtiyaç duyabilir.

— Matthew Johnson
kaynak

1

Görünüşe göre hala çalışmıyor. Litmus'da denedik ama işe yaramıyor. Özel bir nedeni var mı?

— Arian

@ArianHosseinzadeh Ne çalışmıyor? Konuyla ilgili belgelerine bir referans eklendi.

— Matthew Johnson

Litmus'da denedik ve satır içi olmayan stilleri yok sayıyor. <style> Gmail'i duyurduktan sonra denediniz mi? işe yaradı mı ?

— Arian

1

@ArianHosseinzadeh Dokümanlarındaki örneklerinden bir kopyala-yapıştır yaptım ve putsmail aracılığıyla çalıştırdım . Gmail'de stiller görünüyor. Android gmail uygulamasını ve gmail'i bir Chrome tarayıcısında doğruladım. Tahminimce Litmus önizlemeleri değişikliği yansıtacak şekilde güncellenmedi.

— Matthew Johnson

1

Stillerimin neden işe yaramadığını merak ediyordum ve onları bodyetiket yerine etiketin içine yerleştirdiğimi fark ettim head.

— palswim

67

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ürecektir: http://premailer.dialect.ca/

— ikame
kaynak

2

Bu site harika. Uyarıları gösterir ve size düz metin çıktısının yanı sıra HTML'nizi yeniden tasarlar.

— jamesbar2

1

Bu Premailer Ruby'dedir, kaynak: github.com/premailer/premailer . Python'da bir tane daha var: premailer.io kaynak: github.com/peterbe/premailer , her ikisi de açık kaynak.

— Maxime R.

1

Bu cevap artık doğru değil. gmail stilleri ve sınıfları destekler ve konuyla ilgili resmi belgeleri vardır - aşağıdaki Matthew Johnson'ın cevabına bakın.

— mikemaccana

12

Gmail, baş alanındaki stil etiketleri için temel desteği başlattı. Henüz resmi bir şey bulunamadı ama kendiniz kolayca deneyebilirsiniz.
Sınıf ve kimlik seçicilerini görmezden geliyor gibi görünüyor, ancak temel öğe 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ı kendi baş alanında bir stil etiketi oluşturacaktır

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

— fuchs777
kaynak

Yine de biraz utanç verici olan Medya sorgularını desteklemiyor. Sınıflar ve kimlikler de yararlıdır :)

— Eoin

2

Artık medya sorguları da yapıyorlar ve css şekillendirme için daha eksiksiz destek sağlıyorlar. stackoverflow.com/questions/39759764/…

— crowmagnumb

7

Sınıfları VE satır içi stilleri destekleyen herkese katılıyorum. 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ü bunu çok sık yaptınız, CSS'imde neden hatalarım olsun? CSS Doğrulayıcısı (örneğin http://www.css-validator.org/ ) aracılığıyla çalıştırın ve ne olduğunu görün. Bunu bazı Gmail görüntüleme sorunlarıyla karşılaştıktan sonra yaptım ve şaşırtıcı bir şekilde Microsoft Outlook'a özgü birkaç stil beyanı hata olarak göründü.

Bu bana mantıklı geldi, bu yüzden onları stil sayfasından çıkardım ve şöyle bir only for Microsoftkod 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.

— Shawn Spencer
kaynak

Teşekkürler, geçersiz CSS ile ilgili kısım bana çok zaman kazandırdı. Hala buralardaysanız lütfen bana bildirin.

— Gölge Sihirbazı Sizin İçin Kulak

1

Merhaba @ShadowWizard. Bir süre yoktum ama döndüm. Sana biraz zaman kazandırmasına sevindim.

— Shawn Spencer

Şerefe, sadece ödülün boşa gitmeyeceğinden emin olmak istedim. :-)

— Shadow Wizard is Ear For You

2

Diğerlerinin dediği gibi, bazı e-posta programları css stillerini okumaz. Zaten yazılmış bir web e-postanız varsa, tüm stillerinizi satır içi yapmak için aşağıdaki aracı zurb'den kullanabilirsiniz:

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

Bu, mailchimp'den, kampanya monitöründen vb. Yukarıda bahsedilenler gibi şablonları kullanırken, bulduğunuz gibi bazı e-posta programlarında çalışmayacağı için son derece kullanışlıdır. Bu araç, onu okuyacak posta programları için stil bölümünüzü bırakır ve istediğiniz formatta daha evrensel okunabilirlik elde etmek için tüm stilleri satır içine alır.

— Chad Dupuis
kaynak

Satır içi bağlantı için teşekkür ederiz.

— Shawn Spencer

2

E-posta göndermeye yönelik hizmetlerin ve araçların CSS'nizi sizin için satır içi olarak yerleştirebileceğini <style>ve Gmail'de etiketlerde CSS'nin çalışmasına izin verebileceğini unutmayın .

Örneğin, MailChimp ile e-posta gönderiyorsanız, <style>etiketlerdeki CSS'niz varsayılan olarak otomatik olarak satır içine alınır. Mandrill ile, Ayarlar sekmesinin "Gönderme Varsayılanları" bölümündeki "HTML E-postalarda Satır İçi CSS Stilleri" kutusunu işaretleyerek bu işlevi etkinleştirebilirsiniz ( performans nedenleriyle varsayılan olarak devre dışı bırakılmış olsa da ):

Mandrill'de bunun nasıl yapılacağını gösteren resim

— Mark Amery
kaynak

0

Mailjet'te bir şablon tasarlarken de aynı sorunu yaşadım. Sorunun çözümü, <style>etiketlerin içindeki CSS kodu küçültüldü .

— Vojtěch Remiš
kaynak