Cách tốt nhất để hiểu bất kỳ quá trình nào đó là tự thực hiện nó ngay từ ban đầu. Hôm nay, chúng ta sẽ làm điều đó với thiết kế email, bằng cách xây dựng một mẫu email HTML từ đầu.
“Bạn càng sớm ngừng làm việc với những điều kỳ quặc của email, bạn càng sớm có thể sử dụng chúng để làm lợi thế cho mình.” - Caity G. O'Connor
Lưu ý của biên tập viên: hướng dẫn này ban đầu được viết bởi Nicole cách đây vào tháng 6 năm 2013. Kể từ đó, nó trở thành tài liệu tham khảo cho các nhà lãnh đạo ngành trên toàn thế giới và đã được hàng triệu người mới bắt đầu sử dụng làm điểm khởi đầu cho cuộc phiêu lưu của họ với HTML trong email. Nó có liên quan ngày hôm nay như khi nó được xuất bản lần đầu tiên.
Mẫu email HTML phổ biến về các Yếu Tố Envato
Nếu bạn đang tìm kiếm một giải pháp chuyên nghiệp, sẵn sàng, hãy lấy một trong các mẫu email HTML phổ biến của chúng ta trên Envato Elements. chúng ta có hàng trăm tùy chọn đáp ứng tất cả được bao gồm trong tư cách thành viên Element của bạn, với các tính năng dễ dàng tùy chỉnh để giúp bạn bắt đầu.
Không phải những gì bạn đang tìm kiếm? Không có vấn đề, hướng dẫn này sẽ dạy bạn làm thế nào để xây dựng email của riêng bạn!
Những gì chúng ta chuẩn bị xây dựng
Đây sẽ là mẫu email HTML mà chúng ta sẽ xây dựng, hãy thoải mái sử dụng bút và tự mình sử dụng nó. Hãy nhớ rằng, khi chúng ta xem mẫu này thông qua trình duyệt web, chúng ta sẽ ít gặp sự cố hơn so với các ứng dụng email.
1. Bắt đầu Tài liệu Email HTML của bạn
Để bắt đầu, tôi sẽ đề cập tới một vài địa chỉ lấy tài nguyên.
- Các biểu tượng 2D đáng yêu là của Pierre Borodin trên Dribbble
- Các kiểu chữ được sử dụng là Oil Can, Source Sans Pro và Mission Script
- Các biểu tượng phương tiện truyền thông xã hội là từ các biểu tượng Metrize
Bây giờ, như chúng ta đã thảo luận trong hướng dẫn trước, bạn sẽ cần bắt đầu tài liệu email HTML của mình bằng một loại tài liệu XHTML:
1. <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Chuyển tiếp // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitable.dtd">
2. <html xmlns = "http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-Equiv = "Loại nội dung" content = "text / html; charset = UTF-8" />
5. <title> Làm sáng tỏ thiết kế email </ title>
6. <meta name = "viewport" content = "width = device-width, init-scale = 1.0" />
7. <head>
8. </ html>
Với sự sắp xếp này, chúng ta có thể bắt đầu xây dựng phần còn lại của cấu trúc.
2. Tạo phần thân và bảng chính
Đầu tiên, chúng ta sẽ thêm một cấu trúc tổng thể cho email, bắt đầu bằng thẻ <body>. chúng ta sẽ đặt lề và phần đệm trên thẻ body bằng 0 để tránh mọi khoảng trống không mong muốn.
chúng ta cũng sẽ thêm một bảng với chiều rộng 100%. Điều này hoạt động như một thẻ cơ thể thực sự cho email của chúng ta, bởi vì kiểu dáng của thẻ cơ thể được hỗ trợ đầy đủ. Nếu bạn muốn thêm màu nền vào ‘phần thân’ của email, bạn cần phải áp dụng nó cho bảng lớn này.
Đặt di động và khoảng cách ô của bạn thành 0 để tránh mọi khoảng trống không mong muốn trong bảng.
Lưu ý: chúng ta sẽ để border="1" trên tất cả các bảng của chúng ta để chúng ta có thể thấy bộ xương của bố cục khi chúng ta đi. chúng ta sẽ loại bỏ chúng ở cuối bằng một Tìm kiếm & Thay thế đơn giản.
1. <body style="margin: 0; padding: 0;">
2. <table border="1" cellpadding="0" cellspaces="0" width="100%">
3. <tr>
4. <td>
5. Hello!
6. <td>
7. <tr>
8. </table>
9. </body>
“Nếu một thuộc tính tồn tại trong HTML, hãy sử dụng nó thay vì CSS.”
Bây giờ đặt một bảng trung tâm rộng 600 pixel bên trong bảng container. 600 pixel là chiều rộng tối đa an toàn để email của bạn hiển thị thoải mái trong hầu hết các máy khách trên máy tính để bàn và webmail trên hầu hết các độ phân giải màn hình.
Đặt độ rộng này bằng HTML thay vì CSS, bằng cách sử dụng thuộc tính width. Nguyên tắc vàng trong phát triển email HTML là: nếu một thuộc tính tồn tại trong HTML, hãy sử dụng thay vì CSS.
Chúng ta sẽ thay thế lời ‘Xin chào!’ nhỏ của chúng ta bằng bảng này:
1. <table align="centre" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
2. <tr>
3. <td>
4. Hello!
5. </td>
6. </tr>
7. </table>
Chúng ta cũng đã thêm một thuộc tính kiểu nội tuyến, đặt thuộc tính border-collapse thành collapse. Nếu chúng ta không làm điều này, các phiên bản Outlook mới hơn sẽ thêm một khoảng trống nhỏ giữa bảng và đường viền của chúng ta.
3. Tạo cấu trúc và tiêu đề email HTML
Trong thiết kế của chúng ta, chúng ta có thể thấy rằng email được chia thành ba phần hợp lý, vì vậy chúng ta sẽ tạo một hàng cho mỗi phần.
Hãy để lại nhân đôi hàng duy nhất mà chúng ta đã thực hiện để chúng ta có tổng cộng ba hàng. Tôi đã thay đổi văn bản bên trong chúng để chúng ta có thể dễ dàng xác định từng hàng.
01. <table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
02. <tr>
03. <td>
04. Row 1
05. </td>
06. </tr>
07. <tr>
08. <td>
09. Row 2
10. </td>
11. </tr>
12. <tr>
13. <td>
14. Row 3
15. </td>
16. </tr>
17. </table>
Bây giờ chúng ta sẽ tô màu chúng theo thiết kế. Vì bgcolor là một thuộc tính HTML hợp lệ, chúng ta sẽ sử dụng màu đó để đặt màu nền thay vì CSS. Luôn nhớ sử dụng đầy đủ sáu ký tự của mã hex, vì ba ký tự viết tắt của tốc ký không phải lúc nào cũng hoạt động.
01. <table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
02. <tr>
03. <td bgcolor="#70bbd9">
04. Row 1
05. </td>
06. </tr>
07. <tr>
08. <td bgcolor="#ffffff">
09. Row 2
10. </td>
11. </tr>
12. <tr>
13. <td bgcolor="#ee4c50">
14. Row 3
15. </td>
16. </tr>
17. </table>
Ok, tiếp theo chúng ta sẽ tập trung vào Hàng 1. chúng ta muốn điều chỉnh phần đệm trên ô và sau đó chèn Ảnh minh họa của chúng ta.
Sử dụng đệm
Khi sử dụng phần đệm trong email, bạn phải luôn chỉ định mọi giá trị duy nhất (trên cùng, bên phải, dưới cùng và bên trái) nếu không bạn có thể nhận được kết quả không thể đoán trước. Tôi thấy rằng bạn vẫn có thể sử dụng tốc ký, ví dụ: thuộc tính padding: 10px 10px 8px 5px, nhưng nếu bạn gặp khó khăn, bạn có thể muốn viết nó ra, ví dụ; thuộc tính padding trên: 10px; thuộc tính padding phải: 10px; thuộc tính padding dưới: 8px; thuộc tính padding trái: 5px;.
Nếu bạn đang gặp rắc rối lớn hơn với phần đệm (ví dụ: nếu nền tảng gửi của bạn đang loại bỏ CSS của bạn), thì donith hoàn toàn sử dụng nó. Đơn giản chỉ cần sử dụng các ô trống để tạo không gian. Không cần sử dụng spacer GIF, chỉ cần đảm bảo bạn thêm style="line-height: 0; font-size: 0;" vào ô, đặt một vào bên trong và cung cấp cho nó một chiều cao hoặc chiều rộng rõ ràng. Đây là một ví dụ:
1. <tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr>
Cũng lưu ý rằng nó rất an toàn khi sử dụng phần đệm trên thẻ TD nhưng không phải trên thẻ P hoặc DIV. Chúng khó lường hơn rất nhiều.
Vì vậy, chúng ta sẽ sử dụng một số CSS nội tuyến để thêm phần đệm vào ô. Sau đó, chúng ta sẽ chèn Ảnh minh họa của chúng ta, thêm văn bản thay thế và thêm style="display:block;" đó là một sửa chữa phổ biến ngăn chặn một số khách hàng email thêm khoảng trống bên dưới Ảnh minh họa của bạn. chúng ta trung tâm Ảnh minh họa bằng cách thêm align="center" để thẻ td của chúng ta. chúng ta cũng sẽ thêm một thẻ alt, điều này rất quan trọng khi email của chúng ta được tải lần đầu, trong hầu hết các trường hợp, sẽ bị tắt ảnh.
Lưu ý: Nếu nội dung của tiêu đề của bạn thực sự quan trọng đối với tin nhắn của bạn, thì đừng sử dụng tiêu đề chỉ có ảnh. Hãy nhớ rằng, ảnh bị chặn theo mặc định cho hầu hết các khách hàng, vì vậy nếu có một khía cạnh của email của bạn là rất quan trọng, không bao giờ bao gồm nó như một Ảnh minh họa. Trong ví dụ này, tuy nhiên, tiêu đề của tôi là khá thừa.
1. <td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
2. <img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
3. </td>
4. Tạo khu vực nội dung
Trước hết, chúng ta sẽ thêm một số phần đệm vào ô giữa để bảng bên trong có một số khoảng trống xung quanh nó, theo thiết kế của chúng ta.
Bây giờ, chúng ta sẽ thêm một bảng có ba hàng cho nội dung chính, một cho tiêu đề, một cho văn bản giới thiệu và một cho hàng có hai cột. Chúng ta sẽ đặt chiều rộng của bảng này thành 100% thay vì sử dụng giá trị pixel, bởi vì điều này sẽ giúp chúng ta tiếp tục theo dõi nếu chúng ta muốn làm cho email của mình phản hồi. Nếu bạn luôn có độ rộng pixel trên mọi thứ, bạn có thể kết thúc với rất nhiều giá trị để ghi đè bằng truy vấn phương tiện. Nếu độ rộng bảng lồng nhau của bạn dựa trên tỷ lệ phần trăm, thì khi bạn điều chỉnh độ rộng của phần tử gốc, mọi thứ khác sẽ tự tinh chỉnh sao cho phù hợp nhất.
01. <td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
02. <table border="1" cellpadding="0" cellspacing="0" width="100%">
03. <tr>
04. <td>
05. Row 1
06. </td>
07. </tr>
08. <tr>
09. <td>
10. Row 2
11. </td>
12. </tr>
13. <tr>
14. <td>
15. Row 3
16. </td>
17. </tr>
18. </table>
19. </td>
Bây giờ chúng ta sẽ thêm vào nội dung, và thêm một số phần đệm vào ô giữa.
01. <table border="1" cellpadding="0" cellspacing="0" width="100%">
02. <tr>
03. <td>
04. Lorem ipsum dolor sit amet!
05. </td>
06. </tr>
07. <tr>
08. <td style="padding: 20px 0 30px 0;">
09. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
10. </td>
11. </tr>
12. <tr>
13. <td>
14. Row 3
15. </td>
16. </tr>
17. </table>
Bây giờ chúng ta sẽ thêm hai cột nội dung của mình vào Hàng 3. Vì chúng ta muốn có một 'lề' ở giữa hai ô này, nhưng lề không được hỗ trợ, chúng ta sẽ tạo một bảng ba cột với một ô trống ở giữa hai cột ngoài.
Nhiều như tôi muốn bám vào tỷ lệ phần trăm, khi bạn có nội dung có kích thước cụ thể, việc chuyển đổi nó thành tỷ lệ phần trăm là rất khó (trong ví dụ này, các cột sẽ là 48,1% có thể gây nhầm lẫn). Vì lý do này, vì hai Ảnh minh họa của chúng ta rộng 260px, chúng ta sẽ tạo các cột cũng rộng 260px, với một ô lề 20px ở giữa. (Điều này sẽ có tổng chiều rộng 540px, là chiều rộng 600px của bảng của chúng ta trừ đi phần đệm 30px ở hai bên.) Đảm bảo không có kích thước phông chữ và chiều cao dòng của bạn và thêm ký tự không gian không phá vỡ trong ô lề.
Chúng ta cũng sẽ đặt giá trị valign thành top cho cả hai ô để chúng sẽ thẳng hàng với đỉnh, ngay cả khi một cột có nhiều văn bản hơn các cột khác. Căn dọc mặc định là middle.
01. <table border="1" cellpadding="0" cellspacing="0" width="100%">
02. <tr>
03. <td width="260" valign="top">
04. Column 1
05. </td>
06. <td style="font-size: 0; line-height: 0;" width="20">
07.
08. </td>
09. <td width="260" valign="top">
10. Column 2
11. </td>
12. </tr>
13. </table>
Bây giờ, hãy thêm ảnh và nội dung của chúng ta vào các cột đó. Khi chúng ta cần nhiều hàng, chúng ta sẽ lồng một bảng khác, bởi vì chúng ta không thể sử dụng bất kỳ thẻ colspan hoặc rowspan nào. chúng ta cũng sẽ thêm một số phần đệm ở giữa ảnh và sao chép trong mỗi cột.
- <table border="1" cellpadding="0" cellspacing="0" width="100%">
- <tr>
- <td width="260" valign="top">
- <table border="1" cellpadding="0" cellspacing="0" width="100%">
- <tr>
- <td>
- <img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" />
- </td>
- </tr>
- <tr>
- <td style="padding: 25px 0 0 0;">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
- </td>
- </tr>
- </table>
- </td>
- <td style="font-size: 0; line-height: 0;" width="20">
-
- </td>
- <td width="260" valign="top">
- <table border="1" cellpadding="0" cellspacing="0" width="100%">
- <tr>
- <td>
- <img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" />
- </td>
- </tr>
- <tr>
- <td style="padding: 25px 0 0 0;">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
Ở đây, chúng ta đã đặt chiều rộng của ảnh bằng HTML ở mức 100% chiều rộng cột. Điều này, một lần nữa, là để nếu chúng ta làm cho email này phản hồi, chúng ta chỉ phải sử dụng các truy vấn phương tiện để thay đổi độ rộng của phần tử cha. chúng ta sẽ phải ghi đè chiều cao bằng pixel vì sử dụng style="height: auto" giờ đây đã giành được công việc của Google trong mọi thứ (ho, Outlook). Vì vậy, chúng ta sẽ thiết lập nó bằng pixel. Điều này có nghĩa là chúng ta phải đặt height: auto!important đối với những Ảnh minh họa đó bằng các truy vấn phương tiện để ghi đè giá trị pixel, nhưng chúng ta có thể làm điều đó với một lớp duy nhất. Khi chúng ta đặt chiều rộng theo tỷ lệ phần trăm, chúng ta đã giành chiến thắng cần ghi đè lên đó. Càng ít thứ để ghi đè, thì càng tốt.
5. Phong cách của chân trang email
Bây giờ chúng ta sẽ thêm phần đệm của chúng ta vào hàng chân trang.
- <td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;">
- Row 3
- </td>
Trong ô đó, chúng ta sẽ lồng một bảng khác để lấy hai cột.
- <table border="1" cellpadding="0" cellspacing="0" width="100%">
- <tr>
- <td>
- Column 1
- </td>
- <td>
- Column 2
- </td>
- </tr>
- </table>
Chúng ta sẽ tạo một bảng nhỏ khác cho các biểu tượng truyền thông xã hội của mình. chúng ta sẽ đặt ô cha của nó thành align="right". Hãy chắc chắn rằng bạn đặt border="0" trên các liên kết ảnh này (để tránh đường viền liên kết màu xanh) và đừng quên display:block.
- <td align="right">
- <table border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td>
- <a href="http://www.twitter.com/">
- <img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />
- </a>
- </td>
- <td style="font-size: 0; line-height: 0;" width="20"> </td>
- <td>
- <a href="http://www.twitter.com/">
- <img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
- </a>
- </td>
- </tr>
- </table>
- </td>
Bây giờ chúng ta sẽ thêm văn bản và thêm chiều rộng cho các ô của chúng ta, để an toàn, mặc dù có rất nhiều khoảng trắng giữa chúng. Chúng ta sẽ đặt ô này thành 75% và ô còn lại là 25%.
- <td width="75%">
- ® Someone, somewhere 2013<br/>
- Unsubscribe to this newsletter instantly
- </td>
Và đây rồi! Khung email của chúng ta đã hoàn thiện.
6. Chạy Kiểm tra xác thực email HTML
Như chúng ta đã đề cập nhiều lần, HTML trong email là một mỏ. Hãy chạy thử thông qua Trình xác thực W3C để đảm bảo không có gì tồi tệ hoặc bị hỏng. Nếu bạn làm mọi thứ chuẩn xác, trình xác thực sẽ báo thành công.
Tiếp theo, chúng ta sẽ chạy thử nghiệm qua Litmus để đảm bảo cấu trúc email của chúng ta hoạt động tốt. Đây là một bản tóm tắt về bài kiểm tra của tôi:
7. Phong cách hóa văn bản
Hàng đầu tiên của chúng ta là tiêu đề. chúng ta sẽ sử dụng thẻ <b> để tạo văn bản in đậm vì như chúng ta đã biết, nếu nó tồn tại trong HTML, chúng ta sử dụng thẻ đó thay vì CSS.
- <td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;">
- <b>Lorem ipsum dolor sit amet!</b>
- </td>
Chúng ta cũng sẽ thêm kiểu nội tuyến này cho tất cả các ô văn bản khác:
- style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;"
Tiếp theo, chúng ta cần định kiểu văn bản chân trang và chúng ta cũng sẽ dọn dẹp liên kết hủy đăng ký của chúng ta. chúng ta phong cách liên kết văn bản hủy đăng ký của chúng ta bằng cách sử dụng cả CSS và thẻ <font> HTML. Nhân đôi này là cách tốt nhất để đảm bảo rằng các liên kết của bạn không bao giờ hiển thị trong màu xanh mặc định.
- <td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;">
- ® Someone, somewhere 2013<br/>
- <a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly
- </td>
Và chúng ta đã có nó! Tất cả mọi thứ đã ổn. Đã đến lúc tắt các đường viền và nhìn vẻ đẹp của nó rồi. Hãy lướt qua và thay thế mọi lần xuất hiện của border="1" bằng border="0".
Tại thời điểm này, nhìn nó trông có vẻ hơi đơn điệu trong không gian trắng, vì vậy hãy để lên tới bảng rộng 600px đầu tiên của chúng ta và thêm:
- style="border: 1px solid #cccccc;"
Bây giờ nó không giống như nó nổi nữa. Như một điểm cuối cùng, tôi sẽ thêm 30px của phần đệm vào phần dưới của ô đầu tiên, để ngăn email của chúng ta dừng đột ngột ở phần dưới trong một số ứng dụng webmail (như Apple Mail) và phần đệm 10px ở trên cùng, để tiêu đề màu xanh của chúng ta có một chút không gian trống.
- <td style="padding: 20px 0 30px 0;">
Và đây! Bạn có thể chạy thử nó lần cuối rồi.
Đó là tất cả!
Trước khi dừng lại, nếu bạn đã sử dụng bất kỳ nhận xét nào trong đánh dấu của mình, hãy loại bỏ chúng. Một số ứng dụng email có thể bị kẹt lại do các bình luận, nên khôn ngoan nhất là không để bất kỳ mã không cần thiết nào ở bất kỳ đâu trong tệp của bạn.
Bây giờ là thời điểm tốt để thực hiện lần chạy thử cuối cùng, và sau đó, email HTML của bạn sẽ sẵn sàng để gửi đi!