เทคนิคการเขียน HTML E-mail

Posted by in Coding

สวัสดีค่ะ เว้นระยะมาอีกหนึ่งเดือน ช่วงก่อนหน้านี้ติดเกม T^T ทั้งๆ ที่ตั้งใจว่าจะเขียน Blog แต่ก็ไม่ได้อะไรออกมาสักที มาต่อกันเรื่องของ HTML E-mail กันต่อดีกว่าค่ะ

วันก่อนเราได้ทำความรู้จักกับ HTML E-mail รวมไปถึงข้อดีของมันกันไปแล้ว (ใครยังไม่ได้อ่านคลิ้กเลยค่ะ >> เบื้องต้นกับการทำ HTML E-mail )  วันนี้เราจะมาลงลึกกันไปอีกขั้น เกี่ยวกับการลงมือเขียนโค้ด HTML E-mail กันจริงๆ ว่ามีเทคนิคอะไรซ่อนอยู่บ้าง วันนี้คงมาแบบยาวๆ หน่อย อย่าพึ่งเบื่อที่จะอ่านละกันค่ะ อิอิ ^^

ปล. สำหรับ Email ตัวอย่าง เป็นงานต้นแบบที่เราออกแบบให้กับบริษัท เราขอเบลอเนื้อหาบางส่วนนะคะ

 

ก่อนจะเขียน เราต้องรู้เรื่อง HTML และ CSS ในระดับเบื้องต้นก่อนค่ะ เราจะใช้ HTML table ในการสร้าง layout และใช้ CSS สำหรับการตกแต่งสีพื้น อักษรและความสวยงามเล็กๆน้อยๆเองค่ะ ซึ่งเราจะ ref การใส่โค้ดตามนี้นะคะ

  • HTML tag: เราจะใส่ปีกาแหลมๆ ครอบเสมอ และใส่ตัวหนา สีส้มให้ เช่น <body>, <td>, <img>
  • HTML parameter: คือส่วนการตั้ง properties ต่างๆของ HTML tag เช่น <img src=”” alt=””> แบบนี้ src กับ alt จะเป็น parameter ของ <img> ค่ะ เราจะไฮไลท์สีส้มให้ และใส่ตัวเอียง เช่น src, alt
  • CSS: คือ การใส่ค่า inline CSS ต่างๆ เราจะไฮไลท์สีฟ้า ตัวหนาสำหรับ properties และตัวเอียง สำหรับค่าของมัน เช่น font-size: 12px;
  • ส่วนตัว comment สำหรับอธิบาย เราจะใส่สีม่วงไว้นะคะ เช่น //คอมเม้นเพิ่มเติม

 

ขนาดที่เหมาะสมของ HTML E-mail

โดยทั่วไปขนาดของ HTML E-mail ที่นิยมกัน จะอยู่ที่ 500-600px และไม่ควรเกินกว่า  650px เนื่องจากเราไม่ได้เปิด E-mail ผ่าน Browser อย่างเดียว พวกโปรแกรม E-mail Client หลายๆเจ้า มีการแสดงผลแบบแบ่งคอลัมป์ซ้ายขวา บางที่แบ่ง 3 คอลัมป์ด้วยซ้ำ ทำให้เนื้อที่อ่านเนื้อหาไม่ใหญ่นัก รวมไปถึงถ้าเปิดด้วยมือถือ มันก็จะมีเนื้อที่น้อยลงไปอีก ดังนั้นการทำขนาดราวๆ 600px จึงกำลังดีสำหรับ E-mail ค่ะ

 

ขนาดของ Email เทียบกับขนาดของเว็บ

 

จัดการ layout ด้วย <table>

บอกไปหลายรอบแล้วว่าเราต้องขึ้น layout ของ HTML E-mail ด้วย <table> ดังนั้นก่อนคิดจะทำอะไร ก็ต้องออกแบบ E-mail ก่อนค่ะ ไม่งั้นเราคงนึกกันลำบากว่าจะตัดช่องนี้ ช่องโน้นเท่าไหร่ดี จะแบ่งตารางเป็นกี่คอลัมป์ดี หลักๆของการขึ้นก็จะมีการแบ่งตาราง 3 คอลัมป์ โดยที่กำหนดคอลัมป์กลางเป็นขนาดที่เราจะทำ E-mail ขึ้นมา และให้ 2 คอลัมป์ ซ้าย-ขวา ที่เหลือมีขนาดเท่ากัน เพื่อให้เนื้อหา E-mail ในคอลัมป์กลาง อยู่กลางหน้าเสมอค่ะ (เหมือนการเขียน margin: 0 auto; ใน CSS) ส่วนที่เหลือข้างในคอลัมป์กลางนั้นอยู่ที่ E-mail ของเราแล้วค่ะว่าจะ จัด layout กันยังไง จากการที่เราทดลอง ถ้าดูเมลใน Hotmail มันจะไม่อยู่ตรงกลางอยู่ดี แต่ใน Gmail ก็อยู่ตรงกลาง ตามที่อยากได้เป๊ะ ไม่รู้มีวิธีแก้หรือเปล่า แต่เราไม่แก้เพราะเนื้อหาเราไม่ได้กระทบ แค่มันไม่อยู่ตรงกลางแค่นั้นเอง

โค้ดตัว Table หลัก สังเกตว่า เราจะกำหนดความกว้างไว้ให้แค่ คอลัมป์กลางเท่านั้น

<table cellspacing="0" cellpadding="0" border="0" width="100%">
     <tr>
        <td></td>
         <td width="600"> ใส่เนื้อหา Email ที่นี่</td>
         <td></td>
     </tr>
</table>

ตัวอย่างการแบ่งคอลัมป์ เพื่อกำหนดให้เนื้อหา Email อยู่ตรงกลาง

 

 ตัวอย่างการตัดช่องตารางคร่าวๆ ของ E-mail ตัวอย่าง เส้นสีแดงคือ เส้นแบ่งช่องตาราง 

 

ใช้ inline CSS แบบง่ายๆ สำหรับความสวยงาม

สำหรับการตกแต่งสีอักษรนั้น เราจะใช้ส่วนของ inline CSS เข้ามาตกแต่ง แทนการใช้แทค font ของ  HTML (เราไม่รู้เหตุผลที่แท้จริง ส่วนตัว เราว่า ใช้ CSS แต่งสวยกว่า และบักน้อยกว่าด้วย) ที่สำคัญของการเขียนคือ

เราไม่สามารถเขียนแบบย่อได้ เช่น

style="font:bold 1em/1.2em georgia,times,serif;"

ให้เขียนแบบเต็มแทน

style="font-weight: bold; font-size: 1em; line-height: 1.2em; font-family: georgia,times,serif;"

 

คำสั่งหลักๆ ของ  CSS ที่เราใช้คือ color: #000000; line-height: 14px;  และ font-size: 12px; ไม่เยอะเลยใช่มั้ยล่ะ

มีคนทำตารางเกี่ยวกับการ support CSS ของ Email ต่างๆ เอาไว้ดู ไว้ศึกษาเพิ่มเติมกันได้ตามสะดวกค่ะ >>  list of CSS support

 

ใส่สีพื้นหลังด้วย bgcolor

บางคนอาจจะงงว่า อะไรคือ bgcolor ? มันก็คือ tag HTML อันหนึ่งค่ะ เค้าเอาไว้กำหนดสี background เหมือนๆกับ background-color ใน CSS น่ะแหละ เหตุผลที่เราต้องใช้ bgcolor เพราะว่า Email Client หลายๆ ตัวเค้าไม่แสดงผล background-color ใน CSS ค่ะ (น่าเศร้า T^T) วิธีการใช้ bgcolor ก็คล้ายๆ กัน แต่เราไม่สามารถใส่รหัสสีแบบย่อเหมือนใน CSS ได้ เราต้องใส่เลข 6 หลักเต็ม และไม่มี # ข้างหน้าด้วยค่ะ ตัวอย่าง <td bgcolor=”#ebebeb”></td>

 

กำหนด line-height เป็นศูนย์ กับช่องว่าง

ปัญหานี้จะเกิดเมื่อเราสร้างช่องตารางที่เป็นช่องว่าง ไม่มีการใส่อักษรหรือสัญลักษณ์ในช่องนั้น และมีความสูงไม่เยอะนัก มันจะมีปัญหาที่มันจะสูงไม่ได้ตามที่เราต้องการ เพราะว่ามันติดค่า default ของ line-height อยู่ค่ะ (ไม่แน่ใจว่าค่า default มันเท่าไหร่ แต่จะอยู่ราวๆ 16px) ทางแก้คือ ใส่ inline CSS >>line-height: 0; กำหนดให้มันทุกอันที่เป็นแบบนี้ (เหนื่อยเนอะ – -“) สำหรับเราใส่ให้กับทุกอันที่เป็นช่องว่างเลยค่ะ ไม่ว่าจะสูงมากสูงน้อย ป้องกันไว้ก่อน ไม่อยากเจอบัก

 ส่วนสีเหลืองคือ ช่องว่างที่ไม่มีตัวอักษร ให้กำหนด line-height: 0; ให้หมด

 

ใช้ <img> ก็อย่าลืมใส่ ALT

อย่างที่บอกไปว่า Email Client ส่วนใหญ่จะไม่แสดงรูปภาพเลยในการเปิด Email ครั้งแรก ซึ่งการไม่แสดงรูปนั้นก็เป็นปัญหากับ Email ที่แนบมาเป็นรูปๆเดียวใหญ่ๆ เพราะเราเปิดดูครั้งแรกเราจะไม่เห็นอะไรเลย เราแก้ปัญหานี้ได้ด้วย การใส่ Alt ลงไปใน <img> ด้วยเสมอn เช่น <img alt=”this is a picture”> ซึ่งจะแสดงข้อความเมื่อรูปภาพไม่แสดงออกมา บอกคนอ่านได้ว่า รูปที่ไม่แสดงนั้น คือรูปอะไร อย่างน้อยเค้าก็มีอะไรอ่านบ้าง ดีกว่าไม่มีอะไรให้อ่านเลย อ่อ ลืมบอกไปว่า เราใส่ภาพเป็น background-image ไม่ได้นะคะ ดังนั้นเราก็ต้องใช้ <img> แน่นอนล่ะ และอีกอย่างคือ เราไม่ควรใช้รูป .png นะคะ (โดยเฉพาะรูปที่เป็น transparent) เพราะว่า Email Client เก่าๆมันไม่รองรับนั่นเอง เศร้าจริงๆ T^T

สังเกตกล่องสี่เหลี่ยมบนสุด ว่า Email นี้ไม่ได้แสดงรูปภาพนะ(ค่าเริ่มต้นจะไม่แสดงรูปภาพ) ซึ่งจะตั้งให้แสดงตลอดก็ได้

ส่วนวงกลมเบี้ยวๆ สีแดง คือรูปภาพที่ไม่ได้แสดง จะขึ้นเป็นกรอบเหลี่ยมๆไว้ และมีข้อความที่เรากำหนดไว้ใน alt ซึ่งถ้าไม่ได้กำหนดจะเป็นกล่องว่างๆ

 

โฮสเก็บภาพ ที่แสดงใน Email

เนื่องจากภาพที่เราแสดงใน Email เป็นการดึงภาพผ่าน URL มาจากโฮสของเราเอง (เราไม่แนะนำให้ attach ภาพไปกับ Email เพราะจะทำให้ Email ใหญ่มาก) ดังนั้น โฮสที่เราเก็บภาพไว้ เราต้องแน่ใจก่อนว่า จะไม่มีใครมือบอนมาลบรูปสำหรับ Email ทิ้ง หรือไปย้ายที่มัน เพราะอย่าลืมว่า Email แต่ละฉบับ เราสามารถมาเปิดดูย้อนหลังได้ เมื่อไหร่ก็ได้ ดังนั้นเราควรโฮสรูปสำหรับ Email ไว้เป็นระยะเวลานานพอสมควร (อาจจะหลายปี) เพื่อให้ Email ที่เราส่งออกไปนั่น แสดงผลได้ตามที่เราต้องการตลอดเวลา

 

เรื่องของ link

เราสามารถใส่สีให้กับ link ใน <a> ได้ด้วย inline CSS เหมือนกับ text ส่วนอื่นๆ แต่ในบาง Email client เค้าจะแทนที่สีลิ้งที่เรากำหนดใน <a> ให้เป็นสีมาตรฐานของเค้า ซึ่งเราเหล่าดีไซน์เนอร์ย่อมไม่ชอบเท่าไหร่ (แน่นอนล่ะ) วิธีแก้คือ การกำหนด <span> เข้าไปอีกชั้นหนึ่ง ตามตัวอย่าง

ปกติเราจะเขียนแค่นี้

<a style="color: #ff0000;">anchor link here</a>

ให้เราใส่ <span> เพิ่มเข้าไปใน <a> ด้วย

<a style="color: #ff0000;"><span style="color: #ff0000;">anchor link here</span></a>

 

ทดสอบ Email ก่อนใช้งานจริง

หลังจากเขียนแล้ว แน่นอนว่า ก็อย่าลืมทดสอบ Email ก่อนส่งจริงๆ หลักๆ ที่เราเทสคือ ส่งเมลเข้า Gmail, Hotmail, Yahoo mail แล้วก็ลองเปิดดูทั้งผ่าน Web Browser หลายๆตัว และ โปรแกรมต่างๆ เช่น outlook, mail (ใน Mac os), ใน Tablet และ ในมือถือ เช็คดูว่า ตอนไม่แสดงรูป เนื้อหา Email ของเราแสดงผลได้ครบถ้วนแค่ไหน แล้วหลังแสดงรูปแล้ว มันมีหน้าตาเป็นอย่างที่ต้องการหรือไม่ และต้องแก้ไขอะไรบ้าง

 

พูดกันมาถึงตรงนี้แล้ว เยอะจริงๆ นะคะ นี่ยังไม่ครบเต็มสูตรจริงๆ มันมีรายละเอียดเล็กๆ อีกมาก แต่เราเอาแค่ส่วนสำคัญๆ ดีกว่า ที่เหลือก็แล้วแต่ว่าใครมีพลัง ไปศึกษาต่อกันเอง เพราะฝรั่งก็มีเขียนเรื่องนี้ไว้เยอะพอสมควร สำหรับคนที่อ่านแล้วยังงงๆ อยู่ แนะนำให้ลองเขียนขึ้นมาสักอันนึงค่ะ แล้วจะเข้าใจเลย มันไม่ได้ยาก แต่มันยุ่งยาก  จะแก้แค่สีของลิ้ง ทีนึงนี่ มือหงิกกันเลยทีเดียว แค่กด find หาจุดที่ต้องแก้ก็เยอะมากแล้วค่ะ 555 ขอให้สนุกสนานกันถ้วนหน้านะคะ

ลิ้งอ้างอิง และลิ้งที่น่าสนใจ