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">
  • 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

cau-truc-2-cot-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/

Bài viết liên quan

post-no-image

Add the Meta Box Upload Multiple Images and multiple metabox

post-no-image

Add the Meta Box Repeat

post-no-image

Kỹ thuật debounce trong javascript – Trì hoãn nhập từ khóa trong ô input

post-no-image

Thêm VS Code snippets

post-no-image

Query only seach by title

post-no-image

Hướng dẫn tạo form có validate, upload file nhiều bước và xử lý ajax