ในคู่มือสำหรับผู้เริ่มต้นนี้ คุณจะได้เรียนรู้วิธีสร้างเทมเพลตอีเมลแบบ Responsive คุณจะทำตามคำแนะนำทีละขั้นตอนพร้อม Code Snippets เพื่อออกแบบเทมเพลตอีเมลที่ดูดีบนอุปกรณ์ทุกประเภท
โปรเจกต์นี้เหมาะสำหรับมือใหม่ที่อยากเรียนรู้พื้นฐานการออกแบบอีเมล!
ขั้นตอนที่ 1: ตั้งค่าโครงสร้างพื้นฐาน
ในการสร้างเทมเพลตอีเมล คุณสามารถเริ่มจากโครงสร้าง HTML พื้นฐาน ซึ่งรวมถึงการประกาศ DOCTYPE สำหรับอีเมล การกำหนด Section head และ body และใช้ Meta Tags ใน Section head เพื่อให้แน่ใจว่าการ Rendering และ Zooming บนมือถือทำงานถูกต้อง
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Email Template</title> </head> <body> <!-- Email content goes here --> </body> </html>
ขั้นตอนที่ 2: สร้างโครงสร้างอีเมล
ใช้ Tables เพื่อสร้างโครงสร้างพื้นฐานของอีเมล นี่จะช่วยให้เข้ากันได้กับ Email Client ต่างๆ
<table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center"> <table width="600" cellpadding="0" cellspacing="0" border="0"> <!-- Email content goes here --> </table> </td> </tr> </table>
ขั้นตอนที่ 3: เพิ่มเนื้อหาและ Inline Styles
Email Client ต่างๆ Render CSS แตกต่างกัน จึงปลอดภัยกว่าที่จะใช้ Inline Styles นี่คือตัวอย่าง Body อีเมลแบบง่าย:
<body style="font-family: 'Poppins', Arial, sans-serif"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" style="padding: 20px;"> <table class="content" width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border: 1px solid #cccccc;"> <!-- Header --> <tr> <td class="header" style="background-color: #345C72; padding: 40px; text-align: center; color: white; font-size: 24px;"> Responsive Email Template </td> </tr> <!-- Body --> <tr> <td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;"> Hello, All! <br> Lorem odio soluta quae dolores sapiente voluptatibus recusandae aliquam fugit ipsam. <br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit. Incidunt, officia facilis atque? Ipsam voluptas fugiat distinctio blanditiis veritatis. </td> </tr> <!-- Call to action Button --> <tr> <td style="padding: 0px 40px 0px 40px; text-align: center;"> <!-- CTA Button --> <table cellspacing="0" cellpadding="0" style="margin: auto;"> <tr> <td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;"> <a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a> </td> </tr> </table> </td> </tr> <tr> <td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit. </td> </tr> <!-- Footer --> <tr> <td class="footer" style="background-color: #333333; padding: 40px; text-align: center; color: white; font-size: 14px;"> Copyright © 2024 | Your brand name </td> </tr> </table> </td> </tr> </table> </body>
นี่คือการแยกวิเคราะห์องค์ประกอบหลักและหน้าที่ของแต่ละอย่าง:
Body Tag และการตั้งค่า Font
<body style="font-family: 'Poppins', Arial, sans-serif">
ตั้งค่า Default Font ของอีเมลเป็น 'Poppins' พร้อม Fallback เป็น Arial และ sans-serif หาก 'Poppins' ไม่พร้อมใช้งาน
โครงสร้าง Table
<table width="100%" border="0" cellspacing="0" cellpadding="0">
นี่คือตารางชั้นนอกสุดที่กว้าง 100% ของอีเมล border, cellspacing, และ cellpadding ตั้งเป็น 0 เพื่อลบ Styling และ Spacing เริ่มต้น
ซ้อนอยู่ภายในคือ <table class="content"> อีกตัวหนึ่งที่มีความกว้างคงที่ 600px จัดกึ่งกลางโดย Parent ด้วย td align="center"
ตารางภายในนี้รวม Border และ Styling เฉพาะเจาะจง กำหนดให้เป็นพื้นที่เนื้อหาหลัก
Header ใช้สีฟ้ามืดเป็นพื้นหลังด้วย Inline CSS (#345C72) ตัวอักษรสีขาว และขนาดตัวอักษรใหญ่ (24px) ออกแบบให้ดึงดูดสายตาตั้งแต่ต้นอีเมล
หมายเหตุ: คุณสามารถปรับแต่ง Section นี้ด้วย Brand Name หรือ Logo ของคุณแทนได้
เนื้อหา Body
Section Body มีข้อความหลักของอีเมล ตั้งขนาดตัวอักษร 16px และ Line Height 1.6 เพื่อ Readability เนื้อหาจัดชิดซ้าย ใช้ Tag <br> ช่วยเว้นบรรทัด
ปุ่ม Call to Action (CTA)
<!-- Call to action Button --> <tr> <td style="padding: 0px 40px 0px 40px; text-align: center;"> <!-- CTA Button --> <table cellspacing="0" cellpadding="0" style="margin: auto;"> <tr> <td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;"> <a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a> </td> </tr> </table> </td> </tr> <tr>
ปุ่ม CTA ออกแบบให้โดดเด่นด้วยสีพื้นหลังตรงกับ Header มุมโค้ง (border-radius: 5px) และตัวอักษรตัวหนาสีขาว
Tag <a> ภายในปุ่มstyled ให้ลบ Underline เริ่มต้น (text-decoration: none) และลิงก์ไปยังเว็บเพจที่ผู้รับสามารถ "Book a Free Consultation" ได้
Footer ใช้แนวทาง Styling เดียวกับ Header แต่ใช้พื้นหลังสีเข้มกว่า (#333333) และขนาดตัวอักษรเล็กลง (14px) สามารถใส่ข้อมูล Copyright และลิงก์หรือรายละเอียดติดต่ออื่นๆ
ภาพประกอบ
[รูปภาพแสดงส่วนต่างๆ ของเทมเพลต: Header, CTA Button, Footer]
ขั้นตอนที่ 4: ทำให้ Responsive
เพื่อให้อีเมลดูดีบนมือถือ สามารถใช้ CSS Media Queries แม้ Styling ส่วนใหญ่จะเป็น Inline แต่สำหรับ Responsive Behavior ต้องเพิ่ม Block <style> ใน head
Media Queries ปรับ Style ตามความกว้างของอุปกรณ์
<style> @media screen and (max-width: 600px) { .content { width: 100% !important; display: block !important; padding: 10px !important; } .header, .body, .footer { padding: 20px !important; } } </style>
นี่คือการแยกวิเคราะห์ CSS Snippet นี้:
@media screen and (max-width: 600px) { ... }
Media Query นี้เป้าหมายหน้าจอที่มีความกว้างสูงสุด 600 พิกเซล ใช้ Style ต่อไปนี้เฉพาะเมื่ออีเมลถูกดูบนอุปกรณ์ที่กว้างหน้าจอ 600px หรือน้อยกว่า ซึ่งมักรวมถึงสมาร์ทโฟนและแท็บเล็ตขนาดเล็ก
Style ภายใน Media Query Classes:
.content
width: 100% !important;: เปลี่ยนความกว้างของตาราง.contentให้ใช้ความกว้างเต็มหน้าจอแทน 600px ที่ระบุใน HTML กฎ!importantใช้เพื่อ Override Style ที่ขัดแย้งอื่นๆdisplay: block !important;: แม้<table>จะเป็น Block-level Element โดยธรรมชาติ การตั้งdisplay: blockอย่างชัดเจนช่วยใน Email Client บางตัวให้ Element ทำงานได้ตามที่คาดหวังpadding: 10px !important;: เพิ่ม Padding รอบเนื้อหาในตาราง.contentลดจาก 40px เดิมใน HTML เพื่อใช้พื้นที่หน้าจอที่ลดลงบนอุปกรณ์เล็กได้อย่างมีประสิทธิภาพ
.header, .body, .footer
padding: 20px !important;: Style นี้ตั้งค่า Padding ของ Section Header, Body และ Footer ให้เป็น 20px ทุกด้านอย่างสม่ำเสมอ เพื่อเพิ่มประสิทธิภาพ Spacing บนหน้าจอเล็ก Override การตั้งค่า Padding ต่างๆ ใน HTML ซึ่งมีค่ามากกว่าในบางกรณี
ในบริบทของการออกแบบอีเมล การใช้ !important เป็นเรื่องปกติ เพื่อให้แน่ใจว่า Style ถูกนำไปใช้ตามที่ตั้งใจ Override ทั้ง Default Styles และ Style ที่ขัดแย้งอื่นๆ ที่อาจถูกนำไปใช้โดย Email Client เอง
ขั้นตอนที่ 5: ทดสอบใน Email Client ต่างๆ
การทดสอบเทมเพลตอีเมลใน Email Client ต่างๆ (อย่าง Gmail, Outlook, Apple Mail) และอุปกรณ์ต่างๆ มีความสำคัญสูงสุด เพื่อให้แน่ใจเรื่อง Compatibility และ Responsiveness Tools อย่าง Litmus หรือ Email on Acid ช่วยได้
ขั้นตอนที่ 6: เพิ่ม Google Font
การนำ Google Fonts มาใช้ในเทมเพลตอีเมล HTML สามารถเพิ่ม Visual Appeal ได้มาก แต่สำคัญคือไม่ได้ Email Client ทุกตัวรองรับ Web Fonts บางตัวอย่าง Apple Mail รองรับ Google Fonts แต่อื่นๆ เช่น Gmail ไม่รองรับ จึงต้องมี Fallback Font เสมอ
นี่คือวิธีเพิ่ม Google Font ในเทมเพลตอีเมล พร้อม Fallback สำหรับ Client ที่ไม่รองรับ:
เลือก Google Font
ไปที่เว็บไซต์ Google Fonts และเลือก Font สำหรับตัวอย่างนี้ใช้ "Poppins"
เพิ่ม Font Link ใน Email Head
ใส่ Link ไปยัง Google Font ใน <head> ของเอกสาร HTML เนื่องจากอาจไม่ได้รับการรองรับใน Email Client ทั้งหมด จึงต้องมี Fallback Font ที่เหมาะสมใน Styles
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
นำ Font ไปใช้ใน Styles
ใช้ Inline CSS นำ Google Font ไปใช้กับ HTML Elements และใส่ Generic Fallback Font เสมอ ในเทมเพลตอีเมล นำ Style ไปใช้แบบ Inline ปลอดภัยกว่า เนื่องจาก Support สำหรับ Tag <style> แตกต่างกันใน Email Client
นี่คือวิธีนำ Font ไปใช้กับ body ของอีเมล พร้อม Fallback:
<body style="font-family: 'Poppins', Arial, sans-serif;"> <table width="100%" cellspacing="0" cellpadding="0"> <!-- Email content --> </table> </body>
สิ่งที่เราสร้างขึ้น
ด้านล่างคือ Screenshot ของเทมเพลตอีเมลที่เราออกแบบ มี Layout มืออาชีพพร้อม Header ที่มี Placeholder Logo, Section Body หลักสำหรับข้อความ และ Footer สีเข้มพร้อมลิงก์ติดต่อและจัดการการสมัครรับข่าวสาร
[Screenshot ของเทมเพลตอีเมล]
เคล็ดลับเพิ่มเติม:
- เก็บ CSS ให้เป็น Inline มากที่สุด เนื่องจาก Email Client หลายตัวไม่รองรับ Tag
<style> - ใช้ Web-safe Fonts เพื่อให้ข้อความแสดงถูกต้องใน Email Client ทุกตัว
- เตรียม Plain Text Version ของอีเมลไว้เสมอสำหรับ Client ที่ไม่รองรับ HTML หรือปิด HTML ไว้
หวังว่าคู่มือนี้จะให้กรอบงานพื้นฐานสำหรับการสร้างเทมเพลตอีเมลแบบ Responsive เมื่อคุณคล่องแคล่วขึ้นกับการออกแบบอีเมล สามารถทดลอง Layout และ Style ที่ซับซ้อนขึ้นได้
Happy Coding!
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started
