Styling email HTML untuk Gmail

99

Saya membuat email html yang menggunakan lembar gaya internal, yaitu

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

Jika dilihat di Gmail, sepertinya semua gaya di stylesheet internal diabaikan. Tampaknya Gmail mengabaikan semua gaya selain aturan sebaris, mis

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

Apakah ini satu-satunya pilihan saya untuk mengatur gaya email HTML saat dilihat dengan Gmail?

— Dónal
sumber

14

Ya, ini adalah satu-satunya karena banyak klien email berbasis web tidak mengenali lembar gaya internal. Sebenarnya styleing inline adalah cara yang direkomendasikan untuk mendesain newsletter html.

— Mike

Sejauh yang saya tahu, pembaca email diharapkan mendukung html 3.2 dan css 1.1.

Bagaimana Anda menghasilkan email Anda? Maksud saya, apakah Anda menambahkan kode untuk membuat maksud?

— RaphMclee

7

Biasanya praktik yang baik untuk menggunakan <html>tag pembuka ;)

— Zaz

1

Gmail payah. Aplikasi iOS dan aplikasi berbasis web juga!

— Adrian Florescu

19

Jawaban di sini sudah usang, mulai hari ini 30 Sep 2016. Gmail saat ini meluncurkan dukungan untuk styletag di head, serta kueri media. Jika Gmail adalah satu-satunya perhatian Anda, Anda aman menggunakan kelas seperti pengembang modern!

Untuk referensi, Anda dapat memeriksa dokumen CSS resmi gmail .

Sebagai catatan tambahan, Gmail adalah satu-satunya klien utama yang tidak mendukung style( referensi , sampai mereka tetap memperbaruinya). Itu berarti Anda hampir dapat dengan aman berhenti menempatkan gaya sebaris. Beberapa klien yang tidak jelas mungkin masih membutuhkannya.

— Matthew Johnson
sumber

1

Sepertinya masih belum berfungsi. Kami mencobanya di Litmus, tetapi tidak berhasil. Apakah ada alasan khusus?

— Arian

@ArianHosseinzadeh Apa yang tidak berhasil? Menambahkan referensi ke dokumentasi mereka tentang masalah tersebut.

— Matthew Johnson

Kami mencobanya di Litmus, dan mengabaikan stylings non-inline. Sudahkah Anda mencoba <style> untuk gmail setelah mereka mengumumkannya? apa itu bekerja ?

— Arian

1

@ArianHosseinzadeh Saya melakukan copy-n-paste dari contoh mereka di dokumen mereka, dan menjalankannya melalui putmail . Gaya ditampilkan di gmail. Saya memverifikasi aplikasi gmail Android dan gmail di browser Chrome. Dugaan saya adalah bahwa pratinjau lakmus belum diperbarui untuk mencerminkan perubahan.

— Matthew Johnson

1

Saya bertanya-tanya mengapa gaya saya tidak berfungsi, dan menyadari bahwa saya telah menempatkannya di dalam bodytag, bukan di headtag.

— palswim

67

Gunakan gaya sebaris untuk semuanya. Situs ini akan mengonversi kelas Anda ke gaya sebaris: http://premailer.dialect.ca/

— substate
sumber

2

Situs ini luar biasa. Menampilkan peringatan dan memberi Anda keluaran teks biasa serta menyusun ulang HTML Anda.

— jamesbar2

1

Premailer ini ada di Ruby, sumber: github.com/premailer/premailer . Ada satu lagi di Python: premailer.io source: github.com/peterbe/premailer , keduanya open source.

— Maxime R.

1

Jawaban ini tidak lagi akurat. gmail mendukung gaya dan kelas serta memiliki dokumen resmi tentang subjek tersebut - lihat jawaban Matthew Johnson di bawah.

— mikemaccana

12

Gmail memulai dukungan dasar untuk tag gaya di area kepala. Belum menemukan apa pun yang resmi, tetapi Anda dapat mencobanya sendiri dengan mudah.
Tampaknya mengabaikan pemilih kelas dan id tetapi pemilih elemen dasar berfungsi.

<!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>

itu akan membuat tag gaya di area kepalanya sendiri terbatas pada div yang berisi badan surat

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

— fuchs777
sumber

Itu masih tidak mendukung kueri Media meskipun yang agak memalukan. Kelas dan ID juga berguna :)

— Eoin

2

Mereka sekarang melakukan kueri media juga dan dukungan yang lebih lengkap untuk gaya css. stackoverflow.com/questions/39759764/…

— crowmagnumb

7

Saya setuju dengan semua orang yang mendukung kelas DAN gaya sebaris. Anda mungkin telah mempelajarinya sekarang, tetapi jika ada satu kesalahan dalam style sheet Anda, Gmail akan mengabaikannya.

Anda mungkin berpikir bahwa CSS Anda sempurna, karena Anda sudah sering melakukannya, mengapa saya mengalami kesalahan dalam CSS saya? Jalankan melalui Validator CSS (misalnya http://www.css-validator.org/ ) dan lihat apa yang terjadi. Saya melakukannya setelah mengalami beberapa masalah tampilan Gmail, dan yang mengejutkan saya, beberapa deklarasi gaya khusus Microsoft Outlook muncul sebagai kesalahan.

Yang masuk akal bagi saya, jadi saya menghapusnya dari style sheet dan memasukkannya ke dalam only for Microsoftblok kode, seperti:

<!--[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]-->

Ini hanyalah contoh sederhana, tetapi, siapa tahu, ini mungkin berguna suatu saat.

— Shawn Spencer
sumber

Terima kasih, bagian tentang CSS yang tidak valid menghemat banyak waktu saya. Jika Anda masih ada, beri tahu saya.

— Shadow Wizard adalah Ear For You

1

Hai @ShadowWizard. Aku pergi sebentar tapi aku kembali. Senang bisa menghemat waktu.

— Shawn Spencer

Cheers, hanya ingin memastikan bounty tidak terbuang percuma. :-)

— Shadow Wizard adalah Ear For You

2

Seperti yang dikatakan orang lain, beberapa program email tidak akan membaca gaya css. Jika Anda sudah memiliki email web yang ditulis, Anda dapat menggunakan alat berikut dari zurb untuk menyebariskan semua gaya Anda:

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

Ini sangat berguna saat menggunakan template seperti yang disebutkan di atas dari mailchimp, monitor kampanye, dll. Karena, seperti yang Anda temukan, tidak akan berfungsi di beberapa program email. Alat ini meninggalkan bagian gaya Anda untuk program email yang akan membacanya dan meletakkan semua gaya sebaris untuk mendapatkan keterbacaan yang lebih universal dalam format yang Anda inginkan.

— Chad Dupuis
sumber

Terima kasih untuk tautan inlinernya.

— Shawn Spencer

2

Perhatikan bahwa layanan dan alat untuk mengirim email mungkin dapat menyebariskan CSS untuk Anda, memungkinkan CSS dalam <style>tag berfungsi di Gmail.

Misalnya, jika Anda mengirim email dengan MailChimp, CSS dari <style>tag Anda akan disisipkan secara otomatis secara default. Dengan Mandrill, Anda dapat mengaktifkan fungsionalitas ini (meskipun dinonaktifkan secara default karena alasan kinerja ) dengan mencentang kotak "Gaya Inline CSS di Email HTML" di bagian "Mengirimkan Default" pada tab Pengaturan:

Gambar yang menunjukkan cara melakukan ini di Mandrill

— Mark Amery
sumber

0

Saya mengalami masalah yang sama saat mendesain template di Mailjet. Solusi dari masalah ini adalah meminimalkan kode CSS di dalam <style>tag.

— Vojtěch Remiš
sumber