เหตุใดอีเมลของฉันจึงดูไม่ดีกับไคลเอนต์ Outlook
เผยแพร่แล้ว: 2018-07-04มาเผชิญความจริงกัน การสร้างอีเมลนั้นค่อนข้างง่าย แต่การจัดรูปแบบอีเมลเหล่านั้นให้เข้ากันได้กับ Outlook ค่อนข้างเป็นงาน Infact ยากกว่าที่คุณคิด
Outlook เป็นโปรแกรมรับส่งเมลที่เก่าที่สุดแต่เก่าที่สุดเท่าที่คุณจะเคยพบมา อย่างไรก็ตาม ไม่สนับสนุนความก้าวหน้าหลายอย่างที่คุณพบในโปรแกรมรับส่งเมลอื่นๆ เช่น Gmail
ตัวอย่างนี้:
หากคุณใช้ภาพ PNG ที่มีพื้นหลังโปร่งใส Outlook จะทำให้คุณประหลาดใจ! ไม่ทราบวิธีการแสดงภาพดังกล่าว ในทำนองเดียวกัน คุณอาจสงสัยว่าทำไมปุ่มที่โค้งมนของคุณ (สร้างโดยใช้คุณสมบัติ CSS border-radius) ถึงมีลักษณะเป็นสี่เหลี่ยมจัตุรัสในไคลเอนต์ Outlook เนื่องจาก Outlook ไม่รองรับ border-radius และคุณสมบัติ CSS อื่นๆ อีกหลายอย่าง
นี่คือสาเหตุที่อีเมล Outlook ของคุณดูแย่ และสิ่งที่คุณทำได้เพื่อปรับปรุงการออกแบบอีเมลของคุณ
เหตุใดอีเมลของฉันจึงดูแย่เมื่อใช้ Outlook
ความท้าทายที่ยิ่งใหญ่ที่สุดสำหรับนักการตลาดผ่านอีเมลในตอนนี้คือการสร้างเทมเพลตอีเมลสำหรับ Outlook เนื่องจากจาก Outlook 2007 Microsoft ได้หยุดใช้ Internet Explorer เพื่อแสดงผลอีเมล และเริ่มใช้ Microsoft Word เป็นเครื่องมือในการแสดงผล การเปลี่ยนแปลงนี้เหมาะที่สุดสำหรับผู้ใช้ Microsoft office เนื่องจากอนุญาตให้คัดลอกหรือวางเนื้อหาจาก Word หรือ Excel ลงในอีเมล Outlook แต่ทำให้สถานการณ์ยากขึ้นสำหรับตัวสร้างอีเมลที่ใช้ HTML เนื่องจากอีเมล HTML มีลักษณะแตกต่างกันในมุมมอง ในการเอาชนะความท้าทายบางอย่าง ให้ทำตามขั้นตอนด้านล่างเพื่อปรับปรุงแคมเปญอีเมล
ความท้าทายในการแสดงอีเมลด้วย Outlook
นักการตลาดผ่านอีเมลต้องพิจารณาให้มากก่อนจะออกแบบแคมเปญอีเมล เขาต้องการทราบการสมัครใช้งานของลูกค้าที่ใช้ Outlook เวอร์ชันเดสก์ท็อป เวอร์ชันสำหรับอุปกรณ์เคลื่อนที่ และเวอร์ชันเว็บของ Outlook แตกต่างกันโดยสิ้นเชิงในการแสดงอีเมล เมื่อพูดถึงการแสดงอีเมลด้วย Outlook สิ่งที่ควรพิจารณามีดังนี้
เหตุใดรูปภาพจึงถูกตัดและโหลดช้า
เมื่อพูดถึงการรวมรูปภาพในอีเมล Outlook มีข้อจำกัดบางประการเกี่ยวกับขนาดรูปภาพ
จดหมายข่าวทางอีเมลมีบทบาทสำคัญในแคมเปญการตลาดทางอีเมล พวกมันสร้างไดนามิกโดยการเพิ่มรูปภาพเข้าไป บางครั้งเมื่อมีการเพิ่มรูปภาพขนาดยาวลงในเทมเพลตของแคมเปญ รูปภาพนั้นจะถูกตัดหรือปรับขนาดเมื่อสิ้นสุดการรับ นี่เป็นเพราะว่า Outlook ตัดส่วนบนของรูปภาพที่มีความสูงเกิน 1728px ดังนั้น ในกรณีนี้ เราจำเป็นต้องปรับขนาดภาพให้ต่ำกว่า 1728px เพื่อให้ปรากฏโดยไม่ต้องตัด
ในสถานการณ์ที่ไม่สามารถปรับขนาดรูปภาพได้ ทางเลือกที่ดีที่สุดคือการครอบตัดรูปภาพออกเป็นสองภาพแยกกัน แล้วนำไปใช้ในแคมเปญ
รูปภาพไม่ได้รับการปรับขนาด
Outlook ทำงานได้ไม่ดีกับรูปภาพที่จำกัดด้วย HTML กล่าวคือ ถ้าเพิ่มเทมเพลตอีเมลด้วยรูปภาพที่ปรับขนาดโดยใช้ HTML แล้ว Outlook จะแสดงรูปภาพในขนาดดั้งเดิมเท่านั้น จะไม่แสดงในค่าที่ปรับขนาด ดังนั้น เราต้องตรวจสอบให้แน่ใจว่ารูปภาพได้รับการปรับขนาดให้ดีก่อนที่จะนำไปใช้ในระบบอัตโนมัติของอีเมลใดๆ
ภาพพื้นหลัง
กลยุทธ์ที่ดีที่สุดในการ 'wow' ลูกค้าคือการสร้างอีเมลที่มีภาพพื้นหลังที่แสดงแบรนด์ เราสามารถทำให้ภาพพื้นหลังมีจุดมุ่งหมายมากขึ้นโดยการซ้อนทับข้อความสดบนภาพ ข้อความสดจะช่วยให้เราสื่อถึงวัตถุประสงค์ของอีเมลได้แม้ในบางครั้งที่ลูกค้าไม่ปรากฏพร้อมกับรูปภาพ
อย่างไรก็ตาม Outlook ไม่สนับสนุนภาพพื้นหลังด้วย HTML เราจำเป็นต้องใช้ VML (Vector Markup Language) เพื่อให้สมาชิกสามารถดูภาพพื้นหลังได้
ป้อนโค้ดด้านล่างในแท็ก <body> ของ HTML สำหรับภาพพื้นหลังเพื่อให้ครอบคลุมหน้าต่างอีเมลทั้งหมด
<div> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="/IMAGE.png" color="#000000"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="IMAGE.png">โค้ดด้านบนทำงานได้อย่างสมบูรณ์ในการแสดงภาพพื้นหลังด้วยอีเมลที่เปิดใน Outlook 2007, 2010 และ 2013 แต่ Windows Mail 10 จำเป็นต้องแก้ไขโค้ดเพื่อเพิ่มรูปภาพด้วยแหล่งที่มาซึ่งอนุญาตให้ใช้ภาพพื้นหลังได้
โค้ดด้านล่างจะทำให้ชั้นบนสุดของภาพโปร่งใสและช่วยแก้ไขภาพพื้นหลัง
<td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" src="/Image Live URL Here" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"> <v:fill opacity="0%" color="#f7901e" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> <!-- HTML Content Here --> </div> <!--[if gte mso 9]> </v:textbox> </v:fill> </v:rect> </v:image> <![endif]--> </td>GIF แบบเคลื่อนไหว ไม่พอดี
วิดีโอพูดได้มากกว่าคำพูด
แต่ในทางเทคนิคแล้ว เทมเพลตอีเมลจำเป็นต้องมีการเข้ารหัสที่ซับซ้อนเพื่อรองรับวิดีโอ เมื่อพิจารณาถึงทางเลือกอื่น ในฐานะนักการตลาดผ่านอีเมล ฉันเห็น GIF เป็นตัวเลือกแบบไดนามิก GIF เป็นภาพเคลื่อนไหวเพื่อถ่ายทอดข้อความในรูปแบบที่ง่ายที่สุด Outlook ไม่รองรับ GIF
โหลดภาพ GIF แต่จะแสดงเฉพาะเฟรมแรกของ GIF ให้กับลูกค้า
หากคุณมีสมาชิก Outlook อยู่ในรายชื่ออีเมล ตรวจสอบให้แน่ใจว่าเฟรมแรกของรูปภาพนั้นแชร์บริบทหลักของ GIF
พิจารณาใช้ส่วนแอนิเมชั่นเพื่อเพิ่มข้อได้เปรียบให้กับสมาชิกกับโปรแกรมรับส่งเมลอื่นๆ
คุณสมบัติรัศมีชายแดน
เมื่อพูดถึงการตลาดผ่านอีเมล ปุ่มคำกระตุ้นการตัดสินใจเป็นคุณลักษณะที่ทำให้อีเมลสร้างโอกาสในการขาย กี่ครั้งแล้วที่เราคลิกปุ่ม CTA แบบปลายกลม?
คุณสมบัติรัศมีเส้นขอบเป็นคุณสมบัติ CSS ทั่วไป แต่ใช้งานไม่ได้กับ Outlook ด้วย Outlook สมาชิกจะได้รับปุ่ม CTA ที่มีเส้นขอบสี่เหลี่ยม
ช่องว่างเพิ่มเติม
บางครั้งช่องว่างเหนือภาพเหมือนที่เราเคยเห็นในตัวเลือกตัวอย่างก่อนพิมพ์หลังจากที่อีเมลแสดงผลด้วย Outlook
ดังที่ได้กล่าวไว้ก่อนหน้านี้ในบล็อก เนื่องจาก Outlook 2007 ใช้ Microsoft Word เพื่อแสดงอีเมล HTML
ดังนั้นอีเมลจึงดูแตกต่างจากการออกแบบจริงเล็กน้อย
ปัญหาแบบอักษรหลัก
หากอุปกรณ์ของสมาชิกไม่มีรูปแบบฟอนต์หลัก Outlook จะแสดงอีเมลทั้งหมดใน Times New Roman โดยไม่สนใจฟอนต์สำรองที่กล่าวถึงในโค้ด
<!--[if mso]> <style> h1 { font-family: Primary font, Fallback font; } </style> <![endif]-->เทมเพลตอีเมลควรสมบูรณ์แบบ
คุณเรียกใช้แคมเปญอีเมลสำหรับร้านค้าอีคอมเมิร์ซ เทมเพลตที่คุณออกแบบควรช่วยในการส่งอีเมลที่มีประสิทธิภาพ เพราะนี่ไม่ใช่การตลาดภาคสนามแบบเดิมๆ ที่ลูกค้าจะได้เจอคุณแบบตัวต่อตัว
รูปลักษณ์ของนักการตลาดเป็นตัวกำหนดความน่าเชื่อถือของแบรนด์ ตอนนี้เรากำลังส่งอะไรเพื่อเป็นตัวแทนของแบรนด์ของเรา?
อีเมล เทมเพลตการออกแบบอีเมลของคุณจะสร้างความประทับใจให้กับแบรนด์ของคุณแก่ลูกค้า ยิ่งอีเมลดูมีเนื้อหามากขึ้นเท่าไหร่ แบรนด์ก็ยิ่งดีเท่านั้น
อย่างไรก็ตาม เราไม่ได้รับเสรีภาพในการใช้ตัวเลือกรูปแบบขั้นสูงเพื่อทำให้อีเมลของเราดูน่าสนใจ เราอาจเห็นว่าอีเมลดูสมบูรณ์แบบใน Outlook แต่นั่นจะไม่ใช่สถานการณ์สมมติเมื่อผู้รับอีเมลรายอื่นแสดงผล
คุณควรใช้ตารางใน HTML อีเมลของคุณ อย่าพยายามใช้องค์ประกอบ div ที่มีตำแหน่งและลอยเนื่องจาก Outlook ไม่รองรับ น่าเสียดายที่ไม่มีวิธีแก้ปัญหาสำหรับเรื่องนี้ในตอนนี้
ตัวเลือกยกเลิกการสมัครเป็นสิ่งจำเป็น
การจัดการร้านค้าอีคอมเมิร์ซ เราต้องการให้ลูกค้ามีส่วนร่วมกับแบรนด์ของเราอยู่เสมอ
ทำอย่างไร?
จดหมายข่าว ให้ข้อมูลที่เป็นไปได้แก่ลูกค้าเกี่ยวกับแนวโน้มและการอัปเดตในช่องธุรกิจของคุณ
แต่สุดท้ายก็เป็นลูกค้าที่ตัดสินใจติดตามแบรนด์ของคุณหรือไม่ เมื่อลูกค้าที่สมัครเป็นสมาชิกกับเราควรมีตัวเลือกในการยกเลิกจากรายการสมัครสมาชิกเมื่อใดก็ได้
ปุ่มยกเลิกการสมัครเป็นสิ่งจำเป็นในจดหมายข่าวทุกฉบับที่เราส่งถึงลูกค้าของเรา และหากลูกค้าของเราไม่เห็นปุ่มนี้
คาดหวังอะไร?
เราอาจได้รับสแปม!
การส่งอีเมลจาก Outlook ทำให้แบรนด์ของเราตกอยู่ในความเสี่ยง เพราะมันไม่ได้ให้ตัวเลือกมาตรฐานนี้
ลิงก์ถูกเปลี่ยนเป็นข้อความสีน้ำเงิน/สีม่วงที่ขีดเส้นใต้
ในฐานะนักการตลาดผ่านอีเมล เราจำเป็นต้องใช้อีเมลที่เราส่งถึงลูกค้าอย่างเต็มที่
เราสามารถรวมลิงค์สมัครสมาชิก ลิงค์ไปยังบล็อกที่กำลังเป็นที่นิยมของเรา ลิงค์เปลี่ยนเส้นทางไปยังเว็บไซต์ของเราเพื่อให้ลูกค้ามีส่วนร่วม
เมื่อส่งอีเมล HTML จาก Outlook ลิงก์ดังกล่าวจะปรากฏเป็นข้อความสีน้ำเงิน/สีม่วงที่ขีดเส้นใต้เมื่อดูในไคลเอนต์อีเมลต่างๆ
เพื่อหลีกเลี่ยงปัญหานี้ ให้ใช้แท็ก <font> และตัดข้อความด้วยแท็ก <span> และแอตทริบิวต์ style
ลองใช้รหัสต่อไปนี้ -
<a> <span> <font color="#E3A216"> Click me </font> </span> </a>Outlook อาจใช้การกรอกกล่องจดหมายส่วนตัวของคุณได้
แต่การพูดทางธุรกิจ - มองนอกกรอบ