Để đảm bảo chiến dịch Email Marketing của bạn thành công bạn nên sử dụng mẫu email có thể hiển thị tốt trên bất kỳ kích thước màn hình. Bài viết này hướng dẫn bạn tự làm một Email Template hiển thị tốt trên các thiết bị.

Tự làm Responsive Email Template

Email từ lâu đã là một công cụ Marketing hiệu quả. Để làm một Email Template, bạn chỉ được dùng thẻ HTML và Inline Styles CSS.

Hãy xem một ví dụ:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>Init HTML</title>
</head>
<body style="margin: 0; padding: 0;">
    <div style="background: #fafbfc; margin: 0px; min-height: 300px; padding: 0px 30px 15px; font-family: 'Open+Sans', 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5;">
        <div style="max-width: 600px; margin: 0 auto;">
            <div style="text-align: center; padding-bottom: 20px; padding-top: 30px;">
                <span style="font-weight: 700; font-size: 32px; color: #b7bdc1;">Init HTML</span>
            </div>
            <div style="border-top: 3px solid #02b3e4; color: #525c65; padding: 40px; background: #fff;">
                <p style="margin: 20px 0;">Chào bạn,</p>
                <p style="margin: 20px 0;">Nếu bạn đang có ý định tự học lập trình Web, hãy tham khảo trang của chúng tôi, hoàn toàn miễn phí.</p>
                <p style="margin: 20px 0;">Init HTML là viết tắt của từ <strong>Initialize</strong> và <strong>HTML</strong>, nghĩa là Khởi tạo một dự án web từ bước đầu tiên: HTML. Trang có các Series chia sẻ kiến thức về thiết kế, lập trình Web, quản trị Server, tối ưu hóa, kiếm tiền từ website của bạn...</p>
                <p style="margin: 30px 0;"><a style="display: block; padding: 10px; background: #02b3e4; max-width: 350px; text-align: center; color: #fff; text-decoration: none; margin: 0 auto; font-weight: 700; font-size: 16px;" href="https://www.inithtml.com/series/?utm_source=google&utm_medium=email&utm_campaign=html">Xem các Series</a></p>
                <p style="margin: 20px 0;">Nếu bạn là người mới làm quen với lập trình Web, hãy bắt đầu <a style="color: #02b3e4;" href="https://www.inithtml.com/khoa-hoc/lap-trinh-web/?utm_source=google&utm_medium=email&utm_campaign=html">tại đây</a>.</p>
            </div>
            <div style="text-align: center;"><img style="max-width: 90%;" src="https://www.inithtml.com/demo/email/shadow.png" alt="Shadow"></div>
            <div style="text-align: center; margin-top: 45px; margin-bottom: 45px;">
                <div style="margin-bottom: 30px;">
                    <a href="https://www.facebook.com/inithtml/" style="margin-right: 20px;"><img alt="Facebook" src="https://s3-us-west-2.amazonaws.com/udacity-email/Footer/facebook.jpg" width="26" height="26"></a>
                    <a href="https://plus.google.com/116576918239455337021" style="margin-right: 20px;"><img alt="Google Plus" src="https://s3-us-west-2.amazonaws.com/udacity-email/Footer/google.jpg" width="26" height="26"></a>
                </div>
                <p style="font-size: 12px; color: #b7bdc1; margin-bottom: 15px;">Init HTML – Khởi đầu dự án Web</p>
                <p style="font-size: 12px;"><a href="*|UNSUB|*" style="color: #b7bdc1; text-decoration: underline;">Hủy đăng ký</a></p>
            </div>
        </div>
    </div>
    <div style="text-align: center; background: rgb(125, 151, 173); padding: 10px 0; color: #fff; font-family: 'Open+Sans', 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px;">Cảm ơn bạn!</div>
</body>
</html>

Xem demo Tải về

Chúng ta không sử dụng table mà dùng div, và các mã CSS căn bản. Ta được:

Responsive Email - Init HTML

Xem một ví dụ khác.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Style 1</title>
</head>
<body style="margin: 0; padding: 30px;">
    <div style="max-width: 600px; min-width: 250px; margin: 0 auto; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5;">
        <div style="text-align: right; margin-bottom: 5px;">
            <p style="margin: 0; color: #999; font-size: 14px; font-weight: 700;">MARCH 9 - ISSUE #6</p>
        </div>
        <div style="text-align: center; margin-bottom: 30px;">
            <img style="max-width: 100%; height: auto;" src="https://s3.amazonaws.com/revue/profile_covers/images/000/000/697/cover/SW-logo-revue-1.png" alt="Email Image 1">
        </div>
        <div style="margin-bottom: 30px;">
            <img width="112" height="112" style="padding-left: 15px; float: right;" src="https://s3.amazonaws.com/revue/items/images/001/801/837/thumb/1*oS38c-T_JXoJYsA1dW5H6g.jpeg" alt="Email Image 2">
            <p style="margin: 0; margin-bottom: 5px;"><a style="font-size: 20px; line-height: 1.1; font-weight: 700; color: #1ddfc9; text-decoration: none;" href="#">In 2016, I sold my startup for seven figures ,  and it ruined me.</a></p>
            <p style="font-size: 12px; margin: 0; margin-bottom: 5px; color: #999;">MEDIUM.COM – <a style="color: #1ddfc9; text-decoration: none;" href="#">Share</a></p>
            <p style="margin: 0;">In 2016, Kenan Hopkins sold his startup for seven figures. In this post he shares the brutally honest truth that no one talks about when running and selling a business.</p>
            <div style="clear: both;"></div>
        </div>
        <div style="margin-bottom: 30px; font-size: 18px;">
            <p style="margin: 0;">Hope your week’s going great! Have you read, written, watched or listened to something that should be shared with our audience? 👀 Send us a <a style="color: #1ddfc9; text-decoration: underline;" href="#">tip</a>!</p>
            <p style="margin: 0;">Best from Amsterdam!</p>
        </div>
        <hr style="margin-bottom: 30px; background: #ccc; height: 1px; border: none;">
        <div style="margin-bottom: 30px; text-align: center; color: #999;">
            <p style="margin: 0; margin-bottom: 15px;">Do you enjoy receiving this? Please share it:</p>
            <p style="margin: 0; margin-bottom: 30px;">
                <a style="background:#fff; border: 1px solid #dddddd; border-radius: 100px; color: #999; display: inline-block; line-height: 40px; text-align: center; text-decoration: none; width: 110px; margin-right: 3px;" href="#"><img width="16" height="14" src="https://www.getrevue.co/assets/email/share_twitter-7b99c12e526815cd1f89a07830583c69bc3bc1f4b0d7a7710f51eb04f8446cc5.png" alt="Twitter">  Tweet</a>
                <a style="background:#fff; border: 1px solid #dddddd; border-radius: 100px; color: #999; display: inline-block; line-height: 40px; text-align: center; text-decoration: none; width: 110px; margin-left: 3px;" href="#"><img width="16" height="14" src="https://www.getrevue.co/assets/email/share_facebook-b1b4c4208ade0b273c874c4e7934be16cc0d86a81aa46b447d328606a00c64ce.png" alt="Facebook">  Share</a>
            </p>
            <p style="margin: 0;">
                Carefully curated by StartupWatching ⚡️ with Revue.
                <br>
                If you were forwarded this newsletter and you like it, you can subscribe <a style="color: #1ddfc9; text-decoration: underline;" href="#">here</a>.
                <br>
                If you don't want these updates anymore, please unsubscribe <a style="color: #1ddfc9; text-decoration: underline;" href="#">here</a>.
            </p>
        </div>
    </div>
</body>
</html>

Xem demo Tải về

Ta được:

Responsive Email Template - 2

Bây giờ bạn có thể tùy chỉnh lại Email Template này và sử dụng MailChimp hoặc SendinBlue để gửi chiến dịch của mình rồi. Chúc các bạn thành công!

Series: Email Marketing