#NoFailMail: 5 การออกแบบอีเมลที่พบบ่อยที่สุดล้มเหลว (และวิธีหลีกเลี่ยง)

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

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

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

สู่ความล้มเหลว!

อีเมลล้มเหลว # 1 ไม่ได้ออกแบบหน้าจอหลายขนาด

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

พวกเขาอาจไม่ได้อ่านข้อความของคุณด้วยซ้ำ แต่พวกเขาสามารถฟังในขณะที่ผู้ช่วยในบ้านเช่น Alexa หรือ Google Home หรือโปรแกรมอ่านหน้าจออ่านอีเมลของคุณออกมาดัง ๆ..

การศึกษาในปี 2016 โดย Litmus and Fluid พบว่า 51% ของสมาชิกทั้งหมดยกเลิกการสมัครรับอีเมลที่ไม่แสดงหรือใช้งานได้ไม่ดีบนสมาร์ทโฟน และ 43% รายงานว่าอีเมลเหล่านั้นเป็นสแปม สถิติเหล่านี้พิสูจน์ว่าการออกแบบสำหรับหลายหน้าจอไม่ใช่เรื่องดีที่จะมีอีกต่อไป

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

• แอปเปิ้ลไอโฟน 29%
• แอปเปิ้ลไอแพด 10%
• ซัมซุงเมล 4%
• Google แอนดรอยด์ 3%

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

ebook ฟรีของเรา The Ultimate Guide to Email Optimization and Troubleshooting จะช่วยให้คุณเข้าใจว่าแนวทางใดน่าจะได้ผลดีที่สุดหากคุณกำลังเปลี่ยนจากรูปแบบที่เน้นเดสก์ท็อปไปเป็นเวอร์ชันที่ปรับให้เหมาะกับอุปกรณ์เคลื่อนที่

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

1. ใช้ขนาดตัวอักษรที่ใหญ่ขึ้น
   ฟังดูบ้า - แบบอักษรที่ใหญ่กว่าบนหน้าจอที่เล็กกว่า - แต่ใช้งานได้ ความสามารถในการอ่านโดยไม่บังคับให้ผู้อื่นบีบ ซูม หรือเลื่อนข้อความของคุณจากด้านหนึ่งไปอีกด้านเพื่อดูเนื้อหาของคุณคือเป้าหมาย เราขอแนะนำขนาดตัวอักษรขั้นต่ำ 14px สำหรับเนื้อหาและ 22px สำหรับพาดหัว
2. ออกแบบ CTA ที่เป็นมิตรต่อการสัมผัส
   นิ้วไม่แม่นยำเท่าเมาส์คอมพิวเตอร์ของคุณ แทนที่ลิงก์ที่คลิกได้ด้วยปุ่ม จากนั้นปรับขนาดปุ่มเหล่านั้นให้เล็กที่สุด 44px X 44px ซึ่งมีขนาดประมาณปลายนิ้วมือโดยเฉลี่ย
3. ผอมลงถึงหนึ่งคอลัมน์
   เลย์เอาต์อีเมลสองหรือสามคอลัมน์อ่านได้ไม่ดีในหน้าจอขนาดเล็ก จำไว้ว่าเป้าหมายของคุณคือทำให้เนื้อหาอีเมลของคุณอ่านง่ายโดยไม่ต้องบีบ ซูม หรือเลื่อนด้านข้าง หากคุณยังไม่พร้อมที่จะเปลี่ยนไปใช้การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ การเลือกเค้าโครงคอลัมน์เดียวจะทำให้อีเมลของคุณสามารถอ่านได้ง่ายขึ้นในขนาดหน้าจอที่มากขึ้น
4. ปรับปรุงเนื้อหาของคุณ
   คุณต้องการเนื้อหาทั้งหมดในอีเมลของคุณ จริงๆ เพื่อที่จะได้รับคลิกหรือการแปลงหรือไม่? ใช้การติดตามลิงก์และเครื่องมืออื่นๆ เพื่อค้นหาว่าผู้อ่านของคุณคลิกอะไรและไม่สนใจอะไร ย้ายไปยังบล็อกการคัดลอกหลักหนึ่งบล็อก หรือสูงสุดสองบล็อก ดึงดูดความสนใจด้วยรูปภาพฮีโร่ที่แข็งแกร่ง แทนที่จะเป็นกลุ่มรูปภาพผลิตภัณฑ์ขนาดเล็ก
   ตั้งเป้าไปที่ประโยคที่สั้นลงและคัดลอกบล็อก สำเนาห้าบรรทัดในรูปแบบเดสก์ท็อปมาตรฐานสามารถตัดเป็น 10 หรือ 15 บนมือถือได้อย่างง่ายดาย
5. ปั๊มพื้นที่สีขาว
   พื้นที่สีขาวคือพื้นที่ว่างรอบรูปภาพและคัดลอกบล็อก ใช้มันอย่างเสรีเพื่อมุ่งความสนใจไปที่ส่วนต่างๆ ของเนื้อหา เพื่อให้ปุ่ม CTA มีพื้นที่ว่างมากขึ้น และแบ่งย่อหน้าในบล็อกการคัดลอก

อีเมลล้มเหลว #2: ปล่อยให้ลิงก์สีน้ำเงินทำลายการออกแบบของคุณ

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

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

โชคดีที่มีวิธีปิดการใช้งานลิงก์สีน้ำเงินเหล่านั้น ใน iOS Mail คุณสามารถเขียนทับลิงก์สีน้ำเงินได้โดยกำหนดสไตล์ตัวเลือกตัวตรวจจับข้อมูลของ Apple Mail (เรียนรู้วิธี) ลิงก์สีน้ำเงินใน Gmail สามารถแก้ไขได้โดยใช้วิธีการ (นั่นคือการใส่ที่อยู่หรือหมายเลขโทรศัพท์ลงในแท็กและกำหนดรูปแบบสำหรับช่วงนั้น หรือคุณจะเขียนทับสไตล์เริ่มต้นทั้งหมดโดยเพิ่มการประกาศรูปแบบเฉพาะของ Gmail ลงใน CSS ของคุณ (มีวิธีการดังนี้ ).

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

อีเมลล้มเหลว #3: รูปภาพผิดพลาด

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

1. ใช้รูปแบบภาพที่ไม่ถูกต้อง
   วิธีแก้ไขที่นี่ไม่ใช่การใช้รูปแบบภาพที่ "ถูกต้อง" ไม่ว่าจะเป็น JPEG, GIF, PNG หรือ SVG เนื่องจากไม่มีรูปแบบที่ถูกต้องเพียงรูปแบบเดียว แต่ละรูปแบบจะแตกต่างจากรูปแบบอื่นๆ ในขนาดไฟล์ การบีบอัด คุณภาพ และกรณีการใช้งานที่ดีที่สุด สำหรับการเปรียบเทียบข้อดีและข้อเสียของรูปแบบภาพทั่วไปโดยละเอียด โปรดดูที่ “PNG, GIF หรือ JPEG? รูปแบบรูปภาพที่ดีที่สุดสำหรับอีเมลคืออะไร” ในบล็อกสารสีน้ำเงิน
2. ไม่ปรับให้เหมาะสมสำหรับจอภาพ Retina
   “จอภาพ Retina” เป็นคำที่ Apple สร้างขึ้นเพื่ออ้างถึงจอภาพ DPI สูงที่เห็นบนอุปกรณ์พกพา รูปภาพที่ไม่ได้รับการปรับให้เหมาะกับจอภาพ Retina มักจะปรากฏเป็นภาพเบลอหรือคลุมเครือ ซึ่งนำไปสู่ประสบการณ์การรับชมที่ด้อยกว่า
   

   

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

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

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

อีเมลล้มเหลว #4: ปิดไม่ออกแบบรูปภาพ

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

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

1. ใช้ข้อความ ALT พื้นฐานหรือที่มีสไตล์ ข้อความ ALT คือการรวมกันของคำที่คุณเลือกเพื่ออธิบายรูปภาพและปรากฏขึ้นเมื่อรูปภาพถูกบล็อก ควรเป็นแนวทางปฏิบัติที่เป็นมาตรฐาน เครื่องมือแก้ไขอีเมลส่วนใหญ่จะให้พื้นที่แก่คุณในการเขียนคำอธิบายรูปภาพของคุณ แต่การเรียกใช้อย่างรวดเร็วผ่านกล่องจดหมายจะเผยให้เห็นอีเมลอื่นเกือบทุกฉบับมีรูปภาพ แต่ไม่มีข้อความ ALT อีเมลที่มีรูปภาพจำนวนมากจะมีลักษณะเช่นนี้โดยไม่มีข้อความ ALT เมื่อปิดใช้งานรูปภาพ:
   นี่คืออีเมลฉบับเดียวกันกับที่เปิดใช้งานรูปภาพ ดูว่าลูกค้าของคุณจะพลาดอะไร?
   แนวทางปฏิบัติเกี่ยวกับข้อความ ALT ที่ดีคือการเขียนคำอธิบายที่มีประสิทธิภาพ ไม่ใช่แค่ป้ายกำกับรูปภาพ หากต้องการก้าวไปอีกขั้น ให้ลองใช้ข้อความ ALT ที่มีสไตล์ ที่นี่ คุณเพิ่ม CSS แบบอินไลน์เล็กน้อยเพื่อเปลี่ยนแบบอักษร สี ขนาด สไตล์ และน้ำหนักของข้อความ ALT
2. ใช้ปุ่มกันกระสุน
   หากคุณใส่คำกระตุ้นการตัดสินใจลงในรูปภาพ จะมองไม่เห็นเมื่อปิดรูปภาพ ปุ่มกันกระสุนใช้ HTML และ CSS แทนรูปแบบรูปภาพ เช่น JPG และ GIF พวกเขาไม่พึ่งพาการแสดงภาพที่ปรากฏในอีเมล และนี่คืออีเมลฉบับเดียวกันกับที่เปิดใช้งานรูปภาพ:

Jason Rodriguez ชุมชน Litmus และผู้เผยแพร่ผลิตภัณฑ์ ได้สรุปแนวทางพื้นฐานสี่ประการในการออกแบบปุ่มในคู่มือของเขา "The Ultimate Guide to Bulletproof Buttons for Email Design" ลองดูโค้ด ตัวอย่าง และข้อดีข้อเสียของแต่ละวิธี

อีเมลล้มเหลว #5 ไม่ปรับให้เหมาะสมสำหรับอีเมลข้อความธรรมดา

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

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

• เขียนพาดหัวข่าวที่สั้นแต่ชัดเจน ใช้พื้นที่สีขาวอย่างน้อยหนึ่งบรรทัดเพื่อแยกความแตกต่างระหว่างบรรทัดแรกกับบล็อกการคัดลอกที่อยู่ด้านล่าง ตั้งค่าด้วยอุปกรณ์การพิมพ์ เช่น ขีดกลางหรือเครื่องหมายเท่ากับ
• ทำลายบล็อคสำเนายาวๆ ใช้บล็อคการคัดลอกให้มากขึ้นแต่สั้นลงเพื่อหลีกเลี่ยงการคัดลอกแม่น้ำสีเทาที่น่าสะพรึงกลัวและอ่านไม่ได้
• สร้างลำดับชั้นข้อมูลด้วยรายการ อีเมลข้อความธรรมดาทุกประเภทใช้ฟอนต์และขนาดพอยต์เหมือนกัน ดังนั้น คุณต้องทำงานให้หนักขึ้นเพื่อแนะนำผู้อ่านของคุณเกี่ยวกับประเด็นสำคัญของคุณ ใช้รายการเพื่อเน้นข้อมูลในชุดข้อมูล ตั้งค่าแต่ละรายการด้วยการกำหนดที่เป็นมิตรกับข้อความ เช่น ขีดกลาง (–) หรือเครื่องหมายดอกจัน (*) (สัญลักษณ์แสดงหัวข้อย่อยไม่ทำงานในข้อความธรรมดา)
• ใช้พื้นที่สีขาวอย่างเสรี พื้นที่สีขาวจัดระเบียบข้อมูลที่เกี่ยวข้องเพื่อให้สแกนได้ง่าย ใช้ระยะขอบกว้างและตัวแบ่งบรรทัดพิเศษระหว่างบล็อคการคัดลอก คำกระตุ้นการตัดสินใจ และส่วนหัวหรือส่วนท้ายของผู้ดูแลระบบ
• กำหนด CTA ผู้คนทำอะไรก่อนที่จะมีปุ่ม CTA? พวกเขาใช้ตัวเรียกความสนใจเช่นช่องว่างเพื่อแยกพวกเขาออกจากสำเนาอื่น ๆ และใช้อุปกรณ์การพิมพ์เช่นลูกศร (>> และ <<) เพื่อตั้งค่า หลีกเลี่ยงรายการ CTA ที่ยาวเหยียด และล้อมรอบด้วยพื้นที่สีขาวเพื่อให้เหมาะกับการคลิกหรือใช้งานนิ้ว

อีเมลนี้แสดงให้เห็นถึงแนวทางปฏิบัติที่ดีที่สุดทั้งหมดสำหรับอีเมลข้อความธรรมดา:

เราได้กล่าวถึงวิธีอื่นๆ ในการส่ง #NoFailMail ในบล็อกโพสต์ก่อนหน้านี้: เคล็ดลับและแหล่งข้อมูลเพิ่มเติมสำหรับ #NoFailMail

• #NoFailMail: เหตุใดการหลีกเลี่ยงข้อผิดพลาดจึงเป็นกุญแจสู่ความสำเร็จของอีเมล
• การทดสอบช่วยให้คุณหลีกเลี่ยง 5 อีเมลที่ใหญ่ที่สุดล้มเหลวได้อย่างไร
• 5 การเขียนคำโฆษณาล้มเหลวที่คุณควรหลีกเลี่ยง

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