Cách tốt nhất để hiểu quá trình bất kỳ là tự mình thực hiện nó, từ đầu đến cuối. 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 template email HTML từ đầu.
Nguyên liệu
Để bắt đầu, cần lưu ý nơi mà tôi đã tải về một số nguồn.
- Các biểu tượng 2D đáng yêu bởiPierre Borodintrên Dribbble
- Kiểu chữ được sử dụng làOil Can,Source Sans ProvàMission Script
- Các biểu tượng mạng xã hội từMetrize Icons
Bây giờ, bạn sẽ cần phải bắt đầu tài liệu HTML email của bạn với một doctype XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Demystifying Email Design</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> </html>
Sau khi thực hiện xong điều đó, chúng ta có thể bắt đầu xây dựng phần còn lại của cấu trúc.
Tạo Body và Table chính
Trước tiên, chúng ta sẽ thêm một cấu trúc tổng thể cho email của chúng ta, bắt đầu với một thẻ<body>. Chúng ta sẽ thiết lập margin và padding trên thẻ body để tránh bất kỳ khoảng trắng không mong muốn.
Chúng ta cũng sẽ thêm một table có chiều rộng 100%. Điều này đóng vai trò như một thẻ body thật cho email của chúng ta, bởi vì phong cách của thẻ body không được hỗ trợ đầy đủ. Nếu bạn muốn thêm một màu nền cho ‘body’ của email, bạn sẽ cần phải áp dụng nó vào table lớn này để thay thế.
Thiết lập cellpadding và cellspacing thành 0 để tránh bất kỳ khoảng trắng không mong muốn trong table của bạn.
Lưu ý: Chúng ta sẽ đểborder="1"trên tất cả các table của chúng ta, do đó chúng ta có thể nhìn thấy bộ khung của layout của chúng ta khi chúng ta thực hiện tiếp. Chúng ta sẽ loại bỏ chúng ở phần cuối với một Find & Replace đơn giản.
<body style="margin: 0; padding: 0;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
Hello!
</td>
</tr>
</table>
</body>
Nếu một thuộc tính tồn tại trong HTML, sử dụng nó thay vì CSS
Bây giờ đặt một table được canh giữa rộng 600 pixelbên trong table container. 600 pixel là chiều rộng tối đa an toàn cho email của bạn để hiển thị một cách thoải mái trong hầu hết các máy tính để bàn và webmail trên hầu hết các độ phân giải màn hình.
Thiết lập chiều rộng này bằng cách sử dụng HTML thay vì CSS, sử dụng các thuộc tính width. Quy 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 nó thay vì CSS.
Chúng ta sẽ thay thế tiêu đề chúc mừng ‘Hello!’ bằng table này:
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> <tr> <td> Hello! </td> </tr> </table>
Chúng ta cũng đã thêm một thuộc tính phong cách trực tiếp thiết lậpborder-collapsethànhcollapse. Nếu chúng ta không làm điều này, các phiên bản mới hơn của Outlook sẽ thêm một khoảng trắng nhỏ giữa table của chúng ta và border.
Tạo ra cấu trúc và tiêu đề
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 ra một dòng cho mỗi phần.
Chúng ta nhân đôi một dòng mà chúng ta đã tạo để mà chúng ta có tất cả là ba cái. Tôi đã thay đổi văn bản bên trong chúng, do đó chúng ta có thể dễ dàng xác định mỗi dòng.
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> <tr> <td> Row 1 </td> </tr> <tr> <td> Row 2 </td> </tr> <tr> <td> Row 3 </td> </tr> </table>
Bây giờ chúng ta sẽ thêm màu sắc dựa theo thiết kế. Vìbgcolorlà một thuộc tính HTML hợp lệ, nên chúng ta sẽ sử dụng nó để thiết lập màu nền thay vì CSS. Hãy luôn nhớ sử dụng đầy đủ sáu ký tự của mã hex, vì ba ký tự viết tắt sẽ không phải lúc nào cũng làm việc.
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> <tr> <td bgcolor="#70bbd9"> Row 1 </td> </tr> <tr> <td bgcolor="#ffffff"> Row 2 </td> </tr> <tr> <td bgcolor="#ee4c50"> Row 3 </td> </tr> </table>
OK, tiếp theo chúng ta sẽ tập trung vào Row 1. Chúng ta cần điều chỉnh padding trên ô và sau đó chèn hình ảnh của chúng ta.
Sử dụng Padding
Khi sử dụng padding trong email, bạn phải luôn luôn xác định mỗi một giá trị (top, right, bottom và left) nếu không bạn có thể không thể đoán trước được kết quả. Tôi thấy rằng bạn vẫn có thể sử dụng cách viết tắt, tức làpadding: 10px 10px 8px 5px;nhưng nếu bạn đang gặp rắc rối bạn có thể viết nó ra dạng đầy đủ, tức làpadding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.
Nếu bạn đang gặp nhiều khó khăn hơn với padding (ví dụ, nếu nền tảng mà bạn gửi loại bỏ CSS của bạn), thì không sử dụng nó luôn. Chỉ cần sử dụng các ô trống để tạo ra khoảng trắng. Không cần phải sử dụng spacer GIFs, chỉ cần chắc chắn rằng bạn thêmstyle="line-height: 0; font-size: 0;"vào ô, đặt một bên trong và cho nó một chiều cao hoặc chiều rộng rõ ràng. Dưới đây là một ví dụ:
<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr>
Đồng thời lưu ý rằng bạn có thể an tâm sử dụng padding trên các thẻ TD mà không phải trên thẻ P hoặc DIV. Chúng hành xử thất thường hơn rất nhiều.
Vì vậy, chúng ta sẽ sử dụng một số CSS trực tiếp để thêm padding vào ô. Sau đó chúng ta sẽ chèn hình ảnh của chúng ta, thêm văn bản alt và thêmstyle="display: block;"đó là một cách khắc phục phổ biến ngăn chặn một số trình đọc email thêm khoảng trắng bên dưới hình ảnh của bạn. Chúng ta sẽ canh giữa hình ảnh bằng cách thêmalign="center"vào thẻ td của chúng ta. Chúng ta cũng sẽ thêm một thẻ alt, nó là quan trọng nhất khi email của chúng ta mới được nạp, trong hầu hết các trường hợp, là khi việc hiển thị hình ảnh bị tắt.
Lưu ý: Nếu nội dung của tiêu đề của bạn thực sự quan trọng đối với thông điệp của bạn, thì đừng sử dụng một tiêu đề chỉ có hình ảnh. Hãy nhớ rằng, hình ảnh mặc định bị chặn trên hầu hết các trình đọc email, do đó nếu có một khía cạnh của email của bạn là rất quan trọng, thì đừng bao giờ thêm nó như là một hình ảnh. Tuy nhiên, trong ví dụ này, tiêu đề của tôi là không quan trọng.
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> <img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> </td>
Trước hết, chúng ta sẽ thêm một số padding vào ô ở giữa do đó table bên trong có một số khoảng trắng xung quanh nó, như thiết kế của chúng ta.
Bây giờ chúng ta sẽ thêm một table với ba dòng cho nội dung chính của chúng ta — một cho headline, một cho văn bản giới thiệu, và một cho một dòng với hai cột. Chúng ta sẽ thiết lập chiều rộng của table này là 100% chứ không phải là sử dụng một giá trị pixel, vì điều này sẽ giúp chúng ta linh hoạt nếu chúng ta muốn làm cho email của chúng ta có tính đáp ứng. Nếu bạn luôn để chiều rộng ở dạng pixel trên tất cả mọi thứ, bạn có thể gặp vấn đề với rất nhiều giá trị phải thay thế với các Media Query. Nếu chiều rộng của table 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 các phần tử cha, tất cả mọi thứ sẽ điều chỉnh tương ứng.
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
Row 1
</td>
</tr>
<tr>
<td>
Row 2
</td>
</tr>
<tr>
<td>
Row 3
</td>
</tr>
</table>
</td>
Bây giờ, chúng ta sẽ thêm nội dung của chúng ta vào, và thêm một số padding cho ô ở giữa.
<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> Lorem ipsum dolor sit amet! </td> </tr> <tr> <td style="padding: 20px 0 30px 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> <tr> <td> Row 3 </td> </tr> </table>
Bây giờ chúng ta sẽ thêm hai cột nội dung vào Row 3. Bởi vì chúng ta muốn có một ‘margin’ giữa hai ô, nhưng margin không được hỗ trợ, nên chúng ta sẽ tạo ra một table ba cột với một ô trống giữa hai cột ngoài cùng.
Càng nhiều càng tốt, tôi chỉ muốn sử dụng tỷ lệ phần trăm, khi bạn có nội dung với một kích thước cụ thể, có thể khó khắn để chuyển nó thành một tỷ lệ phần trăm (trong ví dụ này, các cột sẽ là 48.1%, nó có thể làm cho bạn bối rối). Vì lý do này, vì hai hình ảnh của chúng ta là rộng 260px, nên chúng ta sẽ tạo các cột cũng rộng 260px, với một cellmargin 20px ở giữa. (Nó sẽ tổng cộng 540px, trong đó 600px chiều rộng của table của chúng ta trừ padding 30px hai bên.) Hãy chắc chắn thiết lập font-size và line-height thành 0 và thêm một ký tự khoảng trắng trong cellmargin.
Chúng ta cũng sẽ thiếtvalignthành"top"cho cả hai ô để chúng sẽ canh theo chiều dọc phía trên, ngay cả khi một cột có nhiều văn bản hơn các cột khác. Canh mặc định theo chiều dọc là"middle".
<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="260" valign="top"> Column 1 </td> <td style="font-size: 0; line-height: 0;" width="20"> </td> <td width="260" valign="top"> Column 2 </td> </tr> </table>
Bây giờ hãy thêm hình ảnh và nội dung của chúng ta vào các cột đó. Vì chúng ta cần nhiều dòng, chúng ta sẽ lồng một table khác bởi vì chúng ta không thể sử dụng bất kỳ thẻ colspan hoặc rowspan. Chúng ta cũng sẽ thêm một số padding vào giữa hình ảnh và sao chép vào 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 đã thiết lập chiều rộng của những hình ảnh bằng cách sử dụng HTML chiều rộng cột 100%. Điều này, một lần nữa, là nếu chúng ta làm cho email này có tính đáp ứng, chúng ta chỉ cần sử dụng Media Query để thay đổi chiều rộng của phần tử cha. Chúng ta sẽ phải thay thế chiều cao bằng pixel vì sử dụngstyle="height: auto"bây giờ không có tác dụng nữa (ho ho, Outlook). Vì vậy, chúng ta sẽ thiết lập nó bằng cách sử dụng pixel. Điều này có nghĩa là chúng ta sẽ phải thiết lậpheight: auto !importanttrên những hình ảnh đó bằng cách sử dụng Media Query để thay thế giá trị pixel, nhưng chúng ta có thể làm điều đó với một lớp. Vì chúng ta thiết lập chiều rộng là tỷ lệ phần trăm, nên chúng ta sẽ không cần phải thay thế nó. Càng ít thứ để thay thế, thì càng tốt.
Footer
Bây giờ, chúng ta sẽ thêm padding vào dòng footer của chúng ta.
<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> Row 3 </td>
Bên trong ô đó, chúng ta sẽ lồng vào một table để có được hai cột của chúng ta.
<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 table nhỏ khác cho các biểu tượng mạng xã hội của chúng ta. Chúng ta sẽ thiết lập ô cha thànhalign="right". Hãy chắc chắn rằng bạn thiết lậpborder="0"trên các liên kết hình ảnh này (để tránh liên kết có viền màu xanh) và đừng quêndisplay: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 của chúng ta và thêm chiều rộng vào các ô của chúng ta, chỉ để an tâm, mặc dù có rất nhiều khoảng trắng giữa chúng. Chúng ta sẽ thiết lập ô này thành 75% và cái còn lại 25%.
<td width="75%"> ® Someone, somewhere 2013<br/> Unsubscribe to this newsletter instantly </td>
Và chúng ta đã có nó! Layout của chúng ta đã hoàn tất.
Xác nhận
Hãy chạy nó thông quaW3C Validatorđể đảm bảo rằng không có gì tệ hoặc bị hỏng. Nếu bạn đã làm theo một cách chính xác, nó sẽ nói rằng nó đã vượt qua.
Tiếp theo chúng ta sẽ chạy một thử nghiệm thông qua Litmus để đảm bảo rằng cấu trúc của email hoạt động tốt. Dưới đây là một bản tóm tắt về thử nghiệm của tôi:
Định phong cách văn bản của chúng ta
Dòng đầu tiên của chúng ta là heading. Chúng ta sẽ sử dụng thẻ<b>để tạo ra văn bản in đậm, bởi vì, như chúng ta đã biết, nếu nó tồn tại trong HTML, chúng ta sử dụng nó 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 phong cách trực tiếp này vào tất cả các ô khác của văn bản:
style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;"
Tiếp theo chúng ta cần định phong cách văn bản footer, và chúng ta cũng sẽ làm gọn gàng liên kết Unsubscribe của chúng ta. Chúng ta sẽ định phong cách liên kết Unsubscribe của chúng ta sử dụng cả CSS và thẻ<font> của HTML. Điều này nhằm đảm bảo cách tốt nhất để các liên kết không bao giờ hiển thị 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ứ đã xong. Đây là lúc để tắt các border và xem nó đẹp như thế nào. Hãy tìm và thay thế mỗi sự xuất hiện củaborder="1"bằngborder="0".
Tại thời điểm này, nó trông như đang nổi trong không gian màu trắng, vì vậy hãy đi đến table 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ư là đang nổi nữa. Thêm một hoàn thiện cuối cùng, tôi sẽ thêm 30px padding vào dưới cùng của ô đầu tiên, để ngăn chặn email của chúng ta bị ngắt đột ngột ở dưới cùng trong một số trình đọc email trực tuyến (như Apple Mail), và 10px padding ở phía trên, để header màu xanh chúng ta có thêm một ít không gian.
<td style="padding: 20px 0 30px 0;">
Và chúng ta đã xong! Bạn đã sẵn sàng cho một bài kiểm tra cuối cùng.
Tổng kết!
Bây giờ là lúc tốt nhất để làm một bài kiểm tra cuối cùng, và sau đó, email HTML của bạn sẽ sẵn sàng để gửi!
Tham khảo template mail mjml.io/templates
Xem demo trên Codepen: https://codepen.io/tutsplus/pen/BaBQgGZ?editors=1010
Mẫu mail tương thích github.com/tutsplus/a-simple-responsive-html-email
Bài viết liên quan: