Việc cắt html để gửi mail sẽ khác một chút khi để hiển thị trên website vì:
- Nội dung email có thể được đọc bằng ứng dụng trên máy tính: Outlook App, Thunderbird… nên cấu trúc thẻ
<div></div>(trên trình duyệt) sẽ không được hỗ trợ,
dẫn đến lỗi bố cục nội dung email - Một số thẻ HTML hỗ trợ trên app và trên website:
<table></table>, h1...h6, <p></p>, <span></span>,<a></a>, <img src="#" />... - Các link hình ảnh, liên kết font chữ phải là link tuyệt đối không được sử dụng link tương đối để tránh lỗi.
vd: Link tuyệt đối:https://huynhtanmao.com/images/hinh-anh.jpg
Link tương đối:"images/hinh-anh.jpg"=> Không được sử dụng trong email template - Không được sử dụng thẻ css background hình ảnh vì ứng dụng gmail trên máy tính sẽ không hiểu được, dẫn đến lỗi không hiển thị ảnh
- Phải đặt css ở trong thẻ
<head></head>và nên Inliner css sau khi tạo email template xong
Một số cấu trúc email template hay dùng
Cấu trúc HTML trong email template
- Kích thước email template thường sử dụng là: 600px hoặc tối đa là: 800px
- Email template đơn giản nhất thường có cấu trúc 2 bảng lồng nhau
- Font size của các nút hoặc liên kết ở di động khuyên dùng: 16 -18px,
- Chiều cao của nút hoặc các hình nút: 44 – 48px
- Sử dụng mã màu 3 chữ thay vì 6 chữ: Nên đặt mã màu là: #000 thay vì #000000
- Sử dụng các thuộc tính của bảng:
- <table>:
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<td>:<td align="top | center" valign="top | middle | bottom | baseline">
- <table>:
- Nên đặt css ở
Vd: Cấu trúc email template cơ bản gồm 3 phần: Email Header, Email Container, Email Footer
<!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></title>
<style></style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailHeader">
<tr>
<td align="center" valign="top">
This is where my header content goes.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailBody">
<tr>
<td align="center" valign="top">
This is where my body content goes.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailFooter">
<tr>
<td align="center" valign="top">
This is where my footer content goes.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Nguồn: https://templates.mailchimp.com/development/html/
Cấu trúc 2 cột (two column) và responsive trong email template
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
<tr>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="leftColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="leftColumnContent">
<h1>Left Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<h1>Right Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
</tr>
</table><style>
@media only screen and (max-width: 480px){
#templateColumns{
width:100% !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
}
.columnImage{
height:auto !important;
max-width:480px !important;
width:100% !important;
}
.leftColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent{
font-size:16px !important;
line-height:125% !important;
}
}
</style>CSS responsive
Một số element hay sử dụng: Button, link, social, button group…
Vd: HTML tạo Button trong email template
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#505050; border:1px solid #353535; border-radius:5px;">
<tr>
<td align="center" valign="middle" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;">
<a href="http://www.mailchimp.com/blog/" target="_blank" style="color:#FFFFFF; text-decoration:none;">Read More Stories On Our Blog</a>
</td>
</tr>
</table>Bỏ thuộc tính width="100%" sẽ được nút với chiều rộng mặc định
Xem thêm: https://templates.mailchimp.com/development/responsive-email/adaptive-buttons/
Vd: HTML tạo Link trong email template
Một số nền tảng ứng dụng mail phổ biến hiện nay
Sau khi hoàn thành file email template HTML bạn nên test trên những nền tảng ứng dụng mail phổ biết để kiểm tra nội dung mail bạn tạo có bị lỗi gì. Một số nền tảng ứng dụng email phổ biến đó là: Outlook App, Outlook.com, Outlook 365, Gmail trên trình duyệt và ứng dụng Gmail trên di động, Apple Mail trên máy tính (macOS) và thiết bị di động (iOS)
Nguồn tham khảo: https://templates.mailchimp.com/
