การแสดงผลอีเมลข้ามไคลเอนต์อีเมล: ความท้าทายและวิธีแก้ปัญหา

เผยแพร่แล้ว: 2019-01-15

ในบทความนี้

ไคลเอนต์อีเมล: ความท้าทายและวิธีแก้ปัญหา
เหตุผลเบื้องหลังความแตกต่างระหว่างไคลเอนต์อีเมลที่แตกต่างกัน
ข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยงเมื่อส่งไปยังไคลเอนต์อีเมลหลายตัว
ห่อ

ในฐานะแบรนด์ที่ใช้การตลาดผ่านอีเมล คุณต้องตรวจสอบให้แน่ใจว่า อีเมล ของคุณสำหรับผู้ติดตามแสดงตาม ที่คุณต้องการ

อีเมลส่วนใหญ่ที่ได้รับ ในกล่องจดหมายจะแสดงข้อมูลต่อไปนี้:

โปรแกรมรับส่งเมลที่แสดง "คลิกที่นี่เพื่อดาวน์โหลดรูปภาพ" หรือ "แสดงรูปภาพ: สำหรับข้อความนี้/ สำหรับผู้ส่งรายนี้เสมอ"
อีเมลที่แสดงลิงก์ "ดูอีเมลในเบราว์เซอร์" หรือ "คลิกที่นี่เพื่อดูอีเมลออนไลน์" ที่ด้านบน

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

แต่มีความท้าทายอยู่

โปรแกรมรับส่งเมลเล่นตามกฎของพวกเขาและแสดงอีเมลแตกต่างออกไป!

ส่วนแบ่งการตลาดไคลเอ็นต์อีเมล Litmus แสดงให้เห็นว่า Apple Mail ( 44% รวมอีเมล iOS สำหรับ iPhone และ iPad) ตามด้วย Gmail (รวมเดสก์ท็อปและอุปกรณ์เคลื่อนที่ 29% ) Outlook (รวม Outlook และ Outlook.com 12% ) และ Yahoo ! เมล (รวม 6% ของเดสก์ท็อปและมือถือ) เป็นไคลเอนต์อีเมลที่ใช้บ่อยที่สุดในเดือนตุลาคม 2018 ไคลเอนต์อีเมลทั้งหมดเหล่านี้เผชิญกับความท้าทายในการแสดงอีเมลตามที่ได้รับการออกแบบในตอนแรก

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

ไคลเอนต์อีเมล: ความท้าทายและวิธีแก้ปัญหา

แอปเปิ้ลไอโฟน

Apple iPhone รองรับองค์ประกอบอีเมลแบบโต้ตอบ เช่น Cinemagraph, GIF, วิดีโอ, การนับถอยหลัง, แถบเลื่อน, ภาพเรตินา ฯลฯ และด้วยเหตุนี้จึงให้ ประสบการณ์การใช้งานที่ไร้ที่ติ จึงเป็นไคลเอนต์อีเมลที่ได้รับความนิยมมากที่สุด

ปัญหาการแสดงผลในรุ่นที่อัปเดต: เมื่อ iPhone รุ่นได้รับการอัปเดตด้วยหน้าจอที่ใหญ่ขึ้น จะนำไปสู่ปัญหาการแสดงผลอีเมล เพื่อแก้ปัญหานี้และเพื่อให้แน่ใจว่าอีเมลจะแสดงผลในอุปกรณ์ iPhone ทั้งหมด ให้อัปเดตการสืบค้นสื่อของคุณโดยใช้เบรกพอยต์ 320px เป็น 414px สำหรับ iPhone 8 plus นอกจากการรักษาความกว้างของอุปกรณ์ให้คงที่แล้ว คุณยังสามารถเก็บความกว้างของไหลได้อีกด้วย

ไม่รองรับตัวเลือก ~ เมื่อใช้กับ :hover หรือ :checkedselectors: iOS9 ขาดการสนับสนุนตัวเลือกพี่น้องทั่วไป ~ เมื่อรวมกับตัวเลือกคลาสหลอก :checked และ :hover เพื่อให้ได้ผลลัพธ์ที่คล้ายคลึงกัน เราสามารถใช้ตัวเลือกพี่น้องที่อยู่ติดกัน + แทน ~

ข้อความถูกปรับขนาด: ข้อความขนาดเล็ก จะถูกปรับขนาด โดยอัตโนมัติ กำหนดขนาดตัวอักษรขั้นต่ำไว้ที่ 22 พิกเซลสำหรับส่วนหัวและ 14 พิกเซลสำหรับข้อความในเนื้อหา

อีเมลที่ปรับเปลี่ยนตามอุปกรณ์จะได้รับการปรับขนาดอัตโนมัติใน iOS10 และ iOS11: การปรับขนาดอีเมลที่ไม่ตอบสนองอัตโนมัติ จะทำให้อีเมลปรากฏอยู่นอกศูนย์กลางหรือซูมออก ในการแก้ปัญหานี้ ให้เพิ่ม "padding:0;" ไปที่แท็ก <body> และปิดใช้งานการปรับขนาดอัตโนมัติ ให้ใช้ <metaname=”x-apple-disable-message-reformatting”>

Gmail

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

Gmail สำหรับเดสก์ท็อป

การตัดข้อความ: Gmail จะ ตัด ข้อความที่มีขนาดใหญ่กว่า 102kb และซ่อนเนื้อหาด้านหลังลิงก์ "ดูข้อความทั้งหมด" เพื่อหลีกเลี่ยงปัญหานี้ ให้มีขนาดข้อความต่ำกว่า 102kb และหลีกเลี่ยงการใช้แอตทริบิวต์และแท็กสไตล์ที่ไม่จำเป็น

ไม่รองรับ ตัวเลือกแอตทริบิวต์ : ไม่รองรับ ตัวเลือกแอตทริบิวต์ที่ใช้เพื่อเลือกองค์ประกอบ ให้ใช้ตัวเลือก .class แทน

ลบ CSS ในบล็อก <style>: หาก บล็อก <style> มีอักขระเกิน 8142 ตัวหรือมี @declarations ที่ซ้อนกัน Gmail จะลบออก แก้ไขปัญหานี้ ใช้รูปแบบที่ฝังไว้ซึ่งสั้นและปราศจากข้อผิดพลาด

ภาพพื้นหลังไม่รองรับรหัสที่ไม่ใช่ Gmail: หากตั้งค่า รหัส ที่ไม่ใช่ Gmail บน Gmail จะไม่รองรับภาพพื้นหลัง ตรวจสอบให้แน่ใจว่าคุณใช้ทางเลือกที่เหมาะสมสำหรับพื้นหลังสำหรับกรณีดังกล่าว

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

ไม่รองรับระยะขอบ ช่องว่างภายใน ลอย และย่อหน้า: Gmail ไม่แสดงย่อหน้าและลอย หากต้องการแสดงระยะขอบและช่องว่างภายใน ให้ใช้เค้าโครงแบบตารางด้วย<td>

Gmail สำหรับมือถือ

<style> และ <link> ไม่รองรับในส่วนหัว: บางครั้ง head ไม่รองรับแท็ก <style> หรือ <link> ในการแก้ไขปัญหานี้ ให้เขียนทับสีลิงก์เริ่มต้นโดยเพิ่มสไตล์สีให้กับแท็ก <a> แต่ละรายการภายในโค้ด

รูปภาพที่แบ่งด้วยเส้นสีขาว: มีเส้นสีขาวระหว่างรูปภาพที่แบ่งสองภาพขึ้นไป ใช้ “display:block” ในแท็กรูปภาพเพื่อลบเส้นสีขาว

วันที่และตัวเลขเปลี่ยนเป็นสีน้ำเงินบน iPhone: Gmail สำหรับ iPhone เปลี่ยนตัวเลขและวันที่ให้เป็นสีน้ำเงินโดยอัตโนมัติ ใช้ non-joiner "text-decoration:" ที่มีความกว้างเป็นศูนย์ และขยายโดย "text-decoration: none" ล้อมรอบ นอกจากนี้ เพื่อหลีกเลี่ยงเส้นสีน้ำเงิน ให้กำหนดสิ่งสำคัญเพื่อแทนที่สไตล์อินไลน์

อีเมลแบบ ไหล ดูน่ารังเกียจ: ในแอป Gmail อีเมลแบบไหลดูไม่น่าประทับใจ ในการแก้ปัญหานี้ ให้สร้างภาพลวงตาขององค์ประกอบลอยโดยใช้ “display:inline-block” ร่วมกับ “text-align: center”

Outlook

Outlook และ Outlook.com เป็นไคลเอนต์อีเมลที่ใช้กันอย่างแพร่หลายใน สภาพแวดล้อมขององค์กร โปรแกรมรับส่งเมลเหล่านี้ประสบปัญหาการแสดงผลหลายอย่างซึ่งทำให้เป็น งานที่ยากสำหรับนักพัฒนาอีเมล

ไม่รองรับความกว้างสูงสุดและความกว้างต่ำสุด: Outlook ไม่รองรับความกว้างสูงสุดและความกว้างต่ำสุดใน CSS เพื่อแก้ปัญหานี้ ให้ใช้เลย์เอาต์แบบไหลที่มีความกว้างคงที่ภายในคิวรีสื่อ

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

ลบระยะห่างระหว่างย่อหน้าและระยะขอบ: Outlook จะลบ ระยะห่างระหว่างย่อหน้าและระยะ ขอบออกจากโค้ด ใช้เค้าโครงแบบตารางและ td/tr เพื่อเพิ่มช่องว่าง

ไม่รองรับ GIF: Outlook แสดงเพียงเฟรมแรกของ GIF ในอีเมล ตรวจสอบให้แน่ใจว่าเฟรมแรกสื่อข้อความหรือตั้งค่าทางเลือกที่เหมาะสมโดยใช้ภาพนิ่ง

ไม่รองรับเส้นขอบ RGB ใน Outlook.com: สำหรับสีพื้นหลัง ให้ใช้รหัส HEX แทนเส้นขอบ RGB

เพิ่มช่องว่างที่ไม่จำเป็น: Outlook.com เพิ่มช่องว่างที่ไม่จำเป็นหลังรูปภาพ หากต้องการลบช่องว่างภายใน ให้ตั้งค่าคุณสมบัติการแสดงผลเป็น “img{display:block;}”

ยาฮู! จดหมาย

min-device-width และ max-device-width ไม่รองรับใน Mediaqueries: Forwebmail เช่นเดียวกับแอพ Android ใช้แอตทริบิวต์ width และ/หรือในรูปแบบแทน min หรือ max-device-width สิ่งนี้จะควบคุมเลย์เอาต์

แท็กลอยไม่ทำงาน: แท็กลอยไม่ทำงานสำหรับ Yahoo! Mail ในการแก้ไขปัญหานี้ ให้จัด align="top" ให้กับรูปภาพที่เกี่ยวข้อง

เหตุผลเบื้องหลังความแตกต่างระหว่างไคลเอนต์อีเมลที่แตกต่างกัน

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

โปรแกรมรับส่งเมลบางตัว เช่น Apple Mail, Microsoft Outlook (จนถึงปี 2003) ได้นำเอาเอ็นจิ้นการเรนเดอร์ที่เป็นกรรมสิทธิ์มาใช้ในเบราว์เซอร์ เว็บเมลใช้ กลไก การเรนเดอร์แบบไฮบริดของตัวเองผสมกับเบราว์เซอร์ที่เปิดอยู่ ด้วย เหตุนี้ โค้ดเดียวกันจึงต้องเขียนด้วยรูปแบบที่แตกต่างกันเพื่อหลีกเลี่ยงไม่ให้ถูกลบออก

ต่อไปนี้คือไคลเอนต์อีเมลยอดนิยมและเอ็นจินการเรนเดอร์ที่ใช้โดยแต่ละรายการ:

Apple Mail → Motore Safari Webkit
iOS Mail → Motore Safari Webkit
Outlook 2000 – 2003 → Internet Explorer 6.x (ตรีศูล)
Lotus Notes 6.5 e 7 → Internet Explorer 6.x (ตรีศูล) e Notes Rich Text (เดี่ยวต่อ IMAP / POP3)
Outlook 2007 และเวอร์ชันต่อเนื่องกัน → Microsoft Word
Outlook ต่อ MAC → Motore Safari Webkit
Mozilla Thunderbird → Motore Mozilla Gecko
Gmail และ Yahoo! จดหมาย → Motore di rendering proprietario combinato con il motore di rendering del browser

ข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยงเมื่อส่งไปยังไคลเอนต์อีเมลหลายตัว

หลีกเลี่ยงภาพพื้นหลังที่อยู่เบื้องหลัง CTA ที่สำคัญ : ไม่รองรับภาพพื้นหลังในไคลเอนต์อีเมลส่วนใหญ่ โปรแกรมรับส่งเมลที่ไม่รองรับจะแทนที่รูปภาพด้วยสีพื้นหลัง นี่เป็นปัญหาโดยเฉพาะอย่างยิ่งถ้าสีพื้นหลังตรงกับสีแบบอักษรของข้อความในเบื้องหน้า
CSS แบบอินไลน์ทุกครั้ง :โปรแกรมรับส่งเมลบางตัวแยกสไตล์ชีตที่ระบุระหว่างแท็ก <style> ในขณะที่เกือบทั้งหมดรองรับสไตล์ CSS แบบอินไลน์ ดังนั้นเล่นอย่างปลอดภัยเสมอโดยใส่โค้ด CSS ของคุณ
Outlook รองรับขนาดรูปภาพเป็นเปอร์เซ็นต์และรองรับส่วนที่เหลือเป็นพิกเซล: โชคดีที่สามารถเพิ่มโค้ดเฉพาะของ Outlook ระหว่างโค้ดแบบมีเงื่อนไขของ Outlook เช่น <!–[ifgte mso 9]> ….. รหัสที่นี่…… </endif> ซึ่งอีเมลไคลเอ็นต์อื่นไม่สนใจ .
รหัสอีเมลโดยใช้ <table> แทน <div>: ในขณะที่การเขียนโค้ดเว็บไซต์มีความคืบหน้าไปจนถึงการสร้างโครงสร้างโดยใช้ <div> ไคลเอ็นต์อีเมลบางตัว เช่น Outlook2007 ยังคงประสบปัญหาในการแสดงผล <div> ดังนั้นนักพัฒนาอีเมลจึงยังคงใช้วิธีการป้องกันความล้มเหลวในการเขียนโค้ด < ตาราง> เค้าโครง แม้ว่าจะไม่สะดวก แต่ให้เขียนโค้ดอีเมลเหมือนปี 1999...

ห่อ

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