จะสร้างเทมเพลตอีเมลด้วย HTML & CSS ได้อย่างไร

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

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

การออกแบบ

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

โครงสร้าง

ภายในเนื้อหาของหน้า 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> <prsws_divider">