ตาราง HTML ในอีเมล: อะไรที่อาจผิดพลาดได้

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

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

ทำไมเราใช้ตาราง

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

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

แม้ว่าสิ่งนี้จะมีการเปลี่ยนแปลงไปเมื่อเร็วๆ นี้ โดยเฉพาะอย่างยิ่งกับการอัปเดตที่สำคัญของ Gmail เมื่อปีที่แล้ว แต่โปรแกรมรับส่งเมลบางโปรแกรมยังไม่รองรับ HTML และ CSS มากนัก ที่โดดเด่นที่สุด: ไคลเอนต์อีเมลตระกูล Outlook ของ Microsoft ซึ่งใช้ Microsoft Word เป็นเครื่องมือแสดงผล เนื่องจาก Outlook ยังคงได้รับความนิยมอย่างมหาศาล (ปัจจุบันเป็นอันดับที่ 5 ในเครื่องมือติดตามส่วนแบ่งการตลาดของไคลเอนต์อีเมล) นักออกแบบอีเมลจึงยังคงต้องใช้ตารางในบางพื้นที่หากต้องการให้แคมเปญของตนแสดงอย่างเหมาะสมสำหรับสมาชิก

และเมื่อเราต้องพึ่งพาตาราง HTML มีหลายสิ่งหลายอย่างที่อาจผิดพลาดได้...

ทำให้เรื่องยุ่งยาก

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

อีเมลส่วนใหญ่ถูกสร้างขึ้นด้วยตารางจำนวนมาก จนกระทั่งเมื่อไม่นานมานี้ ตารางภายในตารางภายในตาราง—วิธีปฏิบัติที่เรียกว่าการซ้อน

เมื่อคุณซ้อนตารางหลายตารางภายในตารางอื่น คุณมักจะเกิดปัญหาภายในโค้ดของคุณ ง่ายมากที่จะวางตารางไว้ผิดที่หรือวางทับแท็ก HTML ที่จำเป็นเมื่อต้องเปลี่ยนสิ่งต่างๆ และสำหรับลูกค้าบางราย (มองมาที่คุณ Lotus Notes) คุณจะเห็นอีเมลแสดงผลได้ไม่ดีเมื่อคุณซ้อนตารางลึกเกินไป ด้วยเหตุนี้ เราจึงแนะนำให้สร้างอีเมลด้วยวิธีโมดูลาร์ ซึ่ง Brian Graves เพื่อนของเราเขียนถึง และพยายามจัดตารางที่ซ้อนกันให้น้อยที่สุด ตารางการทำรังแทบจะหลีกเลี่ยงไม่ได้ แต่การรักษาความลึกของการซ้อนไว้ที่ 4-6 ตารางสูงสุดจะช่วยหลีกเลี่ยงปัญหาต่างๆ

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

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

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

ไม่มีแท็ก

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

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

 <table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table>

คุณจะเห็นว่ามีแท็กที่แตกต่างกันสามแท็ก: ตาราง แถวของตาราง และเซลล์ของตาราง แท็กเหล่านี้เปิดแล้วปิด (แสดงด้วยสัญลักษณ์ /)

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

เครื่องมือต่างๆ เช่น W3C Markup Validation Service สามารถช่วยระบุแท็กที่ขาดหายไปได้ แท็กที่หายไปและมาร์กอัปที่มีรูปแบบไม่ถูกต้องเป็นสาเหตุที่เราแนะนำให้ใช้เทมเพลตอีเมลหรือเครื่องมือต่างๆ เช่น Builder's Partials and Snippets เพื่อช่วยสร้างอีเมล สิ่งเหล่านี้ไม่เพียงแต่ช่วยให้มั่นใจว่าโค้ดของคุณมีการเขียนอย่างดีและผ่านการทดสอบอย่างถูกต้อง แต่ยังมีประโยชน์เพิ่มเติมในการเร่งเวิร์กโฟลว์ของคุณ ช่วยให้คุณบรรลุตามกำหนดเวลาที่แน่นแฟ้นและทำให้ทีมของคุณมีความสุข

ไม่มีแอตทริบิวต์

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

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

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

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

 <table cellpadding="0" cellspacing="0"> </table>

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

เรียนรู้วิธีแก้ไขปัญหา

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

รับตั๋ว Litmus Live ของคุณ! ลงทะเบียนวันนี้เพื่อเฉลิมฉลองอีเมลกับเรา! ลงทะเบียนตอนนี้ →