Trong hướng dẫn thân thiện cho người mới, bạn sẽ học cách tạo mẫu email responsive. Bạn sẽ làm theo hướng dẫn từng bước với đoạn mã để thiết kế mẫu email trông đẹp trên mọi thiết bị.
Dự án này hoàn hảo cho người mới muốn thành thạo cơ bản thiết kế email!
Bước 1: Thiết Lập Cấu Trúc Cơ Bản
Để xây dựng mẫu email, bạn có thể bắt đầu với cấu trúc HTML cơ bản. Bao gồm khai báo DOCTYPE cho email, định nghĩa phần head và body, và dùng meta tag trong head để đảm bảo hiển thị và zoom đúng trên mobile.
<!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>
Bước 2: Tạo Cấu Trúc Email
Dùng bảng (table) để tạo cấu trúc cơ bản email. Điều này đảm bảo tương thích trên các email client khác nhau.
<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>
Bước 3: Thêm Nội Dung Và Inline Styles
Email client khác nhau trong cách hiển thị CSS, nên an toàn hơn là dùng inline styles. Đây là ví dụ body email đơn giản:
<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>
Dưới đây là phân tích các yếu tố chính và chức năng:
Thẻ Body Và Thiết Lập Font
<body style="font-family: 'Poppins', Arial, sans-serif">
Đặt font mặc định cho email là 'Poppins', với fallback Arial và sans-serif nếu 'Poppins' không có sẵn.
Cấu Trúc Bảng
<table width="100%" border="0" cellspacing="0" cellpadding="0">
Đây là bảng ngoài cùng chiếm 100% chiều rộng email. border, cellspacing, cellpadding đặt 0 để bỏ style và khoảng cách mặc định.
Bên trong bảng này là <table class="content"> khác với chiều rộng cố định 600px, được căn giữa bởi parent với td align="center".
Bảng nội bộ này bao gồm viền và style cụ thể, định nghĩa nó là khu vực nội dung chính.
Header được style với nền xanh đậm dùng inline CSS (#345C72), chữ trắng, cỡ chữ lớn (24px). Được thiết kế để thu hút sự chú ý ngay đầu email.
Lưu ý: Bạn có thể tùy chỉnh phần này với tên thương hiệu hoặc logo.
Nội Dung Body
Phần body chứa tin nhắn chính của email, cỡ chữ 16px và line-height 1.6 để dễ đọc. Nội dung căn trái, dùng thẻ <br> để tạo khoảng cách dòng.
Nút Kêu Gọi Hành Động (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>
Nút CTA được thiết kế nổi bật với màu nền trùng header, góc bo tròn (border-radius: 5px), chữ đậm, trắng.
Thẻ <a> trong nút được style bỏ gạch chân mặc định (text-decoration: none) và liên kết đến trang web nơi người nhận có thể "Đặt Lịch Tư Vấn Miễn Phí."
Footer lặp lại cách style của header nhưng dùng nền tối hơn (#333333) và cỡ chữ nhỏ hơn (14px). Có thể chứa thông tin bản quyền và liên kết hoặc chi tiết liên hệ khác.
Minh Họa
Minh họa các phần của mẫu: header, nút CTA, footer
Bước 4: Làm Cho Nó Responsive
Để email trông đẹp trên mobile, bạn có thể dùng CSS media queries. Mặc dù hầu hết style là inline, cho hành vi responsive, bạn cần thêm block <style> trong head.
Media queries điều chỉnh style dựa trên chiều rộng thiết bị.
<style> @media screen and (max-width: 600px) { .content { width: 100% !important; display: block !important; padding: 10px !important; } .header, .body, .footer { padding: 20px !important; } } </style>
Phân tích đoạn CSS cụ thể này:
@media screen and (max-width: 600px) { ... }
Media query này nhắm vào màn hình tối đa 600 pixel. Áp dụng các style sau chỉ khi email xem trên thiết bị màn hình 600px hoặc nhỏ hơn, thường bao gồm smartphone và một số tablet nhỏ.
Các style trong class media query:
.content
width: 100% !important;: Thay đổi chiều rộng bảng.contentdùng toàn bộ chiều rộng màn hình thay vì 600px chỉ định trong HTML. Quy tắc!importantghi đè style xung đột khác.display: block !important;: Dù<table>tự nhiên là block-level, đặtdisplay: blockrõ ràng giúp một số email client đảm bảo yếu tố hoạt động như mong đợi.padding: 10px !important;: Thêm padding quanh nội dung trong bảng.content, giảm từ 40px gốc trong HTML để tận dụng tốt không gian màn hình nhỏ hơn.
.header, .body, .footer
padding: 20px !important;: Style này đặt padding đồng đều cho header, body, footer thành 20px mọi phía, tối ưu khoảng cách cho màn hình nhỏ. Ghi đè các setting padding khác nhau trong HTML, bao gồm giá trị lớn hơn ở một số trường hợp.
Trong thiết kế email, dùng !important khá phổ biến để đảm bảo style áp dụng như ý định, ghi đè cả style mặc định và style xung đột khác có thể được áp dụng bởi email client.
Bước 5: Kiểm Tra Trên Các Email Client
Quan trọng phải test mẫu email trên các email client khác nhau (Gmail, Outlook, Apple Mail) và thiết bị để đảm bảo tương thích và responsive. Công cụ như Litmus hoặc Email on Acid có thể giúp.
Bước 6: Thêm Google Font
Đưa Google Fonts vào mẫu email HTML có thể cải thiện hấp dẫn trực quan đáng kể.
Tuy nhiên, lưu ý không phải email client nào cũng hỗ trợ web font. Một số như Apple Mail hỗ trợ Google Fonts, nhưng Gmail thì không. Để email trông đẹp cho mọi người nhận, luôn cung cấp fallback font.
Cách thêm Google Font vào mẫu email, cùng fallback cho client không hỗ trợ:
Chọn Google Font
Truy cập Google Fonts chọn font. Ví dụ dùng "Poppins".
Thêm Link Font Vào Head Email
Bao gồm link Google Font trong <head> tài liệu HTML. Vì có thể không hỗ trợ mọi email client, đảm bảo fallback font phù hợp trong 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">
Áp Dụng Font Trong Styles
Dùng inline CSS áp dụng Google Font cho phần tử HTML, luôn bao gồm fallback font generic. Trong mẫu email, an toàn hơn áp dụng style inline do hỗ trợ khác nhau cho thẻ <style> trên email client.
Cách áp dụng font cho body email và bao gồm fallback:
<body style="font-family: 'Poppins', Arial, sans-serif;"> <table width="100%" cellspacing="0" cellpadding="0"> <!-- Email content --> </table> </body>
Chúng Ta Đã Tạo Gì
Dưới đây là screenshot mẫu email chúng ta thiết kế. Nó có bố cục chuyên nghiệp với header chứa placeholder logo, phần body chính cho tin nhắn, và footer tối với liên hệ và link quản lý đăng ký.
Screenshot mẫu email
Mẹo Bổ Sung:
- Giữ CSS inline nhiều nhất có thể, vì nhiều email client không hỗ trợ thẻ
<style>. - Dùng web-safe font để đảm bảo chữ hiển thị đúng trên mọi email client.
- Luôn cung cấp phiên bản plain text cho email cho client không hỗ trợ HTML hoặc tắt HTML.
Hy vọng hướng dẫn này cung cấp khung cơ bản tạo mẫu email responsive. Khi bạn thoải mái hơn với thiết kế email, bạn có thể thử layout và style phức tạp hơn.
Happy Coding!
Học lập trình miễn phí. Chương trình mở của freeCodeCamp đã giúp hơn 40.000 người tìm được việc làm lập trình viên. Bắt đầu ngay