ข้อผิดพลาดในการเข้ารหัสอีเมลที่พบบ่อยที่สุดและวิธีหลีกเลี่ยง

เผยแพร่แล้ว: 2020-10-28

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

ในบทความนี้ เราจะพูดถึงข้อผิดพลาดในการเขียนโค้ดอีเมล HTML ทั่วไป และแบ่งปันคำแนะนำในการหลีกเลี่ยง

สารบัญ
  1. ปัญหาการแสดงอีเมลมาจากไหน
  2. ข้อผิดพลาดในการเข้ารหัสอีเมลที่พบบ่อยและวิธีหลีกเลี่ยง
    1. ไม่มีเวอร์ชันข้อความธรรมดา
    2. การใช้ JavaScript, ActiveX, Flash และอื่นๆ อีกมาก
    3. มีการเปลี่ยนเส้นทางมากเกินไป
    4. ลิงค์ที่สั้นลง
    5. ขนาดไฟล์เนื้อหาอีเมลขนาดใหญ่
    6. แบบอักษรและสีมากเกินไป
    7. การคัดลอกโค้ด HTML ของเทมเพลตอีเมลจากโปรแกรมแก้ไขข้อความหรือเว็บไซต์
    8. การใช้รหัสสี HEX สามหลัก
    9. เอกสารแนบ
    10. ไม่มีข้อความแสดงแทน
    11. เลย์เอาต์เฉพาะรูปภาพ
  3. อีกวิธีหนึ่งในการหลีกเลี่ยงข้อผิดพลาดในการเขียนโค้ดอีเมล
  4. รายการตรวจสอบเพื่อหลีกเลี่ยงข้อผิดพลาดในการเข้ารหัสอีเมล HTML ทั่วไป

ปัญหาการแสดงอีเมลมาจากไหน

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

ลักษณะทางเทคนิคของอุปกรณ์ของผู้ใช้

มีลักษณะทางเทคนิคอย่างน้อยสองประการของอุปกรณ์ใดๆ ที่คุณควรคำนึงถึง:

  1. ความละเอียดหน้าจอ — ขนาดของหน้าจอ กำหนดเป็นพิกเซล ตัวอย่างเช่น iPhone X มีความละเอียดหน้าจอ 1125×2436 พิกเซล ถ้าอีเมลของคุณมีข้อความสองคอลัมน์ แต่ละคอลัมน์ 600 พิกเซลก็จะแสดงอย่างไม่ถูกต้อง
  2. PPI หรือพิกเซลต่อนิ้ว — จำนวนพิกเซลในหนึ่งนิ้วของหน้าจอ PPI ของ iPhone X คือ 458 ลองนึกภาพ: คุณต้องเพิ่มปุ่มการทำงานลงในอีเมลของคุณ หากปุ่มน้อยกว่า 44 จุด ซึ่งสำหรับ iPhone X หมายถึง 132×132 พิกเซล มันจะใช้พื้นที่หน้าจอน้อยกว่าหนึ่งในสามของตารางนิ้ว และผู้ใช้แทบจะไม่สามารถแตะปุ่มนั้นได้

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

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

ขั้นแรก คุณควรเพิ่มข้อความค้นหาสื่อในส่วน head ของอีเมลของคุณ ตัวอย่างเช่น @media screen และข้อความค้นหา (max-width: 600px) หมายความว่าการออกแบบอีเมลจะได้รับการปรับให้เหมาะสมหากความกว้างของหน้าจอน้อยกว่า 600 พิกเซล หากความกว้างของหน้าจอมากกว่า 600 พิกเซล ผู้ใช้จะเห็นอีเมลฉบับนี้ในเวอร์ชันความกว้างคงที่

ประการที่สอง คุณควรสร้างอีเมลในรูปแบบของตารางที่มีเซลล์อยู่ในนั้น:

 <ตาราง>
<tr>
    <td>...</td>
</tr>
</table>

จากนั้น ให้คุณเพิ่มสไตล์สำหรับแต่ละเซลล์ เช่น

 <td><img src="http://somewebsite.com/someimage.jpg" width="600" alt=""></td>

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

ไคลเอนต์อีเมล

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

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

promo email code
รหัสจากอีเมลส่งเสริมการขายพร้อมส่วนลด

อีเมลไคลเอ็นต์แต่ละรายมีเอ็นจิ้นการเรนเดอร์ของตัวเอง ซึ่งหมายความว่าอีเมลเดียวกันซึ่งเปิดผ่านไคลเอนต์อีเมลที่แตกต่างกันสามารถมีลักษณะที่แตกต่างกันโดยสิ้นเชิง

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

ส่วนแบ่งการตลาดของลูกค้าอีเมล

email client market share
คำนวณจาก 996 ล้านรายการที่ติดตามโดย Litmus ในเดือนกันยายน 2020 ที่มา: Email Client Market Share

โปรแกรมรับส่งเมลทั้งหมดเหล่านี้มีลักษณะเฉพาะบางอย่างที่คุณควรคำนึงถึงเมื่อเข้ารหัสอีเมล HTML

ตัวอย่างเช่น Apple Mail สำหรับ iOS ไม่รองรับ:

  • คุณสมบัติ CSS inline-size ;
  • แบบสอบถามสื่อ @media (orientation)
  • ลิงค์สมอ;
  • รูปแบบภาพ HDR, PPM และ SVG และอื่นๆ

Gmail รองรับคุณสมบัติ CSS และการสืบค้นสื่อต่างๆ นอกเหนือจาก:

  • box-shadow, text-shadow, และคุณสมบัติ CSS อื่น ๆ
  • แบบสอบถามสื่อ @media (prefers-color-scheme) และอื่นๆ

ข้อผิดพลาดในการเข้ารหัสอีเมลที่พบบ่อยและวิธีหลีกเลี่ยง

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

  • CSS2 แทน CSS3
  • HTML4 แทน HTML5
  • สีแทนภาพพื้นหลัง
  • table-layout แทน <div> ,
  • CSS แบบอินไลน์แทนชุดสไตล์หรือบล็อก <style>

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

ไม่มีเวอร์ชันข้อความธรรมดา

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

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

plain text email
เวอร์ชันข้อความธรรมดาของอีเมล

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

เจาะลึก: อีเมลข้อความธรรมดาอธิบายเป็นภาษาธรรมดา

การใช้ JavaScript, ActiveX, Flash และอื่นๆ อีกมาก

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

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

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

email example
อีเมลจาก NiftyImages

มีการเปลี่ยนเส้นทางมากเกินไป

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

เจาะลึก: วิธีปรับปรุงความเร็วเว็บไซต์ช้า

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

ลิงค์ที่สั้นลง

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

เจาะลึก: วิธีป้องกันไม่ให้อีเมลไปที่สแปม

การป้องกัน อย่าใช้ลิงก์ที่สั้นลง หากเป้าหมายของคุณคือการทำให้อีเมลของคุณดูเรียบร้อย โดยไม่ต้องมี URL ยาวๆ คุณควรใช้แท็ก HTML ต่อไปนี้: <a href="URL">...</a> คุณสามารถแทรก URL ใดก็ได้ที่นี่ ไม่ว่าจะยาวแค่ไหน

long link
ลิงก์ที่สมบูรณ์ซ่อนอยู่ในอีเมล Sephora เรียบร้อยแล้ว

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

ขนาดไฟล์เนื้อหาอีเมลขนาดใหญ่

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

ดูจดหมายข่าวจากค่ายเพลง เมื่อเปิดผ่าน Gmail จะถูกตัดออก

clipped email example
อีเมลที่ถูกตัดใน Gmail

หากต้องการดูเวอร์ชันเต็ม สมาชิกต้องแตะลิงก์

full version of a clipped email
เวอร์ชันเต็มของอีเมลที่ถูกตัดใน Gmail

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

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

แบบอักษรและสีมากเกินไป

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

เจาะลึก: เคล็ดลับการออกแบบอีเมลและข้อผิดพลาดทั่วไปที่ต้องระวัง

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

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

distracting email
อีเมลที่มีสีสันมากเกินไปอาจทำให้เสียสมาธิได้

การป้องกัน เลือกแบบอักษรที่เหมาะกับอีเมล เช่น Arial, Comic Sans MS, Courier New, Times New Roman หรือ Verdana: รองรับโดยไคลเอนต์อีเมลยอดนิยมส่วนใหญ่ ขนาดแบบอักษรของข้อความไม่ควรน้อยกว่า 12-13 พิกเซล มิฉะนั้น ผู้ใช้จะต้องซูมเข้าอีเมลของคุณหรือขยี้ตา

เจาะลึก: วิธีเลือกแบบอักษรที่ดีที่สุดสำหรับการตลาดผ่านอีเมล

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

การคัดลอกโค้ด HTML ของเทมเพลตอีเมลจากโปรแกรมแก้ไขข้อความหรือเว็บไซต์

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

การป้องกัน หากต้องการเขียนโค้ดอีเมล ให้ใช้โปรแกรมแก้ไขข้อความที่ไม่ได้เพิ่มการจัดรูปแบบของตนเอง เช่น Notepad สำหรับ Windows หรือ TextEdit สำหรับ Mac นอกจากนี้ยังมีเครื่องมือออนไลน์บางอย่างที่สามารถล้างการจัดรูปแบบของคุณได้ เช่น TextCleanr คุณยังสามารถใช้เครื่องมือ HTML Cleaner ซึ่งช่วยให้คุณสร้างอีเมลในตัวแก้ไขที่ใช้งานง่าย และตรวจสอบโค้ดได้พร้อมกัน

การใช้ HTML Cleaner

การใช้รหัสสี HEX สามหลัก

ปัญหาที่อาจเกิดขึ้น แม้ว่ารูปแบบสีสามหลักและหกหลักควรจะเท่ากัน แต่บางครั้งไคลเอ็นต์อีเมลก็แสดงรูปแบบสามหลักในลักษณะที่ต่างออกไปเล็กน้อย ตัวอย่างเช่น ใน Gmail คุณเสี่ยงที่จะได้สีม่วงแทนที่จะเป็นสีดำตามแผน: color: #000 เปลี่ยนเป็น color: #500050

color display issues in email
ตัวอย่างปัญหาเกี่ยวกับสีในอีเมล

การป้องกัน ตามหลักการทั่วไป ให้ใช้รูปแบบสีหกหลักและตรวจสอบให้แน่ใจว่าคุณใช้สีนี้ตลอดทั้งอีเมล

เอกสารแนบ

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

การป้องกัน ให้ลิงก์ไปยังหน้าโหลดไฟล์แทนการเพิ่มสิทธิ์ไฟล์ในอีเมล

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

download link in email
ตัวอย่างลิงก์ไปยังไฟล์ในอีเมล

ไม่มีข้อความแสดงแทน

ปัญหาที่อาจเกิดขึ้น ผู้ใช้บางคนปิดใช้งานการดาวน์โหลดรูปภาพในเบราว์เซอร์ หากพวกเขาได้รับอีเมล ซึ่งรวมถึงรูปภาพที่ไม่มีข้อความแสดงแทน พวกเขาจะเห็นเฉพาะช่องว่างแทนที่จะเป็นรูปภาพ และจะไม่เข้าใจจุดประสงค์ของอีเมล

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

การป้องกัน เพิ่มแอตทริบิวต์ alt ให้กับรูปภาพทั้งหมดที่คุณใช้ ตรวจสอบให้แน่ใจว่าคุณทำถูกต้อง — โดยเพิ่มลงในแท็ก img : <img alt="text"> จำกัดข้อความแสดงแทนไว้ที่ 125 อักขระ รวมทั้งการเว้นวรรค โดยปกติแล้ว การเพิ่มคำสองสามคำที่อธิบายภาพได้อย่างแม่นยำก็เพียงพอแล้ว หากคุณมีที่ว่างเหลือ คุณสามารถเพิ่มบริบทให้กับคำอธิบายนี้ได้

ดูข้อความที่ตัดตอนมาจากอีเมล Sephora

sephora email
ข้อความที่ตัดตอนมาจากอีเมลของ Sephora

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

cta alt text
ตัวอย่างของข้อความแสดงแทน

เลย์เอาต์เฉพาะรูปภาพ

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

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

ลองดูอีเมลนี้จาก Ecwid มีการออกแบบที่ตอบสนองซึ่งมีการจัดวางตารางและ max-width: 570px สื่อ เช่น max-width: 570px อีเมลนี้รวมเนื้อหาประเภทต่างๆ เข้าไว้ด้วยกัน ได้แก่ รูปภาพและข้อความที่มีสีสันและดึงดูดใจ ใช้รูปแบบสีหกหลัก เช่น color:#979797 หรือ color:#4A4A4A ในอีเมลมีรูปภาพไม่มากนัก ขนาดจึงไม่ใหญ่เกินไป ยิ่งไปกว่านั้น ไม่พบลิงก์ที่สั้นลงหรือเปลี่ยนเส้นทางในอีเมล โดยรวมแล้ว อีเมลนี้ตรงตามคำแนะนำส่วนใหญ่ที่ให้ไว้ข้างต้น

balanced email
ตัวอย่างอีเมลที่มีความสมดุลจาก Ecwid

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

อีกวิธีหนึ่งในการหลีกเลี่ยงข้อผิดพลาดในการเขียนโค้ดอีเมล

มีความจริงข้อหนึ่ง: คุณจะไม่ทำผิดพลาดในการเขียนโค้ด HTML ถ้าคุณไม่เขียนโค้ด โชคดีที่การออกแบบอีเมลแบบไม่มีโค้ดกำลังรอคุณอยู่ด้วย SendPulse

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

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

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

ด้านล่างนี้ คุณจะพบกฎหลักในการหลีกเลี่ยงข้อผิดพลาดในการเข้ารหัสอีเมล HTML ทั่วไป ตามกฎเหล่านี้ คุณสามารถหลีกเลี่ยงปัญหาเรื่องการส่งมอบและการแสดงอีเมลของคุณได้

  • เพิ่มเวอร์ชันข้อความธรรมดาในอีเมลของคุณ
  • ห้ามใช้ JavaScript, ActiveX, Flash หรืออย่างอื่น หากคุณต้องการเพิ่มวิดีโอหรือเสียง ให้อัปโหลดไปยังเว็บไซต์และระบุลิงก์
  • พยายามหลีกเลี่ยงการเปลี่ยนเส้นทางเพื่อไม่ให้เพิ่มเวลาในการโหลดหน้าเว็บ
  • อย่าใช้ลิงก์ที่สั้นลง — แปลงข้อความหรือรูปภาพเป็นลิงก์โดยใช้ HTML
  • พยายามจำกัดขนาดเนื้อความอีเมลของคุณไว้ที่ 100 KB — หรืออย่างน้อยตรวจสอบขีดจำกัดของผู้ให้บริการส่งของคุณและไคลเอนต์อีเมลที่สมาชิกของคุณใช้บ่อยที่สุด
  • เลือกแบบอักษรที่เหมาะกับอีเมล เช่น Arial, Comic Sans MS, Courier New, Times New Roman หรือ Verdana
  • พยายามอย่ารวมสีมากกว่าสองสีในอีเมลเดียว มิฉะนั้นจะทำให้เสียสมาธิ
  • อย่าคัดลอกข้อความและรูปภาพสำหรับอีเมลของคุณจากโปรแกรมแก้ไขข้อความ เช่น MS Word หรือเว็บไซต์ เนื่องจากอาจมีความเสี่ยงต่อการจับรูปแบบที่ไม่จำเป็น
  • ใช้รูปแบบสีหกหลัก
  • ห้ามแนบไฟล์ — ให้ลิงก์ไปยังหน้าโหลดไฟล์แทน
  • อย่าลืมเพิ่มข้อความแสดงแทนให้กับรูปภาพ
  • อย่าสร้างอีเมลของรูปภาพเท่านั้น - เพิ่มข้อความเสมอ
  • อย่าลืมทดสอบอีเมลก่อนเริ่มแคมเปญ ใช้โปรแกรมรับส่งเมลและอุปกรณ์ต่างๆ อย่างน้อยสามเครื่อง

และไม่ต้องคิดมาก — เริ่มใช้ SendPulse ได้ฟรี!