หลักการเขียน E-newsletter แบบ Cross Browser/Cross Email Client

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

รูปแบบของ E-newsletter มีมากมายหลายแบบ อยู่ที่โจทย์ของเราว่าต้องการจะสื่อสารกับ user มากน้อยแค่ไหน เช่น

• ครอบคลุม Email Client ใดบ้าง (Gmail / Hotmail ฯลฯ)
• ครอบคลุม Browser ใดบ้าง (Firefox, Google Chrome, Safari, IE เป็นต้น)
• ครอบคลุม User Agent ใดบ้าง (Desktop, iphone, ipad, Samsung รุ่นต่างๆ , Huawei เป็นต้น)
• ครอบคลุมระบบปฏิบัติการใดบ้าง (Window/ Mac/Android/iOS ฯลฯ)

ถ้าโจทย์ของเราต้องการ “ครอบคลุมทั้งหมด” คือ ไม่ว่า user จะใช้ hotmail, gmail หรือใช้บราวเซอร์ใดเปิด ก็อยากให้อีเมล์เราแสดงผลเรียบร้อยสวยงาม เพื่อเป็นการสื่อสารในวงกว้าง และเพิ่ม Accessibility เราต้องเขียน E-newsletter โดยคำนึงถึงข้อจำกัดของมันเป็นหลัก ดังนี้

ข้อจำกัดของ E-newsletter แบบ Cross browser/Device และ Email client

• ใส่ javascript ไม่ได้: ดังนั้น Effect หรือ Interactive ต่างๆไม่สามารถใช้ได้บน E-newsletter
• เรียก External Stylesheet ไม่ได้
• ใช้การเขียน CSS แบบ Inline style ฝังไปกับ HTML เท่านั้น
• พยายามหลีกเลี่ยงการใช้ HTML สมัยใหม่ .. ให้เขียนโดยใช้ คลุมทั้งหมดแทน
• กรณีมีรูป ให้พยายามตัดแบ่งเป็นรูปเล็กๆ เพื่อกระจายการโหลด (แทนที่จะโหลดหนักๆชิ้นเดียว ก็โหลดย่อยๆหลายชิ้น)
• กรณีมีรูป ให้ใส่ display: block; border:none ; และระบุความกว้างและความสูงของรูปลงไปที่ tag img ด้วย เช่น

• กรณีมีปุ่มต่างๆ ฝังอยู่บนรูป ให้ใช้วิธี Slice for web บน Photoshop แล้ว Export ออกมาเป็น HTML & Image (โค้ดที่ได้จะเป็น ทั้งหมด) และในการ slice ให้สร้าง Guide ตีตารางขึ้นมาก่อน แล้วพยายาม slice ให้ตรง Grid
• กรณีมีรูปที่สูงน้อยกว่า 25 px ให้ใส่ line-height และ height เป็นค่าความสูงของรูปลงไปที่

• กรณีมี Link อยู่ในอีเมล์ ให้ใส่ inline style → display: block; border:none ;text-decoration: none เข้าไปด้วย เช่น

• กรณีที่มีส่วนใดส่วนหนึ่งในข้อความ ลงท้ายด้วยคำว่า .com ต้องใส่ tag a href ดักไว้เสมอ เพราะบน Mobile เวลาเปิดอีเมล์ จะมองว่าข้อความที่ลงท้ายด้วย .com นั้นเป็นลิงค์ (และจะแสดงผลเป็นอักษรสีน้ำเงิน แบบสีของลิงค์ default ทำให้ดีไซน์ของเราไม่สวยงาม) เช่น

• กรณีที่มีส่วนใดส่วนหนึ่งในอีเมล์ เป็นที่อยู่ / เบอร์โทรศัพท์ / เบอร์แฟกซ์ ต้องใส่ tag a href ดักไว้เสมอ เพราะบน Mobile เวลาเปิดอีเมล์ จะมองว่าข้อความที่เป็นที่อยู่ เบอร์โทรศัพท์เหล่านี้เป็นลิงค์ (และสามารถกดโทรออกได้ด้วย) จะแสดงผลเป็นอักษรสีน้ำเงิน แบบสีของลิงค์ default ทำให้ดีไซน์ของเราไม่สวยงาม เช่น

• ที่สำคัญที่สุด ในการทำให้ E-newsletter รองรับทุก Browser คือ คุณต้องเทสทุก Browser / Email-Client เพื่อเช็คให้แน่ใจว่า สิ่งที่คุณเขียนไปนั้น แสดงผลถูกต้องหรือไม่ โดยเฉพาะการเปิดอีเมล์บน Browser ที่แตกต่างกัน เนื่องจาก Browser มีการอัพเดทเวอร์ชั่นตลอดเวลา