การออกแบบ e-newsletter ที่ responsive และรองรับ Outlook นั้นมีข้อพิจารณาดังนี้:
ใช้ Table-Based Layout Outlook ไม่รองรับ CSS ที่ซับซ้อน ดังนั้นการใช้ตารางในการจัดวางเลย์เอาท์จะช่วยให้ e-newsletter แสดงผลได้อย่างถูกต้องบน Outlook
ใช้ Inline CSS Outlook ไม่สนับสนุนไฟล์ CSS ภายนอก ดังนั้นคุณต้องแทรก CSS ไว้ใน HTML แบบ inline style
หลีกเลี่ยงการใช้ภาพเป็น Background
Outlook มักจะปิดการแสดงผลภาพพื้นหลัง ให้ใช้ภาพแบบ IMG แทน
ใช้ Font ที่ปลอดภัย เลือกใช้ Font ที่มีอยู่บนระบบ Windows เช่น Arial, Times New Roman, Verdana เป็นต้น
ทดสอบบน Outlook ทดสอบ e-newsletter บน Outlook เวอร์ชั่นต่างๆ เพื่อให้แน่ใจว่าแสดงผลได้อย่างถูกต้อง
ใช้ Media Query สำหรับ Responsive Outlook รองรับ media query สำหรับการปรับเลย์เอาท์ให้เหมาะสมกับอุปกรณ์ต่างๆ
ตรวจสอบ Images และ Links ตรวจสอบให้แน่ใจว่าทุกภาพและลิงก์ทำงานได้อย่างถูกต้อง
ใช้ Alt Text สำหรับภาพ ใส่ Alt text ให้ภาพเพื่อให้ผู้ใช้เห็นได้แม้เมื่อภาพไม่แสดงผล
โดยสรุป การออกแบบ e-newsletter ให้รองรับ Outlook ต้องใช้เทคนิคที่เรียบง่ายและใช้มาตรฐานเก่า เนื่องจากข้อจำกัดของ Outlook ในการรองรับเทคโนโลยีใหม่ๆ การทดสอบบน Outlook หลายๆเวอร์ชันจะช่วยให้มั่นใจในการแสดงผลที่ถูกต้อง
สังเกตุว่าโครงสร้างหลักๆ ประกอบด้วย:
ใช้ตาราง 100% สำหรับจัดเลย์เอาท์
ใช้ Inline CSS
หลีกเลี่ยงใช้ภาพพื้นหลัง
ใช้ Font ที่ปลอดภัย เช่น Arial
มี Media Query สำหรับ Responsive บนมือถือ
ตรวจสอบภาพและลิงก์ให้ทำงานได้
ใส่ Alt text ให้ภาพ
จากตัวอย่างนี้จะเห็นว่า e-newsletter สามารถแสดงผลได้อย่างถูกต้องบน Outlook และปรับให้ responsive บนอุปกรณ์ต่างๆ ได้ด้วย
โฆษณา
- ดาวน์โหลดแอปพลิเคชัน
- © 2024 Blockdit
