DeeMocDIY Blog » HTML Email http://blog.deemocdiy.com ทุกอย่างที่คุณอยากรู้เกี่ยวกับ Email Marketing Wed, 28 Jul 2010 08:27:26 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 การสื่อสารผ่าน Email คืออะไร? ต่างกับจดหมายอย่างไร? http://blog.deemocdiy.com/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%aa%e0%b8%b7%e0%b9%88%e0%b8%ad%e0%b8%aa%e0%b8%b2%e0%b8%a3%e0%b8%9c%e0%b9%88%e0%b8%b2%e0%b8%99-email-%e0%b8%84%e0%b8%b7%e0%b8%ad%e0%b8%ad%e0%b8%b0%e0%b9%84%e0%b8%a3/ http://blog.deemocdiy.com/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%aa%e0%b8%b7%e0%b9%88%e0%b8%ad%e0%b8%aa%e0%b8%b2%e0%b8%a3%e0%b8%9c%e0%b9%88%e0%b8%b2%e0%b8%99-email-%e0%b8%84%e0%b8%b7%e0%b8%ad%e0%b8%ad%e0%b8%b0%e0%b9%84%e0%b8%a3/#comments Fri, 16 Jul 2010 04:26:45 +0000 Sales http://blog.deemocdiy.com/?p=532

การสื่อสารผ่าน Email คืออะไร? หน้าที่ของ Email ไม่ต่างอะไรกับการส่งจดหมายแต่เป็นการส่งจดหมายแบบอิเล็กทรอนิกส์ แต่สิ่งที่ต่างกันคือ

email-vs-social-media

  1. ส่งได้อย่างรวดเร็วแม้จะส่งครั้งละจำนวนมาก หากคุณส่งไปรษณีย์ต้องใช้เวลาเป็นวัน เพื่อส่งไปยังต่างประเทศ แต่หากใช้ อีเมล์เพียงแค่ไม่กี่อึดใจผู้รับปลายทางก็ได้รับข้อมูลข่าวสาร
  2. ส่งข้อมูลข่าวสารที่มีลูกเล่น เช่นการทำ HTML ซึ่งผู้รับส่วนใหญ่สามารถเปิดดูข้อมูลได้ การแนบ Link ต่างๆเพื่อให้ผู้รับเลือกรับข่าวสารเพิ่มเติม ไม่ว่าจะเป็น ภาพ เสียง วีดีโอ ข้อความ หรือแม้แต่ไฟล์เอกสารก็ตาม คุณสามารถส่งผ่าน Email ได้ทั้งหมด ซึ่งไม่มีสื่อตัวใดสามารถทำได้
  3. การเก็บข้อมูลสถิติ (ปัจจุบันระบบส่วนใหญ่ยังไม่สามารถทำได้) ในการเก็บข้อมูลที่ได้จากการส่ง Email นั้นจะช่วยให้คุณทราบถึงความสนใจของผู้รับว่าสนใจเนื้อหา บริการหรือสินค้าใด ที่เราได้นำเสนอไป

แต่อย่างไรก็ดีในปัจจุบันใน Inbox ของใครหลายคนอาจเต็มไปด้วย SPAM Mail เนื่องด้วยมีกลุ่มที่ไม่เข้าใจการทำ Email Marketing ว่าต้องทำอย่างไรและทำอย่างไรจึงไม่เป็น SPAM ผลของการทำ SPAM ที่ตามมาทันทีก็คือผู้รับเกิดความรู้สึกรำคาญและหาหนทางในการป้องกันไม่ให้ Mail ลักษณะนี้เข้ามาอีก โดยทำการแจ้งไปยังผู้ให้บริการ Email ต่างๆ อาทิ Hotmail, Yahoo, Gmail ,etc ซึ่งผู้ให้บริการเหล่านี้ก็ย่อมต้องเพิ่มขีดความสามารถของระบบเพื่อป้องกันมิให้ผู้ทำ SPAM (Spammer) นั้นสามารถส่ง Email เข้าสู่ระบบได้อีก ดังนั้นคุณจึงควรระวังเป็นอย่างยิ่งว่าการส่งข้อมูลข่าวสารของคุณนั้นไมม่เข้าข่าย SPAM อย่างเด็ดขาดคุณสามารถดูข้อมูลเพิ่มเติมได้ที่ Blog เรื่อง  SPAM เพราะเหตุใดจึงถูกมองเป็น SPAM หรือสามารถติดต่อสอบถามกับทีมงานของเราได้ที่ http://www.deemocdiy.com/contactus.php

Share/Bookmark]]> http://blog.deemocdiy.com/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%aa%e0%b8%b7%e0%b9%88%e0%b8%ad%e0%b8%aa%e0%b8%b2%e0%b8%a3%e0%b8%9c%e0%b9%88%e0%b8%b2%e0%b8%99-email-%e0%b8%84%e0%b8%b7%e0%b8%ad%e0%b8%ad%e0%b8%b0%e0%b9%84%e0%b8%a3/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 How to Code HTML Email Newsletter : Part I http://blog.deemocdiy.com/how-to-code-html-email-newsletter-part-i/ http://blog.deemocdiy.com/how-to-code-html-email-newsletter-part-i/#comments Tue, 24 Nov 2009 01:57:16 +0000 Development Team http://blog.deemocdiy.com/?p=113

ทุกวันนี้ Email Client ต่างๆสามารถอ่าน Email ที่เป็น HTML ได้แล้วไม่ว่าจะเป็น
Eudora, Outlook, AOL, Thunderbird, Lotus Notes หรือแม้กระทั่งweb-based email
services เช่น Yahoo!, Hotmail และ Google Mail (Gmail).

เมื่อใดก็ตามที่คุณต้องการสร้าง HTML Email ด้วยตัวคุณเอง มีหลักการง่ายๆแค่ 2 ข้อทีคุณต้องทราบ
1.ใช้ Table Tag, control ทุกอย่างที่เป็น layout ของหน้า Email
2.ใช้ inline CSS เพื่อ Control, เช่น background colors หรือ fonts.

การใช้ Table เพื่อควบคุม Layout ทั้งหมดใน Email
จะขอเริ่มต้นที่การเลือกรูปแบบหน้าตา หรือ layout ก่อนนะครับ ผมเลือกรูปแบบมาตรฐานที่นิยมใช้มากที่สุด ที่ผมตั้งชื่อขึ้นเองว่ารูปแบบ HCF (Header,Content and Footer) ตามรูปด้านล่าง

Header Content Footer style

ส่วนที่เป็น Header เราจะนิยมใช้รูปภาพหรือข้อความขนาดใหญ่ ตั้งแต่ Tag <h1> หรือ <h2> เป็นต้นไป
ตรงกลาง  (Content) นิมยมใส่เป็นข้อความธรรมดา และสามารถแทรกรูปภาพหรือ Table อื่นๆเพิ่มเข้าไปได้อีก ส่วนด้านล่างของ Email  (Footer) นิยมใช้ข้อมูลการติดต่อกลับหาเจ้าของ Email หรือ หากเป็นการทำ Email Marketing ที่ถูกต้องแล้วละก็ อย่าลืมใส่ Unsubscribe Link เป็นอันขาดครับ เพื่อป้องกันการ Report SPAM หรือการ Complain จากผู้รับ Email ไปยัง ISP ที่ผู้รับใช้อยู่ ส่วน Code เบื้องต้นที่ใช้เป็นตัวอย่างดังนี้ครับ
<html>
<head>
<!–Tag ต่างๆที่เป็นส่วนข้อ Header สามารถใช้ได้เหมือนกับ HTML ธรรมดาครับ ยกเว้น Javascript และ style tag –>
</head>
<body>
<table>
<tr>
<td>เนื้อหาส่วนที่เป็น Header</td>
</tr>
<tr>
<td>เนื้อหาส่วนที่เป็น Content</td>
</tr>
<tr>
<td>เนื้อหาส่วนที่เป็น Footer</td>
</tr>
</table>
</body>
</html>

สำหรับครั้งต่อไป จะสาธิตวิธีการใส่ลูกเล่น Inline Style Sheet ครับผม รับรองสนุกแน่นอนครับ

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