วิธีสร้างเทมเพลตอีเมลด้วย HTML และ CSS

ในฐานะทั้งนักออกแบบและนักพัฒนา วันหนึ่งลูกค้าของคุณจะขอเทมเพลตอีเมลสำหรับจดหมายข่าวของพวกเขา ฉันต้องบอกว่าเทมเพลตอีเมลไม่น่าตื่นเต้นเพียงเพราะมีช่องว่างขนาดใหญ่ในการรองรับ HTML และ CSS คุณจะคิดว่าในยุคปัจจุบันจะไม่เป็นเช่นนั้น เนื่องจากเรากำลังผลักดัน HTML5 และ CSS3 ไปข้างหน้า อย่างไรก็ตาม ฉันรู้สึกเสียใจที่ต้องกล่าวว่าเมื่อพูดถึงการแสดงอีเมลนั้นยังไม่ใช่กรณีนี้

สิ่งแรกที่ควรคำนึงถึงเมื่อสร้างเทมเพลตอีเมล HTML คือข้อเท็จจริงที่ว่าสไตล์ CSS ทั้งหมดควรทำแบบอินไลน์ ในกรณีอื่น ๆ นี่เป็นการปฏิเสธที่ยิ่งใหญ่มาก แต่เนื่องจากมีการสนับสนุน CSS ภายนอกและแม้แต่ CSS ในส่วนหัวน้อยมาก อินไลน์จึงเป็นวิธีที่ควรทำ นอกจากนี้ – และฉันแน่ใจว่าคุณเคยได้ยินเกี่ยวกับเรื่องนี้มาก่อน – เทมเพลตจะต้องสร้างด้วยตาราง ไม่ใช่ DIV นี่เป็นเรื่องน่าเสียดายอีกครั้ง แต่เป็นวิธีที่จะไป เนื่องจากอีเมลโดยรวมไม่ได้ใหญ่ขนาดนั้น การออกแบบและสร้างอีเมลจึงไม่ใช่เรื่องยาก – มันน่าเบื่อเมื่อเทียบกับการออกแบบเว็บหรือมือถือ

การออกแบบ

 แนะนำสำหรับคุณ: วิธีเร่งกระบวนการออกแบบของคุณโดยใช้ CSS Framework สมัยใหม่

โครงสร้าง

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

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"></td> </tr> <tr><!-- Second row --> <td colspan="2"></td> </tr> <tr><!-- Third row --> <td></td> <td></td> </tr> <tr><!-- Fourth row --> <td></td> <td></td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2" ></td> </tr> </table>

รูปแบบ

เอาล่ะ ตอนนี้เราจะเพิ่ม CSS ภายในเนื้อหาของเอกสาร ไม่มีอะไรหรูหราเลยเพียงแค่รีเซ็ตและกำหนดสีลิงก์และสไตล์ ฉันจะระมัดระวังอย่างมากกับ CSS ที่คุณใส่ไว้ที่นี่ เนื่องจากไคลเอนต์อีเมลมักเพิกเฉย

 <style> * { margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #464646; text-decoration:none; } </style>

หัวข้อ

ถึงเวลาแล้วที่จะเติมตารางด้วยเนื้อหา คุณสามารถค้นหารูปภาพภายในไฟล์ที่จัดเตรียมไว้ให้คุณด้านบน – ที่จุดเริ่มต้นของบทช่วยสอนนี้ ตอนนี้คุณควรกรอกข้อความและรูปภาพทั้งหมดที่จะอยู่ในอีเมลนี้ โปรดทราบว่าในบทช่วยสอน คุณไม่จำเป็นต้องเชื่อมโยงไฮเปอร์ลิงก์กับสิ่งใดๆ และคุณสามารถใช้ภาพของคุณเองได้เช่นกัน ภายในโค้ดนี้ ฉันได้กำหนดความกว้างของภาพทั้งสามภาพเพื่อให้แน่ใจว่าได้ตั้งค่าขนาดไว้

มีบางอย่างที่ฉันต้องการให้คุณทราบอย่างยิ่ง: รูปภาพเหมาะสำหรับอีเมลตราบเท่าที่มีขนาด a: ขนาดเล็ก และ b: มีแท็ก alt ที่อธิบายได้ดี ฉันแน่ใจว่าคุณทราบดีว่าเพื่อให้รูปภาพปรากฏในอีเมล ผู้รับอีเมลนี้ต้องอนุญาตให้รูปภาพปรากฏ หากไม่ทำเช่นนั้นก็ไม่มีอะไรจะบอกได้ว่าควรคาดหวังอะไร นอกจากนี้ยังเป็นปัญหาในการเข้าถึงหากคุณไม่ได้ให้คำอธิบายสำหรับผู้ใช้ที่ตาบอด อย่างไรก็ตามนั่นเป็นอีกเรื่องหนึ่ง บทเรียนคือ: ใช้รูปภาพขนาดเล็กที่มีแท็ก alt เสมอ!

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>

สไตล์อินไลน์

สิ่งสุดท้ายที่เราจะทำคือใส่สไตล์ CSS แบบอินไลน์สำหรับเทมเพลตอีเมล HTML นี้ เป็นสิ่งที่ทำให้รูปลักษณ์ของอีเมลที่คุณเห็นจนถึงตอนนี้อีเมลนี้ไม่ได้ดูสวยงามเลย ฉันจะแบ่งส่วนนี้ออกเป็นชิ้นเล็กๆ เพื่อไม่ให้มันมากเกินไป

 คุณอาจชอบ: 7 เคล็ดลับที่เป็นประโยชน์ในการทำให้หัวเรื่องอีเมลของคุณน่าคลิกมากขึ้น

ร่างกาย

ขั้นแรก ให้ตั้งค่าสีพื้นหลังของหน้าอีเมลทั้งหมด รวมทั้งขนาดฟอนต์เริ่มต้นและสีฟอนต์

 <body bgcolor="#f7d973" ></body>

โต๊ะ

สิ่งต่อไปที่ต้องทำคือจัดกึ่งกลางเนื้อหาของอีเมลและระบุสีพื้นหลังของตัวเองเพื่อให้โดดเด่น

แถวแรก – ส่วนหัว

มีหลายสิ่งที่เกิดขึ้นภายในเซลล์แถวแรก โปรดทราบว่ารูปแบบอินไลน์อยู่ที่ <td> ไม่ใช่ <tr> สิ่งที่เรากำลังทำอยู่นี้คือสีพื้นหลังใหม่เพื่อให้เข้ากับโลโก้ นอกจากนี้ยังมีช่องว่างภายในและการจัดตำแหน่งด้วย ตอนนี้ฉันกำลังเปลี่ยนสีของข้อความเป็นสีขาวเนื่องจากข้อความแสดงแทนจะเป็นสีดำตามค่าเริ่มต้น คุณจะไม่สามารถมองเห็นบนพื้นหลังนี้ ดังนั้นฉันแน่ใจว่าคุณทำได้โดยการเปลี่ยนสีข้อความ อาจดูไร้ประโยชน์สำหรับคุณ แต่อย่างที่ฉันพูดนี่เป็นสิ่งสำคัญมากสำหรับผู้ที่ไม่อนุญาตให้ใช้รูปภาพเป็นค่าเริ่มต้น

 <tr><!-- First row - header --> <td colspan="2"> <img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a> </td> </tr>

แถวที่สอง

ภายในแถว มีเพียงเซลล์เดียวที่ครอบคลุมสองคอลัมน์ เซลล์นี้ได้รับการจัดการเล็กน้อยโดยการเพิ่มช่องว่างภายในและเส้นแบ่งที่ด้านล่างเพื่อแยกเนื้อหาออกจากแถวด้านล่าง เรามีพาดหัวใหญ่เช่นกันซึ่งได้รับช่องว่างผ่านระยะขอบ และสำหรับแถวนี้

 <tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>

แถวที่สาม

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

 <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>

แถวที่สี่

นี่เป็นส่วนที่มีสไตล์มากที่สุดในเทมเพลตอีเมล HTML นี้ ดังที่คุณเห็นได้จากรหัสด้านล่างมีหลายสิ่งหลายอย่างเกิดขึ้น ขั้นแรก ทั้งแถวจะได้รับสีพื้นหลังและสีข้อความใหม่เพื่อให้แน่ใจว่าข้อความจะปรากฏให้เห็น เช่นเดียวกับในส่วนหัว ทั้งเซลล์แรกและเซลล์ที่สองและเนื้อหาได้รับการเปลี่ยนแปลงรูปแบบที่เหมือนกันทุกประการ ขั้นแรก เซลล์จะได้รับพื้นหลังและสีข้อความใหม่ จากนั้น ลิงก์ภายในส่วนหัวจะเปลี่ยนเป็นสีเหลือง สุดท้าย ย่อหน้าสุดท้ายจะถูกขีดเส้นใต้และเพื่อเพิ่มการคั่นด้วยการเพิ่มระยะขอบด้วย อย่างที่ฉันพูดไป เซลล์ที่สองและเนื้อหาได้รับสไตล์เดียวกันทุกประการ

 <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer
 และสุดท้ายคือส่วนท้าย มีน้อยมากเกิดขึ้นที่นี่ แค่เว้นระยะห่างผ่านช่องว่างภายในแค่นั้นเอง!






<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>
คำสุดท้าย

บทช่วยสอนนี้ค่อนข้างยาว แต่ฉันหวังว่าคุณจะเข้าใจสิ่งที่ต้องใช้ในการสร้างเทมเพลตอีเมล HTML ตั้งแต่เริ่มต้น ไม่ใช่แนวคิดที่ซับซ้อน แต่อาจน่าเบื่อ ถึงตาคุณแล้วที่จะเริ่มสร้างอีเมลระดับไฮเอนด์ที่ดูน่าทึ่ง! คุณอาจผสมผสานเทคนิคต่างๆ ในการสร้างเทมเพลตอีเมลเพื่อให้มีเอกลักษณ์เฉพาะตัวมากขึ้น
บทความนี้เขียนโดย Hannah Butler เธอทำงานเป็นนักพัฒนาและออกแบบเว็บไซต์ นอกจากนี้ เธอชอบแบ่งปันประสบการณ์ของเธอในรูปแบบของบทความ ในกรณีนี้ เธอมีส่วนของตัวเองบนเว็บไซต์ WriteMyPaper4Me.co ในอนาคตเธอกำลังจะเริ่มเขียนบล็อกเพื่ออธิบายวิธีการทำงานของเธอให้ผู้อื่นได้ทราบ