จัดแต่งทรงผมอีเมล HTML สำหรับ Gmail

Question 1

ฉันกำลังสร้างอีเมล html ที่ใช้สไตล์ชีตภายในเช่น

<!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 ดูเหมือนว่าสไตล์ทั้งหมดในสไตล์ชีตภายในจะถูกละเว้น ดูเหมือนว่า Gmail จะละเว้นรูปแบบทั้งหมดนอกเหนือจากกฎแบบอินไลน์เช่น

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

นี่เป็นตัวเลือกเดียวของฉันในการจัดรูปแบบอีเมล HTML เมื่อดูด้วย Gmail หรือไม่

Question 2

คำตอบที่นี่จะล้าสมัย ณ วันนี้ 30 กันยายน 2016 ขณะนี้ Gmail จะกลิ้งออกการสนับสนุนสำหรับstyleแท็กในheadเช่นเดียวกับคำสั่งสื่อ หาก Gmail เป็นข้อกังวลเดียวของคุณคุณก็ปลอดภัยที่จะใช้ชั้นเรียนเช่นเดียวกับนักพัฒนาซอฟต์แวร์สมัยใหม่!

สำหรับการอ้างอิงคุณสามารถตรวจสอบอย่างเป็นทางการเอกสาร Gmail CSS

โปรดทราบว่า Gmail เป็นไคลเอนต์หลักรายเดียวที่ไม่รองรับstyle( อ้างอิงจนกว่าจะมีการอัปเดต) นั่นหมายความว่าคุณแทบจะหยุดวางสไตล์ในบรรทัดได้อย่างปลอดภัย ไคลเอนต์ที่คลุมเครือบางรายอาจยังต้องการพวกเขาอยู่

Question 3

ใช้รูปแบบอินไลน์สำหรับทุกสิ่ง ไซต์นี้จะแปลงคลาสของคุณเป็นแบบอินไลน์: http://premailer.dialect.ca/

Question 4

Gmail เริ่มการสนับสนุนขั้นพื้นฐานสำหรับแท็กรูปแบบในส่วนหัว ไม่พบว่ายังไม่มีอะไรเป็นทางการ แต่คุณสามารถลองด้วยตัวเองได้อย่างง่ายดาย
ดูเหมือนว่าจะไม่สนใจตัวเลือกคลาสและ id แต่ตัวเลือกองค์ประกอบพื้นฐานทำงานได้

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

มันจะสร้างแท็กสไตล์ในพื้นที่ส่วนหัวของตัวเองโดย จำกัด เฉพาะ div ที่มีเนื้อหาอีเมล

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

Question 5

ฉันเห็นด้วยกับทุกคนที่สนับสนุนชั้นเรียนและรูปแบบอินไลน์ ตอนนี้คุณอาจได้เรียนรู้สิ่งนี้แล้ว แต่หากสไตล์ชีตมีข้อผิดพลาดเพียงครั้งเดียว Gmail จะไม่สนใจ

คุณอาจคิดว่า CSS ของคุณสมบูรณ์แบบเพราะคุณทำบ่อยมากทำไมฉันถึงมีข้อผิดพลาดใน CSS ของฉัน? เรียกใช้ผ่าน CSS Validator (ตัวอย่างเช่นhttp://www.css-validator.org/ ) และดูว่าเกิดอะไรขึ้น ฉันทำเช่นนั้นหลังจากพบปัญหาการแสดงผลของ Gmail และทำให้ฉันประหลาดใจการประกาศรูปแบบเฉพาะของ Microsoft Outlook หลายรายการแสดงเป็นข้อผิดพลาด

ซึ่งเข้าท่าสำหรับฉันฉันจึงลบมันออกจากสไตล์ชีตและใส่ไว้ในonly for Microsoftบล็อกโค้ดดังนี้:

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

นี่เป็นเพียงตัวอย่างง่ายๆ แต่ใครจะรู้ว่ามันอาจมีประโยชน์ในบางครั้ง

Question 6

อย่างที่คนอื่น ๆ บอกไว้โปรแกรมอีเมลบางโปรแกรมจะไม่อ่านรูปแบบ css หากคุณมีอีเมลทางเว็บอยู่แล้วคุณสามารถใช้เครื่องมือต่อไปนี้จาก zurb เพื่อแทรกสไตล์ทั้งหมด

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

สิ่งนี้มีประโยชน์อย่างมากเมื่อใช้เทมเพลตเช่นที่กล่าวถึงข้างต้นจาก mailchimp การตรวจสอบแคมเปญ ฯลฯ ตามที่คุณพบจะใช้ไม่ได้ในโปรแกรมอีเมลบางโปรแกรม เครื่องมือนี้จะออกจากส่วนสไตล์ของคุณสำหรับโปรแกรมเมลที่จะอ่านและวางสไตล์ทั้งหมดไว้ในบรรทัดเพื่อให้อ่านง่ายขึ้นในรูปแบบที่คุณต้องการ

Question 7

โปรดทราบว่าบริการและเครื่องมือในการส่งอีเมลอาจสอดแทรก CSS ของคุณให้คุณได้โดยอนุญาตให้ใช้ CSS ใน <style>แท็กทำงานใน Gmail ได้

ตัวอย่างเช่นหากคุณส่งอีเมลด้วย MailChimp CSS ของคุณจาก<style>แท็กจะอินไลน์โดยอัตโนมัติตามค่าเริ่มต้น ด้วย Mandrill คุณสามารถเปิดใช้งานฟังก์ชันนี้ได้ (แม้ว่าจะปิดใช้งานโดยค่าเริ่มต้นด้วยเหตุผลด้านประสิทธิภาพ ) โดยทำเครื่องหมายที่ช่อง "Inline CSS Styles in HTML Emails" ในส่วน "Sending Defaults" ของแท็บการตั้งค่า:

ภาพแสดงวิธีการทำใน Mandrill

Question 8

ฉันมีปัญหาเดียวกันขณะออกแบบเทมเพลตใน Mailjet วิธีแก้ปัญหาคือการย่อโค้ด CSS ภายใน<style>แท็ก