• โฮมเพจ
  • บทความ
  • การตลาดทางอีเมล
  • อัปเดต: Gmail เปิดตัวการสนับสนุนสำหรับการออกแบบที่ตอบสนอง การจัดรูปแบบแบบอักษรที่ได้รับการปรับปรุง + CSS สำหรับการเข้าถึง

อัปเดต: Gmail เปิดตัวการสนับสนุนสำหรับการออกแบบที่ตอบสนอง การจัดรูปแบบแบบอักษรที่ได้รับการปรับปรุง + CSS สำหรับการเข้าถึง

เผยแพร่แล้ว: 2016-09-30

ในช่วงเช้าตรู่ของวันที่ 30 กันยายน Gmail ได้เริ่มเปิดตัวการเปลี่ยนแปลงเพื่อรองรับสิ่งที่โลกของอีเมลเรียกร้องมานาน: สไตล์ที่ฝังตัวและการออกแบบที่ตอบสนอง

เรากำลังพูดเรื่องอะไรอยู่?

Gmail ไม่เคยรองรับคลาสหรือรหัสใน <head> ของอีเมล ซึ่งบังคับให้ผู้ออกแบบอีเมลใช้ CSS แบบอินไลน์เพื่อจัดรูปแบบอีเมล ตอนนี้ Gmail จะรองรับ CSS แบบฝังที่มีคลาสและรหัส ซึ่งไม่จำเป็นต้องใช้ CSS แบบอินไลน์ใน Gmail ซึ่งหมายความว่าในที่สุด Gmail จะรองรับการสืบค้นสื่อและอีเมลที่ตอบสนอง

แค่ติดตามข่าว? ติดตามการอัปเดตของเราใน Live Ticker ขณะที่เราตรวจสอบการเปิดตัว หรืออ่านสรุปการเปลี่ยนแปลงที่คาดหวังทั้งหมดและความหมายสำหรับนักการตลาดทางอีเมลด้านล่าง

Ticker อัปเดตของ Gmail สด

นี่คือมุมมองปัจจุบันของไคลเอนต์อีเมล Gmail ที่ได้รับการอัปเดต:

ไคลเอนต์ Gmail

อัพเดทเปิดตัว

เว็บเมลบนเดสก์ท็อป

เช็คสีเขียว

เว็บเมลมือถือ

ตรวจสอบ-X

แอป Gmail Android (บัญชี Gmail)

เช็คสีเขียว

แอป Gmail Android (บัญชี Gmailified)

เช็คสีเขียว

แอป Gmail Android (บัญชี POP/IMAP)

ตรวจสอบ-X

แอป Gmail iOS

เช็คสีเขียว

กล่องจดหมายโดย Gmail (เว็บเมล)

เช็คสีเขียว

กล่องจดหมายโดย Gmail (iOS)

เช็คสีเขียว

กล่องจดหมายโดย Gmail (แอนดรอยด์)

เช็คสีเขียว

G Suite Basic (เดิมคือ Google Apps for Work)

เช็คสีเขียว

Google Apps รุ่นที่ให้บริการฟรี (ดั้งเดิม)

ตรวจสอบ-X

  • 7 พฤศจิกายน เวลา 11:30 น. EDT

การอัปเดตที่สำคัญสำหรับแอป Gmail iOS รวมถึงการอัปเดตการแสดงผลเพื่อรองรับ <style> และข้อความค้นหาสื่อ! ขณะนี้แอปมือถือ Gmail ทั้งหมดรองรับอีเมลที่ตอบสนองแล้ว เรายังเห็นบัญชี G Suite ทั้งหมดที่มีการอัปเดตการแสดงผลด้วย

  • 12 ตุลาคม 09:00 น. EDT

เรากำลังเริ่มเห็นบัญชี G Suite นอกสหรัฐอเมริกา (ซึ่งรวมถึง Litmus Previews) ได้รับการอัปเดตการแสดงผล เราจะอัปเดตแผนภูมิการเปิดตัวเมื่อเราเห็นว่าบัญชีทั้งหมดของเรามีการอัปเดต

  • 4 ตุลาคม เวลา 09:30 น. EDT

เราได้เผยแพร่แผนภูมิการเปิดตัวฉบับสมบูรณ์ด้านบนนี้ โปรดทราบว่า Gmail ได้เปลี่ยนชื่อแผนบัญชีแล้ว

สำหรับบัญชี G Suite Basic (เดิมคือ Google Apps for Work) ดูเหมือนว่าการอัปเดตอาจเปิดตัวในบัญชีสหรัฐฯ เท่านั้น สำหรับผู้ใช้ Litmus โปรดทราบว่าตัวอย่างอีเมล G Suite Basic ของเรา (ปัจจุบันยังมีชื่อ Google Apps) ใช้บัญชีในสหราชอาณาจักร ซึ่งขณะนี้ยังไม่ได้รับการอัปเดต

  • 4 ตุลาคม เวลา 04.00 น. EDT

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

  • 30 กันยายน 8.00 น. EDT

มีการเปลี่ยนแปลงในแอป Gmail บน Android ด้วยเช่นกัน คลาสและรหัสถูกหยิบขึ้นมาในส่วนหัวของอีเมล เรายังเห็นว่ามีการรองรับการสืบค้นสื่อสำหรับบัญชีแอป Gmail ของ Android บางบัญชี แต่การสนับสนุนนั้นไม่สอดคล้องกันในทุกบัญชีที่เราทดสอบ การสนับสนุนอาจค่อยๆ ทยอยเปิดตัวในภูมิภาคต่างๆ

การอัปเดตกำลังเปิดตัวใน Inbox by Gmail ด้วยการสนับสนุน ID และคลาสในส่วนหัวของอีเมล

  • 30 กันยายน 05:30 น. EDT

ดูเหมือนว่า Gmail จะค่อยๆ ทยอยอัปเดตเอ็นจินการเรนเดอร์ เว็บไคลเอ็นต์ของ Gmail รองรับคลาสและ id ใน <head> ในทุกเบราว์เซอร์ (Chrome, Safari และ Firefox) และทั้งคู่มีการอ้างอิงอย่างถูกต้องใน HTML

เรายังเห็นการสืบค้นสื่อสนับสนุนในเว็บไคลเอ็นต์ของ Gmail:

Gmail รองรับการออกแบบอีเมลที่ตอบสนอง

อย่างไรก็ตาม จนถึงขณะนี้ Gmail หรือแอป Gmail หรือแอป Gmail ไม่รองรับแท็กสไตล์ในส่วนหัวของอีเมลหรือข้อความค้นหาสื่อ

  • 29 กันยายน 23:55 น. EDT

มันกำลังเกิดขึ้น! Gmail ได้เริ่มเปิดตัวการเปลี่ยนแปลงในเครื่องแสดงผล คอยติดตามการอัปเดตในขณะที่เราตรวจสอบการเปิดตัว

แบ่งปันข่าว →

การเปลี่ยนแปลงเหล่านี้มีความหมายอย่างไรสำหรับอีเมล Geeks

ในวันที่ 31 สิงหาคม 2016 Gmail ประกาศว่าจะเริ่มสนับสนุนการแสดงคุณสมบัติ CSS: none; และสนับสนุน <style> และแบบสอบถามสื่อ

นี่เป็นเพียงส่วนหนึ่งของความพยายามโดยรวมในการขยายการสนับสนุน CSS ใน Gmail และเพื่อให้ผู้ออกแบบอีเมลสามารถควบคุมวิธีการแสดงข้อความของตนได้มากขึ้น

– เพียร์ซ โวลุชชี ผู้จัดการผลิตภัณฑ์ของ Google

นี่เป็นข่าว ใหญ่ สำหรับชุมชนอีเมล และจะมีผลกระทบอย่างมากต่อการออกแบบและพัฒนาอีเมล

GMAIL เพื่อสนับสนุนอีเมลที่ตอบสนองและ <STYLE>

Gmail ไม่เคยรองรับคลาสหรือรหัสใน <head> ของอีเมล ซึ่งบังคับให้ผู้ออกแบบอีเมลใช้ CSS แบบอินไลน์เพื่อจัดรูปแบบอีเมล ตอนนี้ Gmail จะรองรับ CSS แบบฝังที่มีคลาสและรหัส ซึ่งไม่จำเป็นต้องใช้ CSS แบบอินไลน์ใน Gmail ซึ่งหมายความว่าในที่สุด Gmail จะรองรับการสืบค้นสื่อและอีเมลที่ตอบสนอง

กล่าวอีกนัยหนึ่ง โค้ดต่อไปนี้จะแสดงอย่างถูกต้องใน Gmail:

 <html> <head> <style> .colored { color: blue; } #body { font-size: 14px; } @media screen and (min-width: 500px) { .colored { color:red; } } </style> </head> <body> <div> <p>Hi Pierce,</p> <p class="colored"> This text is blue if the window width is below 500px and red otherwise. </p> <p>Jerry</p> </div> </body> </html>

คุณสามารถดูรายชื่อ CSS ที่รองรับทั้งหมดได้ที่ด้านล่างของโพสต์นี้ หรือในเอกสารทางการของ Gmail นี่คือรายการทั้งหมดของการสนับสนุนการสืบค้นสื่อที่กำลังจะมีขึ้น:

ประเภทที่รองรับ

  • ทั้งหมด
  • หน้าจอ

แบบสอบถามที่รองรับ

  • นาทีความกว้าง
  • ความกว้างสูงสุด
  • นาที-อุปกรณ์-ความกว้าง
  • max-device-width
  • ปฐมนิเทศ
  • ความละเอียดขั้นต่ำ
  • ความละเอียดสูงสุด

คีย์เวิร์ดที่รองรับ

  • และ
  • เท่านั้น

สิ่งนี้หมายความว่าอย่างไรสำหรับอีเมล

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

ผลกระทบของตลาด: ในไม่ช้าการสืบค้นสื่อจะเป็นมาตรฐาน

อีเมลจำนวนมากใช้คิวรีสื่อเพื่อปรับแต่งเนื้อหาและออกแบบเพื่อสร้างประสบการณ์ใช้งานมากขึ้นในหน้าจอขนาดต่างๆ อย่างไรก็ตาม คิวรี่สื่อไม่ทำงานทุกที่ การขาดการสนับสนุนในอดีตที่น่าสังเกตและน่าหงุดหงิดที่สุดนั้นมาจาก Gmail ซึ่งมีชื่อเสียงในการลอกโค้ดจาก <head> ควบคู่ไปกับสไตล์และข้อความค้นหาสื่อที่มีอยู่ภายใน

ด้วยการสนับสนุนของ Gmail สำหรับการสืบค้นสื่อ ไคลเอนต์อีเมลมากกว่า 75% จะสนับสนุนการออกแบบที่ตอบสนอง เราหวังว่าสิ่งนี้จะกลายเป็นบรรทัดฐานสำหรับไคลเอนต์อีเมลอื่น ๆ เช่น Windows Phone ที่ตามมา

ลดความต้องการโครงสร้างเลย์เอาต์ที่แฮ็ก เช่น Fab Four

เพื่อต่อสู้กับ Gmail ที่ไม่ได้รับการสนับสนุนสำหรับการสืบค้นสื่อในส่วนนี้ ผู้เชี่ยวชาญด้านอีเมลจึงมองหาวิธีแก้ไขปัญหาเฉพาะหน้าทั้งสูงและต่ำ วิธีแก้ปัญหาชั่วคราวอย่างหนึ่งคือเทคนิค Fab Four ซึ่งเกี่ยวข้องกับฟังก์ชัน CSS calc() และคุณสมบัติความกว้าง ความกว้างต่ำสุด และความกว้างสูงสุดสามรายการ

นักออกแบบอีเมล ได้เวลาบอกลาโครงสร้างเลย์เอาต์ที่ซับซ้อนเหล่านี้แล้ว แต่โปรดทราบว่าคุณยังต้องการตารางสำหรับ Outlook (เรายังไม่ได้สร้างมาตรฐานอีเมล….แต่)

อย่างไรก็ตาม การพัฒนาแบบผสมผสาน/แบบฟองน้ำยังคงมีที่สำหรับการพัฒนาอีเมลเป็นโครงสร้างพื้นฐานสำหรับลูกค้าที่มีปัญหาเช่น Outlook

บอกลา CSS inlining

สไตล์ “Inlining” จะย้าย CSS และคำแนะนำการจัดรูปแบบที่เกี่ยวข้องจากบล็อกสไตล์ใน <head> ของอีเมลของคุณไปยัง <body> ของ HTML ในอดีต หากไม่มีการย้ายสไตล์ในบรรทัด สไตล์ในเนื้อหาของอีเมลจะไม่แสดงใน Gmail

no-inline-edited-03

ด้วยการอัปเดตเหล่านี้ CSS ในบรรทัดจะไม่จำเป็นอีกต่อไป นักออกแบบอีเมลสามารถใช้รูปแบบที่ฝังอยู่ใน <head> ของเอกสาร HTML ได้แล้ว CSS แบบฝังจะได้รับการสนับสนุนในไคลเอ็นต์อีเมลหลักทั้งหมด

อีเมลจะเข้าถึงได้ง่ายขึ้น

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

ด้วยการสนับสนุน CSS แบบฝัง ผู้ออกแบบอีเมลสามารถแยกการจัดรูปแบบออกจากเนื้อหาและใช้มาร์กอัปที่มีความหมายและเข้าถึงได้สำหรับอีเมลของตน

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

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

การสนับสนุนวิชาการพิมพ์จะเพิ่มขึ้น

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

การสนับสนุนเพิ่มเติมสำหรับพื้นหลังกำลังมา

Gmail กำลังแนะนำการสนับสนุนเพิ่มเติมสำหรับคุณสมบัติพื้นหลัง CSS เช่น background-clip, background-position และที่สำคัญที่สุดคือขนาดพื้นหลัง ด้วยการรองรับขนาดพื้นหลัง อีเมลสามารถมีภาพพื้นหลังที่ปรับขนาดและตอบสนองได้

ทดสอบอีเมลของคุณใน GMAIL

การเปลี่ยนแปลงเหล่านี้จะส่งผลต่ออีเมลของคุณอย่างไร ใช้ Litmus เพื่อดูตัวอย่างอีเมลของคุณใน Gmail และโปรแกรมรับส่งเมลอื่นๆ อีกกว่า 70 รายการในทันที โปรดทราบว่าการเปลี่ยนแปลงเหล่านี้ยังไม่เผยแพร่ แต่จะมีผลใน Litmus Instant Previews ทันทีที่ Gmail เผยแพร่

ลองลิตมัสฟรี →

เอกสารอย่างเป็นทางการ

เป็นครั้งแรกที่ไคลเอนต์อีเมลรายใหญ่ได้เผยแพร่เอกสารสนับสนุน CSS และ HTML อย่างเป็นทางการ นี่เป็นอุตสาหกรรมหลักก่อน ขอบคุณ Gmail!

คุณสมบัติ CSS ต่อไปนี้จะได้รับการสนับสนุนใน Gmail และ Inbox โดย Gmail:

  • ราบ
  • พื้นหลัง
  • พื้นหลังผสมโหมด
  • เบื้องหลังคลิป
  • สีพื้นหลัง
  • ภาพพื้นหลัง
  • ที่มาของพื้นหลัง
  • พื้นหลังตำแหน่ง
  • พื้นหลัง-ซ้ำ
  • ขนาดพื้นหลัง
  • ชายแดน
  • ขอบล่าง
  • ขอบด้านล่างสี
  • ขอบล่างซ้ายรัศมี
  • border-bottom-right-radius
  • ขอบด้านล่างสไตล์
  • ขอบล่างกว้าง
  • ชายแดนยุบ
  • เส้นขอบสี
  • ขอบซ้าย
  • ขอบซ้ายสี
  • border-left-style
  • border-left-width
  • รัศมีชายแดน
  • ขอบขวา
  • ขอบขวาสี
  • border-right-style
  • border-right-width
  • ระยะห่างระหว่างชายแดน
  • แนวชายแดน
  • ขอบบน
  • ขอบด้านบนสี
  • border-top-left-รัศมี
  • border-top-right-รัศมี
  • border-top-style
  • border-top-width
  • border-width
  • ขนาดกล่อง
  • พักหลัง
  • พักก่อน
  • พังภายใน
  • คำบรรยายใต้ภาพ
  • แจ่มใส
  • สี
  • คอลัมน์นับ
  • คอลัมน์เติม
  • คอลัมน์ช่องว่าง
  • คอลัมน์กฎ
  • คอลัมน์กฎสี
  • คอลัมน์กฎสไตล์
  • คอลัมน์กฎความกว้าง
  • ช่วงคอลัมน์
  • ความกว้างคอลัมน์
  • คอลัมน์
  • ทิศทาง
  • แสดง
  • ระดับความสูง
  • เซลล์ว่าง
  • ลอย
  • แบบอักษร
  • ตระกูลอักษร
  • ตัวอักษรคุณสมบัติการตั้งค่า
  • การจัดรูปแบบแบบอักษร
  • ขนาดตัวอักษร
  • font-size-adjust
  • ตัวอักษรยืด
  • รูปแบบตัวอักษร
  • การสังเคราะห์อักษร
  • แบบอักษรตัวแปร
  • font-variant-alternates
  • font-variant-ตัวพิมพ์ใหญ่
  • font-variant-เอเชียตะวันออก
  • font-variant-ligatures
  • แบบอักษร-ตัวแปร-ตัวเลข
  • ตัวอักษรน้ำหนัก
  • ความสูง
  • ภาพ-ปฐมนิเทศ
  • ความละเอียดของภาพ
  • การแยกตัว
  • ระยะห่างระหว่างตัวอักษร
  • ความสูงของเส้น
  • รายการสไตล์
  • รายการสไตล์ตำแหน่ง
  • รายการสไตล์ประเภท
  • ระยะขอบ
  • ขอบล่าง
  • ระยะขอบซ้าย
  • ขอบขวา
  • ขอบบน
  • ความสูงสูงสุด
  • ความกว้างสูงสุด
  • นาทีความสูง
  • นาทีความกว้าง
  • โหมดผสมผสม
  • วัตถุพอดี
  • วัตถุตำแหน่ง
  • ความทึบ
  • เค้าร่าง
  • เค้าร่าง-สี
  • เค้าร่างสไตล์
  • เค้าร่างความกว้าง
  • ล้น
  • การขยายความ
  • padding-ด้านล่าง
  • padding-left
  • padding-ขวา
  • padding-top
  • หยุดชั่วคราว
  • หยุดชั่วคราวหลัง
  • หยุดชั่วคราวก่อน
  • ขว้าง
  • ระยะพิทช์
  • คำพูด
  • ความร่ำรวย
  • พูด
  • พูดหัว
  • พูด-ตัวเลข
  • พูด-เครื่องหมายวรรคตอน
  • อัตราการพูด
  • ความเครียด
  • ตารางเลย์เอาต์
  • text-align
  • text-combin-upwrite
  • ข้อความตกแต่ง
  • ข้อความตกแต่งสี
  • ข้อความตกแต่งบรรทัด
  • text-decoration-skip
  • ข้อความตกแต่งสไตล์
  • ข้อความเน้น
  • ข้อความเน้นสี
  • text-emphasis-style
  • ข้อความเยื้อง
  • การวางแนวข้อความ
  • ข้อความล้น
  • การแปลงข้อความ
  • text-ขีดเส้นใต้ตำแหน่ง
  • Unicode-bidi
  • แนวตั้งจัด
  • เสียง-ครอบครัว
  • ความกว้าง
  • การเว้นวรรค
  • การเขียนโหมด

รับข้อมูลล่าสุดที่ส่งตรงถึงกล่องจดหมายของคุณ

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