Trong hướng dẫn thân thiện với người mới bắt đầu này, bạn sẽ tìm hiểu cách tạo mẫu email phản hồi. Bạn sẽ làm theo hướng dẫn từng bước kèm theo đoạn mã để thiết kế mẫu email trông đẹp mắt trên mọi thiết bị.
Dự án này hoàn hảo cho những người mới muốn tìm hiểu kiến thức cơ bản về 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. Điều này bao gồm một DOCTYPE khai báo cho email, xác định head và body các phần và sử dụng thẻ meta trong head để đảm bảo hiển thị và thu phóng phù hợp trên thiết bị di động.
<!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
Sử dụng bảng để tạo cấu trúc cơ bản cho email của bạn. Điều này sẽ đảm bảo khả năng tương thích giữa các ứng dụng email 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à kiểu nội tuyến
Ứng dụng email khách khác nhau về cách chúng hiển thị CSS, vì vậy sẽ an toàn hơn khi sử dụng kiểu nội tuyến. Sau đây là ví dụ về nội dung 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à bảng phân tích các thành phần chính và chức năng của chúng:
Thiết lập thẻ nội dung và phông chữ
<body style="font-family: 'Poppins', Arial, sans-serif">
Thao tác này sẽ đặt phông chữ mặc định cho email thành 'Poppins', phông chữ dự phòng là Arial và sans-serif nếu không có 'Poppins'.
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 của email. border , cellspacing , và cellpadding được đặt thành 0 để xóa kiểu và khoảng cách mặc định.
Lồng trong bảng này là một <table class="content"> khác với chiều rộng cố định là 600px, được căn giữa bởi phần tử mẹ với td align="center" .
Bảng bên trong này bao gồm đường viền và kiểu dáng cụ thể, xác định bảng này là vùng nội dung chính.
Tiêu đề được tạo kiểu với nền màu xanh đậm bằng cách sử dụng CSS nội tuyến (#345C72), màu văn bản màu trắng và kích thước văn bản lớn hơn (24px). Nó được thiết kế để thu hút sự chú ý ngay từ đầu email.
Lưu ý : Thay vào đó, bạn có thể tùy chỉnh phần này bằng tên thương hiệu hoặc biểu tượng của mình.
Nội dung cơ thể
Phần nội dung chứa thông điệp chính của email, đặt cỡ chữ 16px và chiều cao dòng 1,6 để dễ đọc hơn. Nội dung được căn lề trái và sử dụng <br> các thẻ giúp giãn cách các 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 ở đây được thiết kế nổi bật với màu nền phù hợp với tiêu đề, các góc được bo tròn (border-radius: 5px ) và văn bản màu trắng, đậm.
<a> thẻ trong nút được tạo kiểu để xóa phần gạch chân mặc định (text-decoration: none ) và được liên kết tới trang web nơi người nhận có thể "Đặt lịch tư vấn miễn phí".
Phần chân trang lặp lại cách tiếp cận kiểu dáng của phần đầu trang nhưng sử dụng nền tối hơn (#333333) và cỡ chữ nhỏ hơn (14px). Nó có thể chứa thông tin bản quyền và các liên kết hoặc chi tiết liên hệ khác.
Minh họa
minh họa các phần khác nhau của mẫu:đầu trang, nút CTA và chân trang
Bước 4:Làm cho nó phản hồi
Để đảm bảo email trông đẹp mắt trên thiết bị di động, bạn có thể sử dụng truy vấn phương tiện CSS. Mặc dù hầu hết kiểu dáng đều là nội tuyến, nhưng để có hành vi phản hồi nhanh, bạn sẽ cần thêm <style> chặn trong head .
Truy vấn phương tiện điều chỉnh kiểu dựa trên chiều rộng của 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>
Dưới đây là bảng phân tích đoạn mã CSS cụ thể này:
@media screen and (max-width: 600px) { ... }
Truy vấn phương tiện này nhắm mục tiêu các màn hình có chiều rộng tối đa 600 pixel. Nó chỉ áp dụng các kiểu sau khi email được xem trên các thiết bị có chiều rộng màn hình từ 600px trở xuống, thường bao gồm điện thoại thông minh và một số máy tính bảng nhỏ hơn.
Kiểu trong các lớp truy vấn phương tiện:
.nội dung
width_: 100% !important;_:Kiểu này thay đổi độ rộng của.contenttable để sử dụng toàn bộ chiều rộng của màn hình thay vì 600px được chỉ định trong HTML.!importantquy tắc được sử dụng để ghi đè mọi kiểu xung đột khác.display: block !important;:Mặc dù<table>các phần tử tự nhiên là các phần tử cấp khối, cài đặtdisplay: blockrõ ràng có thể trợ giúp trong một số ứng dụng email để đảm bảo phần tử hoạt động như mong đợi.padding: 10px !important;:Thêm phần đệm xung quanh nội dung trong.contentbảng, giảm kích thước này khỏi 40px ban đầu trong HTML để tận dụng tốt hơn không gian màn hình đã giảm trên các thiết bị nhỏ hơn.
.header, .body, .footer
padding: 20px !important;:Kiểu này đặt phần đệm một cách thống nhất cho tiêu đề, nội dung và chân trang các phần tới 20px ở mọi phía, tối ưu hóa khoảng cách cho màn hình nhỏ hơn. Nó ghi đè các cài đặt khoảng đệm khác nhau được xác định trong HTML, bao gồm các giá trị lớn hơn trong một số trường hợp.
Trong bối cảnh thiết kế email, việc sử dụng !important khá phổ biến để đảm bảo rằng các kiểu được áp dụng như dự kiến, ghi đè cả kiểu mặc định và các kiểu có khả năng xung đột khác có thể được chính ứng dụng email áp dụng.
Bước 5:Kiểm tra trên các ứng dụng email
Điều quan trọng là phải kiểm tra mẫu email của bạn trên các ứng dụng email khác nhau (như Gmail, Outlook và Apple Mail) và các thiết bị để đảm bảo tính tương thích và khả năng phản hồi. Các công cụ như Litmus hoặc Email on Acid có thể giúp giải quyết vấn đề này.
Bước 6:Thêm phông chữ Google
Việc kết hợp Google Fonts vào mẫu email HTML có thể cải thiện đáng kể sức hấp dẫn trực quan của nó.
Tuy nhiên, điều quan trọng cần lưu ý là không phải tất cả các ứng dụng email đều hỗ trợ phông chữ web. Một số, như Apple Mail, hỗ trợ Google Fonts, nhưng một số khác như Gmail thì không. Để đảm bảo email của bạn trông đẹp mắt đối với tất cả người nhận, hãy luôn cung cấp phông chữ dự phòng.
Đây là cách bạn có thể thêm Phông chữ Google vào mẫu email của mình, cùng với tùy chọn dự phòng cho những khách hàng không hỗ trợ phông chữ đó:
Chọn Phông chữ Google của bạn
Đầu tiên, hãy truy cập trang web Google Fonts và chọn một phông chữ. Đối với ví dụ này, hãy sử dụng "Poppins".
Thêm liên kết phông chữ vào tiêu đề email của bạn
Bao gồm liên kết tới Phông chữ Google trong <head> của tài liệu HTML của bạn. Vì điều này có thể không được hỗ trợ trong tất cả các ứng dụng email, hãy đảm bảo bạn có phông chữ dự phòng phù hợp trong kiểu của mình.
<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 phông chữ trong kiểu của bạn
Sử dụng CSS nội tuyến để áp dụng Phông chữ Google cho các thành phần HTML của bạn và luôn bao gồm phông chữ dự phòng chung. Trong các mẫu email, việc áp dụng các kiểu nội tuyến sẽ an toàn hơn do có sự hỗ trợ khác nhau cho <style> thẻ trên các ứng dụng email.
Đây là cách áp dụng phông chữ cho body email của bạn và bao gồm một dự phòng:
<body style="font-family: 'Poppins', Arial, sans-serif;">
<table width="100%" cellspacing="0" cellpadding="0">
<!-- Email content -->
</table>
</body>
Những gì chúng tôi đã tạo ra
Dưới đây là ảnh chụp màn hình của mẫu email chúng tôi đã thiết kế. Nó có bố cục chuyên nghiệp với tiêu đề chứa phần giữ chỗ logo, phần nội dung chính cho tin nhắn của bạn và chân trang tối màu với các liên kết quản lý liên hệ và đăng ký.
ảnh chụp màn hình của mẫu email
Mẹo bổ sung:
- Giữ CSS nội tuyến nhiều nhất có thể vì nhiều ứng dụng email không hỗ trợ
<style>thẻ. - Sử dụng phông chữ an toàn cho web để đảm bảo văn bản của bạn xuất hiện chính xác trong tất cả ứng dụng email.
- Luôn cung cấp phiên bản văn bản thuần túy của email cho những khách hàng không hỗ trợ HTML hoặc đã tắt HTML.
Tôi hy vọng hướng dẫn này cung cấp cho bạn khuôn khổ cơ bản để tạo mẫu email phản hồi. Khi bạn trở nên thoải mái hơn với thiết kế email, bạn có thể thử nghiệm các bố cục và kiểu phức tạp hơn.
Chúc bạn viết mã vui vẻ!
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu