Email Ready: สร้างอีเมล HTML จาก Figma หรือรูปภาพ

การเปลี่ยนดีไซน์ให้เป็นอีเมล HTML ยากกว่าการเปลี่ยนเป็นหน้าเว็บ เพราะกล่องจดหมายไม่ใช่เบราว์เซอร์ Email Ready คือโหมดเอาต์พุตของ MarkupGen ที่สร้างมาเพื่องานนี้โดยเฉพาะ และมีให้เลือกสองวิธี: generate โค้ด HTML สำหรับอีเมล จากดีไซน์ Figma หรือ สร้างอีเมลจากรูปภาพ ด้วยการตัดดีไซน์เป็นชิ้นและใส่ลิงก์ที่คลิกได้ บทความนี้อธิบายทั้งสองวิธี ควรใช้วิธีไหนเมื่อไร และทุกอย่างที่เครื่องมือจัดการให้คุณ

Email Ready คืออะไร

ทุกโปรเจกต์ใน MarkupGen มีรูปแบบเอาต์พุต Responsive HTML ใช้สำหรับเว็บไซต์และ landing page ส่วน Email Ready (ในอินเทอร์เฟซภาษาไทยแสดงเป็น "พร้อมสำหรับอีเมล") ใช้สำหรับจดหมายข่าวและอีเมลการตลาด แทนที่จะใช้ flexbox และ grid มันสร้าง HTML แบบตารางพร้อม CSS แบบ inline ซึ่งเป็นรูปแบบที่ Gmail, Outlook และ Apple Mail แสดงผลได้

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

วิธีที่ 1: generate โค้ด HTML ที่พร้อมสำหรับอีเมล

นี่คือวิธีเริ่มต้น และเหมาะเมื่ออีเมลประกอบด้วยข้อความ ปุ่ม และรูปภาพเรียบง่ายเป็นหลัก

• เลย์เอาต์แบบตารางพร้อม CSS แบบ inline ไม่มี flexbox ไม่มี grid และไม่มีสไตล์ชีตภายนอกให้โปรแกรมอีเมลตัดทิ้ง
• ข้อความจริง หัวข้อและย่อหน้ายังคงเป็นข้อความ จึงเลือกได้ โปรแกรมอ่านหน้าจออ่านได้ และยังแสดงแม้รูปภาพถูกบล็อก
• เอฟเฟกต์ที่อีเมลแสดงไม่ได้จะถูกแปลงเป็นรูปภาพ ส่วนของดีไซน์ที่ไม่มีวิธีเขียนที่ปลอดภัยสำหรับอีเมลจะถูกแปลงเป็นภาพ แทนที่จะหายไปหรือแสดงผลพัง
• เอกสาร XHTML 1.0 Transitional ที่ถูกต้อง doctype, namespace และแอตทริบิวต์ถูกปรับให้เป็นมาตรฐานตอนส่งออก เพราะเป็นการประกาศที่ Outlook, Gmail และ Apple Mail รองรับได้สม่ำเสมอที่สุด
• แก้ไขได้ทันที เปลี่ยนข้อความและสลับรูปภาพในตัวแก้ไขก่อนส่งออก
• ตัววัดขนาด การ์ด "ส่งออกอีเมล" แสดงขนาด HTML ปัจจุบันเทียบกับขีดจำกัด คุณจึงเห็นปัญหาก่อนผู้รับ

ปัญหา 102KB: ทำไม Gmail ถึงตัดอีเมล

Gmail จะตัดข้อความใดก็ตามที่ HTML มีขนาดเกินประมาณ 102KB ผู้รับจะเห็นเพียงส่วนบนของอีเมลกับลิงก์ "ดูข้อความทั้งหมด" ส่วนที่อยู่ใต้รอยตัด ซึ่งมักเป็นปุ่ม call to action และลิงก์ยกเลิกการรับข่าวสาร จะถูกซ่อนไว้

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

วิธีที่ 2: สร้างอีเมลจากรูปภาพ

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

วิธีการทำงาน:

1. เริ่มจากรูปภาพ รูปดีไซน์ของโปรเจกต์ถูกโหลดให้อัตโนมัติ หรืออัปโหลดรูปอื่นก็ได้ เช่น artboard จาก Figma แบนเนอร์ หรือโปสเตอร์
2. วาดพื้นที่ที่คลิกได้ ลากเมาส์บนรูปเพื่อวาดกรอบบนปุ่ม แบนเนอร์ หรือสินค้าแต่ละชิ้น ย้ายได้ ปรับขนาดจากขอบหรือมุมใดก็ได้ ขยับทีละ 1px ด้วยปุ่มลูกศร หรือพิมพ์พิกัดที่แน่นอน
3. ใส่ลิงก์และข้อความ alt แต่ละพื้นที่มีลิงก์ (http(s)://, mailto: หรือ tel:) ชื่อ และข้อความ alt
4. กำหนดความกว้างอีเมล ค่าเริ่มต้น 600px เปลี่ยนได้หากเทมเพลตของคุณต้องการความกว้างอื่น
5. สร้าง MarkupGen ตัดรูปภาพและสร้างตาราง
6. ดูตัวอย่าง ทดสอบ และส่งออก ตรวจสอบตัวอย่างบนเดสก์ท็อปและมือถือ (375px) ส่งอีเมลทดสอบ แล้วนำโค้ดไปใช้กับโปรเจกต์หรือนำไปใช้ที่อื่น

สิ่งที่เครื่องมือจัดการให้ระหว่างขั้นตอนนี้:

• ตัดเฉพาะจุดที่จำเป็น รูปภาพถูกตัดตามขอบบนและขอบล่างของแต่ละพื้นที่ ชิ้นที่อยู่ติดกันและไม่มีลิงก์จะถูกรวมเข้าด้วยกัน จึงมีรูปน้อยลงและคำขอน้อยลง
• เห็นเส้นตัดชัดเจน เส้นไกด์สีเหลืองแสดงตำแหน่งที่จะตัดอย่างแม่นยำ คุณจึงวางรอยตัดบนพื้นหลังว่างได้ ไม่ตัดผ่านบรรทัดข้อความ
• ประกอบกลับแม่นยำระดับพิกเซล ตำแหน่งตัดถูกปัดให้ลงพิกเซลเต็มที่ขนาดแสดงผล ชิ้นส่วนจึงรวมกันได้เท่ากับรูปต้นฉบับ ไม่มีช่องว่างและคอลัมน์ไม่เลื่อน
• ชิ้นภาพไม่สูญเสียคุณภาพและโฮสต์ให้แล้ว ชิ้นภาพถูกบันทึกเป็น PNG และอัปโหลดให้พร้อม URL แบบเต็ม คุณไม่ต้องโฮสต์อะไรเอง รูป 2x ยังคมชัดเพราะแสดงที่ความกว้างของอีเมลโดยไม่ถูกย่อ
• มาร์กอัปเฉพาะสำหรับ Outlook ความกว้างคงที่ conditional comment สำหรับเอนจินของ Outlook ที่อิงกับ Word และการรีเซ็ตที่กันไม่ให้มีช่องว่างแปลก ๆ ระหว่างชิ้นภาพ
• รับเฉพาะลิงก์ที่ปลอดภัย สิ่งที่ไม่ใช่ http(s), mailto หรือ tel จะถูกปฏิเสธ และพื้นที่ที่ไม่มีลิงก์ที่ถูกต้องจะถูกข้ามพร้อมคำเตือน แทนที่จะส่งออกลิงก์เสีย
• พื้นที่ถูกบันทึกไปกับโปรเจกต์ เปิดเครื่องมืออีกครั้งภายหลังเพื่อแก้ลิงก์หรือย้ายพื้นที่ได้โดยไม่ต้องวาดใหม่ทั้งหมด
• ขีดจำกัดที่กว้าง สูงสุด 200 พื้นที่ลิงก์และ 400 ชิ้นภาพต่ออีเมล จากรูปที่กว้างได้ถึง 4000px

ควรใช้วิธีไหน?

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

ทุกอย่างที่ทำได้กับผลลัพธ์

ทั้งสองวิธีจบที่จุดเดียวกัน:

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

หากต้องการดูเรื่องการทดสอบให้ละเอียดขึ้น อ่านวิธีสร้างและทดสอบส่งอีเมลมาร์เก็ตติ้งแบบ HTML

ข้อแลกเปลี่ยน พูดกันตรง ๆ

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

คำถามที่พบบ่อย

ทำไม Gmail ถึงตัดอีเมลของฉัน? Gmail ตัดข้อความที่ HTML มีขนาดเกินประมาณ 102KB และซ่อนส่วนที่เหลือไว้หลังลิงก์ "ดูข้อความทั้งหมด" MarkupGen แสดงขนาดปัจจุบันและเตือนที่ 100KB

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

ฉันต้องโฮสต์รูปภาพเองไหม? ไม่ต้อง ชิ้นภาพถูกอัปโหลดอัตโนมัติและอ้างอิงด้วย URL แบบเต็ม อีเมลจึงใช้งานได้ทันทีที่ส่ง

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

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

ใช้ได้เฉพาะกับดีไซน์ Figma เท่านั้นหรือ? วิธี generate โค้ดเริ่มจากดีไซน์ Figma ส่วนวิธีรูปภาพยังรับรูปใดก็ได้ที่คุณอัปโหลดภายในโปรเจกต์ Email Ready

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