การแสดงผลอีเมล Outlook: ฉันเรียนรู้ที่จะหยุดกังวลและรัก Outlook ได้อย่างไร

เผยแพร่แล้ว: 2021-07-02

เราทุกคนเคยไปที่นั่น คุณสร้างอีเมลที่สวยงามด้วย GIF ที่น่าสนใจ ปุ่มที่เข้าถึงได้ และรูปภาพที่สะดุดตา จากนั้นคุณทดสอบ และดูดี... ยกเว้นใน Outlook ที่เสียหายทั้งหมด ผู้คนไม่สามารถมีส่วนร่วมในแบบที่คุณต้องการด้วยอีเมลที่เสียหาย

Outlook เป็นโรคระบาดของนักการตลาดผ่านอีเมลมาเป็นเวลานาน แต่ต้องเป็นอย่างนั้นหรือไม่? เราจะทำงานกับมันได้อย่างไร? อ่านต่อไปเพื่อดูว่าฉันมารัก Outlook ได้อย่างไร แม้ว่าจะมีข้อผิดพลาดมากมายก็ตาม ฉันจะครอบคลุม:

เวอร์ชันของ Outlook
เคล็ดลับสำหรับนิสัยใจคอ Outlook
รหัสสำหรับแก้ไข

Microsoft Outlook หลายเวอร์ชัน

ชื่อ “Outlook” ครอบคลุมไคลเอนต์อีเมลหลายตัวด้วยเอ็นจิ้นการเรนเดอร์สองแบบและการตั้งค่าการดูที่แตกต่างกันอย่างน้อยสองแบบ ทั้งหมดนี้อาจทำให้ปวดหัวได้หากคุณปล่อยมันไป มาดำดิ่งลงไปดูว่าเราจะยืดมันออกไปอีกหน่อยได้ไหม

Outlook 2007-2019

นี่คือ Outlook เวอร์ชันเดสก์ท็อปของ Windows สิ่งเหล่านี้ใช้ Word เป็นเครื่องมือในการเรนเดอร์ ซึ่งสมเหตุสมผลเมื่ออีเมลเป็นเหมือนการเขียนจดหมาย อ่า ง่ายกว่าครั้ง แต่สำหรับนักการตลาดผ่านอีเมล ไม่ได้ตัดมันเพื่อแสดงผลอีเมล HTML

120 DPI (จุดต่อนิ้ว) ช่วยเพิ่มความซับซ้อน ผู้ใช้ Windows สามารถเลือก 120 DPI เพื่อเพิ่มความละเอียดหน้าจอ หากเป็นเช่นนั้น โปรแกรมรับส่งเมลบนเดสก์ท็อปจะปฏิบัติตามนั้น และจะอัปเดตรูปภาพและข้อความให้ใหญ่ขึ้น ซึ่งสามารถสร้างความหายนะให้กับอีเมลของคุณได้

Outlook สำหรับ Mac

นี่คือ Outlook เวอร์ชันเดสก์ท็อปของ Mac มันใช้ Webkit เป็นเอ็นจิ้นการเรนเดอร์ ซึ่งหมายความว่าโดยปกติแล้วจะเทียบเท่ากับ Apple Mail และ iOS ในส่วนที่เกี่ยวข้องกับการแสดงผลอีเมล หากดูดีในเบราว์เซอร์ของคุณ ก็มีโอกาสที่ดีที่จะดูดีที่นี่

Outlook.com และแอป Outlook สำหรับอุปกรณ์เคลื่อนที่

ไคลเอ็นต์เหล่านี้ใช้กลไกการเรนเดอร์ Webkit หรือ Webkit ดังนั้นจึงให้การเรนเดอร์ HTML ที่ดีและโดยปกติแล้วจะไม่ทำให้อีเมลของคุณเสียหาย

Outlook Office 365

Outlook Office 365 มีสองเวอร์ชันที่แตกต่างกัน ได้แก่ ไคลเอ็นต์อีเมลบนเดสก์ท็อปและไคลเอ็นต์อีเมลบนเว็บ รุ่นเดสก์ท็อปคล้ายกับ Outlook 2007-2019 และใช้ Word เป็นเครื่องมือสร้างภาพ (ยากสำหรับอีเมล) ไคลเอนต์อีเมลบนเว็บใช้ Webkit หรือ Blink และแสดงอีเมลคล้ายกับ Outlook.com (ง่ายกว่ามาก)

ไม่มีอีเมลเสียอีกต่อไป

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

เรียนรู้วิธีการ →

One Outlook ที่จะปกครองพวกเขาทั้งหมด

ในเดือนมกราคม Microsoft ได้ประกาศวิสัยทัศน์ "One Outlook" เพื่อแทนที่เดสก์ท็อปไคลเอ็นต์ด้วยไคลเอ็นต์เดียวที่ทำงานได้ทุกที่โดยเริ่มในปี 2565

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

ทำหรือไม่ทำไม่มีการลอง

หัวของคุณยังหมุนอยู่หรือเปล่า?

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

มาดูปัญหาการแสดงผลทั่วไปบางอย่างในไคลเอนต์เดสก์ท็อป Outlook และวิธีแก้ปัญหา

รวมแอตทริบิวต์ความกว้างและความสูงไว้ในรูปภาพของคุณ

Outlook ไม่รองรับสไตล์ CSS สำหรับความกว้างและความสูง และหากคุณไม่ได้รวมแอตทริบิวต์ width และ height Outlook จะแสดงรูปภาพของคุณในขนาดจริง หากคุณกำลังใช้ภาพเรตินา (ซึ่งควรจะเป็น) นั่นหมายความว่าคุณจะได้ภาพขนาดยักษ์ที่จะทำลายอีเมลของคุณ

แนวโน้ม — ภาพ Retina ที่ไม่มีแอตทริบิวต์ width ใน Outlook ทำให้อีเมลกว้างขึ้น

รวมข้อความ ALT

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

ใช้ตาราง

อีเมลมีมานานแล้ว และคุณสามารถใช้บล็อก <div> ในโปรแกรมรับส่งเมลจำนวนมากได้ แต่ Outlook ไม่ใช่หนึ่งในนั้น Outlook จะไม่สนใจสไตล์ส่วนใหญ่ที่คุณใช้กับแท็ก <div> ซึ่งรวมถึงความกว้างและช่องว่างภายใน ดังนั้นจึงเป็นเรื่องสำคัญที่คุณต้องใช้แท็ก <table> สำหรับเนื้อหาของคุณแทน

ใช้โค้ดเฉพาะของ Outlook เพื่อแก้ปัญหาการแสดงผล

การดำเนินการนี้อาจไม่สามารถแก้ปัญหาทั้งหมดของคุณได้ แต่มีหลายครั้งที่การรวม CSS เฉพาะของ Outlook บางส่วนสามารถช่วยคุณแก้ปัญหาการแสดงผลที่คุณเห็นใน Outlook เท่านั้น หรือคุณอาจซ่อนบล็อกขนาดเล็กที่ไม่ได้ทำงานกับ Outlook และใช้รหัสเงื่อนไขเพื่อแสดงเวอร์ชันที่จะทำงานสำหรับรุ่นที่เฉพาะเจาะจงของ Outlook (เพิ่มเติมเกี่ยวกับรหัสเงื่อนไขในภายหลัง)

เพิ่มความสูงของเส้นให้กับรูปภาพขนาดเล็กหรือเซลล์ตาราง

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

<tr>
     <td style="font-size: 5px; line-height: 5px; mso-line-height-rule: exactly;">&nbsp;</td>
</tr>

แก้ไขปัญหาการปรับสเกล DPI

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

โชคดีที่มีการแก้ไข ขั้นแรก คุณต้องเพิ่มเนมสเปซ XML ให้กับแท็ก HTML:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

จากนั้น เพิ่มโค้ดเพื่อแก้ไขการปรับขนาดภาพก่อนแท็ก </head>:

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

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

✗ ไม่ใช่สิ่งนี้ด้วย width=”600″ :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="600">

ใช่ แบบนี้กับ style=”width:600px;” :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">

ที่จะแก้ไขปัญหาส่วนใหญ่ของคุณสำหรับไคลเอ็นต์ 120 DPI ดูการเปรียบเทียบแบบเคียงข้างกันก่อนและหลังการแก้ไขนี้:

Outlook 2013 ที่ 120 DPI (ไม่มีการแก้ไข)	Outlook 2013 ที่ 120 DPI (พร้อมการแก้ไข)

ต่างกันอย่างไร หืม?

อย่าคาดหวังว่าเอฟเฟกต์โฮเวอร์จะทำงาน

Outlook ไม่สนับสนุนคลาสหลอกแบบโฮเวอร์ คุณควรรวมไว้เพื่อสร้างการโต้ตอบเพื่อเพิ่มการเข้าถึงอีเมลของคุณในโปรแกรมรับส่งเมลอื่นๆ แต่อย่าแปลกใจเมื่อมันไม่ทำงานใน Outlook

อย่าพึ่ง GIF แบบเคลื่อนไหวเพื่อทำความเข้าใจประเด็นของคุณ

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

อย่าใช้เนื้อหาแบบโต้ตอบโดยไม่มีทางเลือกอื่น

อีเมลแบบโต้ตอบไม่ใช่เรื่องใหญ่สำหรับ Outlook ขึ้นอยู่กับการเข้ารหัส AMP หรือการแฮ็กช่องทำเครื่องหมาย ซึ่งทั้งสองอย่างนี้ไม่ได้รับการสนับสนุนใน Outlook

ในกรณีของ AMP สำหรับอีเมล ไฟล์ HTML จะแสดงแทนไฟล์ AMP ดังนั้นจึงไม่มีการเข้ารหัสเพิ่มเติมสำหรับสิ่งนั้น สำหรับการโต้ตอบการแฮ็กช่องทำเครื่องหมาย คุณจะต้องซ่อนเนื้อหาแบบโต้ตอบและแสดงทางเลือกของ Outlook อีกครั้ง การเข้ารหัสแบบมีเงื่อนไขคือเพื่อนของคุณที่นี่

อย่าเพิ่มช่องว่างภายในหรือระยะขอบให้กับรูปภาพ

Outlook ลบช่องว่างภายในและระยะขอบของรูปภาพ ตรวจสอบให้แน่ใจว่าได้เพิ่มช่องว่างภายในเซลล์ตารางรอบๆ รูปภาพแทน หรือถ้าคุณมีรูปภาพในเซลล์เดียวกันกับสำเนา ให้เพิ่มระยะขอบให้กับแท็กรอบๆ สำเนา (<h1>, <h2>, <p> เป็นต้น)

ความกลัวคือตัวฆ่าอีเมล: รหัสที่คุณต้องเผชิญต่อความกลัวของ Outlook

การเข้ารหัสอีเมลที่ยอดเยี่ยมสำหรับไคลเอนต์อีเมลเดสก์ท็อปของ Outlook นั้นต้องข้ามไปนอก HTML และ CSS "ปกติ" โค้ดมีสามประเภทที่จะช่วยทำให้อีเมลของคุณโดดเด่นในไคลเอ็นต์เหล่านี้ ได้แก่ การเข้ารหัสตามเงื่อนไข คุณสมบัติ MSO และ VML

การทำงานกับสิ่งใหม่ๆ อาจดูน่ากลัว แต่ฉันสัญญาว่ามันคุ้มค่า และช่วงเวลานั้นเมื่อคุณทำให้มันทำงานอย่างถูกต้อง? คุณจะรู้สึกเหมือนเพิ่งทำ Kessel Run ในเวลาน้อยกว่า 12 พาร์เซก

การเข้ารหัสแบบมีเงื่อนไข

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

<!--[if mso]>
<p>This content is only visible on Outlook desktop clients</p>
<![endif]-->

คุณยังสามารถใช้เพื่อกำหนดเป้าหมายเวอร์ชันเฉพาะของไคลเอ็นต์เดสก์ท็อปของ Outlook โดยเพิ่มหมายเลขเวอร์ชัน:

<!--[if mso 14]>
<p>This content is only visible on Outlook 2010 desktop client</p>
<![endif]-->

Outlook เป็นอะไรที่ตรงไปตรงมา ถึงแม้ว่าหมายเลขเวอร์ชันจะไม่ตรงกับชื่อของโปรแกรมรับส่งเมล:

Outlook 2000 = mso 9
Outlook 2002 = mso 10
Outlook 2003 = mso 11
Outlook 2007 = mso 12
Outlook 2010 = mso 14
Outlook 2013 = mso 15
Outlook 2016, Outlook 2019 และเดสก์ท็อป Office 365 = mso 16

จากนั้น คุณสามารถซับซ้อนยิ่งขึ้นได้โดยการกำหนดเป้าหมายกลุ่มลูกค้าที่มีน้อยกว่า (lt) มากกว่า (gt) น้อยกว่าหรือเท่ากับ (lte) หรือมากกว่าหรือเท่ากับ (gte) ตัวอย่างเช่น:

<!--[if (gte mso 9) | (lte mso 11)]>
<p>This content is only visible on Outlook 2000 to Outlook 2003</p>
<![endif]-->

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

คุณยังสามารถใช้ความคิดเห็นแบบมีเงื่อนไขเพื่อซ่อนเนื้อหาจาก Outlook โดยพูดว่า “if !mso” หมายถึง “ถ้าไม่ใช่ mso”:

<!--[if !mso]><!-->
<p>This is visible on anything except Outlook desktop clients</p>
<!--<![endif]-->

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

แต่มีวิธีกำหนดเป้าหมายไคลเอ็นต์เว็บด้วยเช่นกัน แม้ว่าจะไม่มีทางกำหนดเป้าหมายเว็บไคลเอ็นต์ Outlook หนึ่งไปยังอีกไคลเอ็นต์หนึ่งก็ตาม ดังนั้นเมื่อคุณกำหนดเป้าหมาย Outlook.com คุณจะกำหนดเป้าหมายเว็บไคลเอ็นต์ Office 365 ด้วย (แต่ไม่ใช่ไคลเอ็นต์เดสก์ท็อป)

คุณสามารถกำหนดเป้าหมายเว็บไคลเอ็นต์ Outlook ได้โดยการใช้ประโยชน์จากข้อเท็จจริงที่ว่า Outlook ต่อท้าย “x_” กับชื่อคลาสทั้งหมด แต่จะไม่ทำเช่นนี้สำหรับตัวเลือกแอตทริบิวต์ ดังนั้นหากคุณมีคลาส “foo” และต้องการจัดการกับไคลเอนต์เว็บ Outlook ให้แตกต่างออกไป คุณสามารถกำหนดเป้าหมายด้วยรหัสนี้:

[class~="x_foo"] { }

(ขอบคุณ Mark Robbins สำหรับการแก้ไขนี้และ Dylan Smith สำหรับ howtotarget.email)

คุณสมบัติของ MSO

ดังที่กล่าวไว้ข้างต้น มี CSS เฉพาะสำหรับ Outlook ที่คุณสามารถเพิ่มซึ่งจะมีผลกับไคลเอ็นต์อีเมลเดสก์ท็อป Outlook เท่านั้น ต่อไปนี้คือบางส่วนที่คุณจะพบว่าเป็นเรื่องปกติธรรมดา และคุณอาจเคยได้ยินเกี่ยวกับสิ่งเหล่านี้แล้ว:

mso-ซ่อน: ทั้งหมด;

คุณสมบัตินี้จะซ่อนทุกอย่างจากไคลเอนต์เดสก์ท็อป Outlook อีเมลจะถูกลบออกไปเมื่อมีการส่งต่ออีเมล ดังนั้นโปรดใช้อีเมลนี้โดยลำพังหากเป็นฟังก์ชันที่คุณรู้ว่าสมาชิกของคุณมักจะฉวยโอกาส คุณสามารถจับคู่กับโค้ดแบบมีเงื่อนไข "if not mso" ได้หากคุณเป็น "ตัวเข้ารหัส"

mso-line-height-rule: ตรงทั้งหมด;

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

mso-padding-alt

อันนี้ไม่ค่อยธรรมดาเท่าไหร่ แต่ฉันต้องใช้มันเป็นครั้งคราว ช่วยให้คุณสามารถประกาศช่องว่างภายในสำหรับ Outlook ได้โดยเฉพาะ ดังนั้น ถ้าช่องว่างภายในปกติที่คุณมีในเซลล์แสดงผลไม่ถูกต้องใน Outlook คุณสามารถใช้ mso-padding-alt เพื่อตั้งค่าที่เหมาะสมกับการออกแบบของคุณสำหรับ Outlook

mso-ansi-font-size

นี่เป็นอีกอันที่ฉันใช้เป็นครั้งคราวเท่านั้น ช่วยให้คุณสามารถกำหนดขนาดแบบอักษรเฉพาะสำหรับ Outlook ดังนั้น ถ้า Outlook แสดงแบบอักษรของคุณให้ใหญ่กว่าโปรแกรมรับส่งเมลอื่นๆ และคุณได้สำเนาบรรทัดสุดท้ายสั้นๆ ที่คุณไม่ต้องการ ให้เพิ่ม mso-ansi-font-size และกำหนดขนาดแบบอักษรที่เหมาะสมกับสำเนาของคุณ

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

VML

VML ย่อมาจาก Vector Markup Language เป็นเวอร์ชัน SVG ของ Microsoft แต่ภาษานั้นถูกคิดค่าเสื่อมราคาและไม่ค่อยได้ใช้ (ใช่ อีเมล!) Microsoft มีเอกสารประกอบสำหรับ VML ที่เก็บถาวรทางออนไลน์ ดังนั้นคุณยังคงสามารถค้นหาวิธีใช้เพื่อสร้างเวกเตอร์ใน Outlook ซึ่งยังคงได้รับการสนับสนุน ในทางทฤษฎี เมื่อ Microsoft เปลี่ยนไปใช้โมเดล "One Outlook" เราจะสามารถทิ้ง VML ไว้เบื้องหลังได้

ตรวจสอบให้แน่ใจว่าได้รวมการประกาศเนมสเปซ VML ฉันมักจะเพิ่มลงในองค์ประกอบ <html> ในเทมเพลตสำเร็จรูปของฉัน ดังนั้นฉันจึงสามารถใช้ VML ได้ทุกเมื่อที่ต้องการ:

<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">

เมื่อคุณมีแล้ว คุณสามารถเพิ่ม VML ใดๆ ลงในโค้ดของคุณภายในเงื่อนไข MSO:

<!--[if mso]>
    <v:rect fillcolor="blue" stroked="false" style="width:200px; height:50px;"></v:rect>
 <![endif]-->

โค้ดนั้นจะสร้างสี่เหลี่ยมสีน้ำเงินที่มีขนาด 200px x 50px อาจไม่ใช่สิ่งที่คุณสามารถใช้ได้จริงในอีเมล แต่คุณสามารถใช้ VML เพื่อเพิ่มปุ่มที่มีมุมโค้งมนให้กับโค้ดของคุณ ภาพพื้นหลัง และการไล่ระดับสีพื้นหลัง Campaign Monitor มีเครื่องมือสองอย่างที่สร้างโดย Stig เพื่อช่วยคุณสร้างภาพพื้นหลังหรือปุ่มที่มีมุมโค้งมน ฉันพบว่าวิธีนี้เป็นวิธีที่ยอดเยี่ยมในการเพิ่ม VML เมื่อคุณเพิ่งเรียนรู้

คุณยังสามารถใช้ VML เพื่อสร้างการวางตำแหน่งสัมบูรณ์แบบ faux เอฟเฟกต์เงา หรือทางเลือกสำรองเพื่อรองรับ CSS art ใน Outlook มีหลายสิ่งที่คุณทำได้ด้วย VML เมื่อคุณเริ่มใช้งาน

อยู่นานและอีเมล

Outlook เป็นความหายนะของนักการตลาดอีเมลมานานแล้ว แต่ก็ไม่จำเป็นต้องเป็นเช่นนั้น

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

ทดสอบอีเมลของคุณใน Outlook ด้วย Litmus

ดูว่าอีเมลของคุณจะมีลักษณะอย่างไรใน Outlook และแก้ไขปัญหาต่างๆ ก่อนที่คุณจะกดส่ง ด้วย Litmus ให้คุณรู้สึกมั่นใจว่าคุณกำลังสร้างอีเมลที่สมบูรณ์แบบพิกเซลซึ่งผู้ติดตามของคุณสามารถมีส่วนร่วมได้

เริ่มการทดลองใช้ฟรี →