DeeMocDIY Blog » HTML http://blog.deemocdiy.com ทุกอย่างที่คุณอยากรู้เกี่ยวกับ Email Marketing Wed, 13 Jul 2011 07:05:13 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 ทำไมต้องเขียน Email ด้วย HTML http://blog.deemocdiy.com/why-html-email/ http://blog.deemocdiy.com/why-html-email/#comments Tue, 24 Aug 2010 02:55:57 +0000 Sales http://blog.deemocdiy.com/?p=642

ก่อนจะเข้าเรื่อง ขออธิบายเกี่ยวกับ HTML ก่อนซักเล็กน้อย HTML (ชื่อเต็มคือ Hypertext Markup Language ภาษามาร์กอัปข้อความหลายมิติ) คือภาษามาร์กอัปออกแบบมาเพื่อใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บเบราว์เซอร์ เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี (Tim Berners Lee) สำหรับภาษา SGML ในปัจจุบัน HTML เป็นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C) ในปัจจุบัน ทาง W3C ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML ซึ่งเป็นลักษณะของโครงสร้าง XML แบบหนึ่งที่มีหลักเกณฑ์ในการกำหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐานกว่า มาทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กันอยู่ในปัจจุบัน
คราวนี้ ทำไมเราถึงควรที่จะ ใช้ HTML ในการสร้าง Email
ปกติแล้ว ในการโฆษณาหรือประชาสัมพันธ์สินค้าตัวหนึ่ง สิ่งที่จำเป็นที่สุดคือการสร้าง Call to Action (การสร้างแรงดึงดูด)
เราลองมาดูกันว่า คุณ สนใจ ที่จะคลิก อันไหน มากกว่ากัน (ซ้ายหรือขวา)
แน่นอนว่าต้องเป็นด้านซ้ายซึ่งถูกสร้างขึ้นมาด้วย HTML Template ของ DeeMocDIY ซึ่งมีให้เลือกใช้เยอะแยะมากมาย
บางคนถามว่าอ้าวแล้วถ้าต้องการ Call to Action ทำไมไม่ใช้ Flash ไปเลยให้รู้แล้วรู้รอด แน่นอนครับ Flash นั้นมีลูกเล่นเยอะ แล้วสามารถสร้าง Call to Action ได้สูง แต่อย่างไรก็ดีเราไม่แนะนำให้นำมาใส่ใน Body (เนื้อหา) ของ Email ด้วยเหตุผลดังนี้
1. ไฟล์ Flash นั้นมีมีขนาดใหญ่อยู่แล้ว ดังนั้นบ่อยครั้งที่การมีไฟล์ Flash อยู่ใน Email ทำให้ส่งไม่ออก หรือส่งออกช้า ซึ่งในการรับ Email ฉบับนั้นๆ ก็จะช้าหรือรับไม่ได้เลยเช่นเดียวกัน
2. ต่อเนื่องจากข้อที่ 1 เนื่องจากไฟล์นั้นเป็นไฟล์ใหญ่  ระบบ Spam Filter ของ Email Client จึงมักมองว่าเป็น Spam ซึ่งจะถูกดักไว้ และถ้ามีการส่งบ่อยครั้งเข้าโดเมนที่ใช้ในการส่ง Email นั้นๆ ก็จะติด Blacklist ในที่สุด
4. Email Client ที่ไม่ได้ลง Flash Player หมดสิทธ์ที่จะเปิดไฟล์ Flash แน่นอน
3. การเปิดไฟล์ Flash นั้นมีความเสี่ยงด้าน ความปลอดภัยสูง ผู้เชี่ยวชาญจากหลายๆ สำนักเชื่อว่าช่องโหว่ใน Flash Player นั้น เป็นจุดใหญ่ที่จะทำให้ไวรัสร้ายแรงเข้ามาโจมตีระบบปฏิบัติการของเราได้  (อ้างอิง)

ก่อนจะเข้าเรื่อง ขออธิบายเกี่ยวกับ HTML ก่อนซักเล็กน้อย HTML (ชื่อเต็มคือ Hypertext Markup Language ภาษามาร์กอัปข้อความหลายมิติ) คือภาษามาร์กอัปออกแบบมาเพื่อใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บเบราว์เซอร์ เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี (Tim Berners Lee) สำหรับภาษา SGML ในปัจจุบัน HTML เป็นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C) ในปัจจุบัน ทาง W3C ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML ซึ่งเป็นลักษณะของโครงสร้าง XML แบบหนึ่งที่มีหลักเกณฑ์ในการกำหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐานกว่า มาทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กันอยู่ในปัจจุบัน

คราวนี้ ทำไมเราถึงควรที่จะ ใช้ HTML ในการสร้าง Email

ปกติแล้ว ในการโฆษณาหรือประชาสัมพันธ์สินค้าตัวหนึ่ง สิ่งที่จำเป็นที่สุดคือการสร้าง Call to Action (การสร้างแรงดึงดูด)

เราลองมาสมมุติกันว่ามีอีเมล์ 2  ฉบับด้วยเนื้อหาเดียวกัน คุณ สนใจ ที่จะคลิกบน Email ไหน มากกว่ากัน (บนหรือล่าง)

Screen shot 2010-08-23 at 3.52.57 PM8-23-10Screen shot 2010-08-23 at 4.46.58 PM8-23-10

แน่นอนว่าต้องเป็นด้านบนซึ่งถูกสร้างขึ้นมาด้วย HTML Template ของ DeeMocDIY ซึ่งมีให้เลือกใช้เยอะแยะมากมาย

บางคนถามว่าอ้าวแล้วถ้าต้องการ Call to Action ทำไมไม่ใช้ Flash ไปเลยให้รู้แล้วรู้รอด แน่นอนครับ Flash นั้นมีลูกเล่นเยอะ แล้วสามารถสร้าง Call to Action ได้สูง แต่อย่างไรก็ดีเราไม่แนะนำให้นำมาใส่ใน Body (เนื้อหา) ของ Email ด้วยเหตุผลดังนี้
1. ไฟล์ Flash นั้นมีมีขนาดใหญ่อยู่แล้ว ดังนั้นบ่อยครั้งที่การมีไฟล์ Flash อยู่ใน Email ทำให้ส่งไม่ออก หรือส่งออกช้า ซึ่งในการรับ Email ฉบับนั้นๆ ก็จะช้าหรือรับไม่ได้เลยเช่นเดียวกัน

2. ต่อเนื่องจากข้อที่ 1 เนื่องจากไฟล์นั้นเป็นไฟล์ใหญ่  ระบบ Spam Filter ของ Email Client จึงมักมองว่าเป็น Spam ซึ่งจะถูกดักไว้ และถ้ามีการส่งบ่อยครั้งเข้าโดเมนที่ใช้ในการส่ง Email นั้นๆ ก็จะติด Blacklist ในที่สุด

3. Email Client ที่ไม่ได้ลง Flash Player หมดสิทธ์ที่จะเปิดไฟล์ Flash แน่นอน

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

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

Share/Bookmark]]> http://blog.deemocdiy.com/why-html-email/feed/ 0 How to Code HTML Email Newsletter : Part II Inline Style Sheet http://blog.deemocdiy.com/how-to-code-html-email-newsletter-part-ii-inline-style-sheet/ http://blog.deemocdiy.com/how-to-code-html-email-newsletter-part-ii-inline-style-sheet/#comments Mon, 11 Jan 2010 08:39:04 +0000 Development Team http://blog.deemocdiy.com/?p=245

สวัสดีครับ ครั้งที่แล้วผมเขียนเรื่องการ Design หน้า content แบบ HCF (Header Content and Footer) โดย การใช้ Table เพื่อควบคุม Layout ทั้งหมดใน Email ไปแล้ว คราวนี้ เราจะมาเจาะลึกการทำ Inline Style Sheet ใส่ Email ของเราบ้างเพื่อความสวยงามครับ

การกำหนด Style Sheets แบบ Inline ก็คือการกำหนดรูปแบบการแสดงผลของ Tag ภายใน Tagนั้น ๆ เลย โดยจะมีผลต่อ Tag นั้น ๆ Tag เดียวที่เราทำการกำหนด Style ให้มัน โดยใช้ Attribute “style” ภายใน Tag ที่ต้องการกำหนดให้ เราลองไปดูตัวอย่างเบื้องต้นของการกำหนด Inline Style Sheet กันครับ

ตัวอย่างเบื้องต้นของการกำหนด Inline Style Sheet

  1. <table style='border: 1px solid black; margin: auto;">
  2. <tr>
  3. <td style="text-align: right; font-size: 18pt;">
  4. Some text aligned left.
  5. </td>
  6. </tr>
  7. </table>

จากตัวอย่างจะเห็นว่ามีการกำหนด Style ให้กับ Tag table โดยกำหนดภายใน Attribute “style” แต่ถึงแม้เราจะมี Tag table กี่Tagก็ตามมันจะไม่มีผลกระทบด้วยเลย เพราะมันหมายความว่ากำหนด Style ให้กับTagนั้น ๆ เพียงTagเดียว

ตัวอย่างการกำหนด Inline Style Sheet หลาย ๆ Tag

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
  6. <meta http-equiv="content-language" content="th" />
  7. <title>Inline Style Sheet</title>
  8. </head>
  9. <body>
  10. <h1 style="color:black;
  11. border: 5px solid black;
  12. letter-spacing: 5px;
  13. padding: 10px;">
  14. Heading 1
  15. <h1>
  16. <h2 style="color: orange;
  17. border: 4px solid orange;
  18. letter-spacing: 5px;
  19. padding: 10px;">
  20. Heading 2
  21. </h2>
  22. <h3 style="color: blue;
  23. border: 3px solid blue;
  24. letter-spacing: 5px;
  25. padding: 10px;">
  26. Heading 3
  27. </h3>
  28. <p style="font-family: Arial;
  29. font-size: 14pt;">
  30. Selectors choose the element to apply formatting to.
  31. </p>
  32. </body>
  33. </html>

หมายเหตุ : – เราสามารถใช้วิธีนี้ กับ HTMLTagใดก็ได้ ยกเว้นTagBASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

Share/Bookmark]]> http://blog.deemocdiy.com/how-to-code-html-email-newsletter-part-ii-inline-style-sheet/feed/ 0