Tổng đài hỗ trợ: (028) 7303 6066
Liên hệ
Giới thiệu
Rất nhiều người quan tâm tới khái niệm HTML Email Template là gì? Cách tạo chúng ta sao cũng như các mẫu email đẹp hiện nay các doanh nghiệp hay sử dụng? Trong bài viết bên dưới, cityit.vn sẽ hướng dẫn bạn cách tạo ra email HTML có tính đáp ứng cao, đơn giản khi sử dụng và hoạt động trong mọi ứng dụng của email thật tốt.
Trước hết bạn cần phải hiểu về ngôn ngữ Html được dùng cực kỳ phổ biến trong việc lập trình web. Html là viết tắt của HyperText Markup Language – ngôn ngữ định dạng siêu văn bản. Từ trước tới nay ngôn ngữ này được dùng cho việc xây dựng nên cấu trúc của website.
Trước kia thì người ta vẫn dùng ngôn ngữ này để cho thêm hình ảnh, video vào trong bất cứ vị trí nào của website hoặc thêm vào nội dung bài viết. Ngày nay khi công nghệ phát triển hơn thì nhiều nhà lập trình đã sử dụng Html vào việc tạo nên email và mới có khái niệm về email Html như mọi người được biết.
Email Html được xây dựng với cấu trúc đa dạng. Bạn hoàn toàn có thêm các tính năng và chỉnh sửa mới linh hoạt hơn như thêm ảnh, chia các cột, thêm link, bảng vào email hay chèm ảnh vào chữ ký gmail của mình, điều mà trước kia khó để thực hiện. Linh hoạt trong việc đổi font chữ của email. Vì thế email của bạn sẽ đẹp mắt, ấn tượng và phong phú hơn nhiều chẳng khác nào nội dung của website.
Việc sử dụng Email Template Html có nhiều lợi ích hơn mọi người vẫn thường nghĩ. Chính vì thế mà ngày càng có nhiều cá nhân, doanh nghiệp muốn xây dựng hình ảnh, mở rộng tìm kiếm khách hàng, đối tác đã lựa chọn dạng email này trong công việc. Các lợi ích nổi bật có thể kể tới:
Hiện nay email Html rất được ưa chuộng trong việc thiết lập email sử dụng với mục đích bán hàng, kinh doanh online hay làm các email mẫu cho các chuyến dịch marketing. Các lập trình viên hiểu rõ về công cụ này sẽ tư vấn và hỗ trợ nhiều được cho các doanh nghiệp tối ưu nội dung cho người dùng, tăng tỷ lệ chuyển đổi cao.
Việc tạo email Html đơn giản có tính đáp ứng cần yêu cầu có kiến thức về lập trình và hiểu các bước thực hiện đầy đủ, chuẩn xác mới có được hiệu quả như mong muốn. Sau đây cityit.vn sẽ nêu rõ các bước để những ai quan tâm áp dụng:
Về cách thiết kế email html đơn giản thủ công thì không phải ai cũng biết. Cách thức này mất thời gian hơn và yêu cầu có am hiểu về kỹ thuật. HTML email có 2 phần như sau:
Phần đầu của email marketing được viết bằng ngôn ngữ Html sẽ có dạng code như trong hình. Tác dụng để thông báo với công cụ dự hình tag Html nào sẽ hiển thị và tuân theo nguyên tắc hoạt động nào.
<!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″/>
<style>
</style>
</head>
</html>
Lưu ý một số trình duyệt email thông dụng như Gmail, yahoo, Outlook.com thì bạn không cần để ý tới code này vì sẽ có code riêng của nó nhưng bạn vẫn nên chèn mã này vào trong email code. Các chuyên gia thường hay lựa chọn XHTML 1.0.
<meta http-equiv=”Content-Type” /> Thông báo việc xử lý nội dung, các ký tự đặc biệt sử dụng trong html. Text/html sẽ báo cáo với công cụ dựng hình xác định chuỗi text là html.
<meta name=”viewport” /> Phần hướng dẫn thiết bị cách thức xuất hiện email tương ứng với chiều rộng màn hình tạo độ rõ nét
Title của email xác định nằm ở giữa 2 tag <title>. Khi subscriber ấn vào “view online”, lập tức sẽ có title sẽ có trên tab trình duyệt.
Việc tạo styling sẽ tạo nên diện mạo của email khác biệt và bắt mắt hơn. Việc lựa chọn styling cho email sẽ có định dạng font chữ, kích thước ảnh, media query thiết kế nằm giữa các thẻ <style>. Điều này của hệ thống để phân biệt các class khác nhau.
Xác định loại định dạng cơ bản thêm tag <style> là <style type=”text/css”>. “text/css” ở đây dùng để báo cáo loại media là CSS. Vị trí đặt thẻ <style> sẽ yêu cầu người thiết lập dùng kỹ thuật cơ bản vì 6/36 trình duyệt email hiện tại không hỗ trợ thẻ <style> trong <head> và Gmail không có hỗ trợ ở nội dung chủ đạo của mail.
Định dạng text
Nếu bạn muốn thêm điều kiện định dạng cho text thì nên khai báo thuộc tính chi tiết trong một class. Chẳng hạn bạn cần tắt định dạng của text trong hyperlink, thì sẽ thêm code. <a href=”https://www.yourdomain.com”> text here</a>.
Media Queries
Khi bạn thực hiện việc viết code cho phần responsive Email Template. Lúc này media queries yêu cầu bạn cần phải thêm vào phần định dạng chi tiết như sau:
@media only screen and (min – width: px) and (max – width: px)
{
.( class_name )
{
(attributes to be implemented)
}
}
Ví dụ nhìn vào media query sau:
Responsive cho mẫu email của bạn
Lúc email xuất hiện trên màn hình của thiết bị điện tử với kích thước 481 và 699px:
Note: !important buộc công cụ dựng hình sử dụng lựa chọn chuẩn media query đó. Với bố cục trên điện thoại di động thì các media queries lẻ sẽ hiển thị trên màn hình với độ rộng >480px.
Khả năng tương tác tại html email
Bạn có thể chèn code CSS trước khi đóng <head> giúp HTML Email Templates ấn tượng. Thành phần tương tác khó viết code nên bạn cần phải có kiến thức về lập trình và thử lại nhiều lần cho an toàn trước khi render trên trình duyệt email html template của mình.
Code <head> cuối cùng khi bạn thực hiện sẽ xuất hiện với thông tin chi tiết y như trong bảng.
Phần code này khá là phức tạp và dành cho các lập trình viên chuyên nghiệp nghiên cứu, đưa ra.
Theo khảo sát hầu hết người tiêu dùng lựa chọn thiết bị điện tử với màn hình ít nhất 800px lướt web. Cho nên khi tạo email thì bạn cần độ rộng ít nhất 700px cho rõ ràng bố cục, nội dung và nên chọn màu sắc nổi bật để không tạo sự nhàm chán. Thiết lập thông tin như sau:
<body class=”em_body” style=”margin:0px; padding:0px;” bgcolor=”#efefef”>
Tiếp sau đó bạn sẽ cần thêm bảng, canh giữa, căn lề chuẩn xác 700px.
<table align=”center” width=”700″ border=”0″ cellspacing=”0″ cellpadding=”0″ class=”em_main_table” style=”width:700px;”>
Cho thêm nội dung vào pre-header và “view online” tới dòng lồng trong bảng.
Phần code sẽ có nội dung như bên dưới:
<tr>
<td style = “padding:15px; “class = “em_padd” valign = ” top ” bgcolor = ” # efefef ” align = “center”> <table width=”100%”
<tbody ><tr>
< td style = “font – family: “Open Sans” , Arial , sans – serif; font – size : 12px; line – height: 15px; color: #0d1121
<tr>
</tbody> </table> </td>
<tr>
Phần hiển thị sẽ trông như sau:
Tiếp theo bạn cần phải thêm banner hình.
Phần code hiển thị cụ thể:
<tr>
<td valign= “top” align=”center”> <table width=”100%” cellspacing =”0″ cellpadding=”0″ border= “0” align=”center
<tbody> <tr>
<td valign = ” top ” align = ” center ” > < img class = ” em_img ” alt = ” Welcome to EmailMonks Newsletter “style=”disp
</tr>
</tbody> </table></td>
</tr>
Phần hiển thị trên màn hình có dạng Welcome to Email Monks Newsletter:
Bạn có thể thử cho thêm một bảng nữa vào email Html này.
Phần code hiển thị nội dung cụ thể:
<tr>
<td valign = “top” align = “center” bgcolor = ” # 0d1121 ” style = ” padding : 35px 70px 30px ; ” class = ” em_padd ” > < table al
< tr >
< td align = ” center ” valign = ” top ” style = ” font – family : ” Open Sans ‘ , Arial sans – serif ; font – size : 16px ;
</ tr >
< tr >
< td height = ” 15 ” style = ” font – size : 0px ; line – height : 0px ; height : 25px ; ” > & nbsp ; < / td>
<! – this is space of 15px to separate two paragraphs — >
</tr>
< tr >
< td align = ” center ” valign = ” top ” style = ” font – family : ” Open Sans ‘ , Arial , sans – serif ; font – size : 18px ; li
</tr>
< tr >
< td height = ” 25 ” class=”em_h20” style = ” font – size : 0px ; line – height : 0px ; height : 15px ; ” > & nbsp ; < / td >
<!- this is space of 25px to separate two paragraphs — >
< /tr >
< tr >
< td align = ” center ” valign = ” top ” style = ” font – family : ” Open Sans ‘ , Arial , sans – serif ; font – size : 16px ; li
< / tr >
< / table ></td>
< / tr >
Phần hiển thị trên màn hình sẽ có bảng Welcome to Email Monks Newsletter:
Tiếp tới là thông tin về footer liên hệ.
Phần code điền đầy đủ như bên dưới:
<tr>
<td valign = “top” align = “center” bgcolor = “# 0d1121” style = “padding: 35px 70px 30px; “class=” em_padd”> <table al
<tr>
<td align= “center” valign = “top” style = “font – family: ‘Open Sans’ , Arial, sans – serif; font – size: 16px; li
</tr>
<tr>
<td height = “15” style = “font – size: 0px; line – height: 0px; height: 15px; ” > & nbsp ; </td>
<! – this is space of 25px to separate two paragraphs –>
</tr>
<tr>
<td align = “center” valign = “top” style = “font – family:” Open Sans Arial, sans – serif; font – size: 18px; li
</tr>
<tr>
<td height = ” 25 ” class = ” em_h20 ” style = ” font – size : 0px ; line – height : 0px ; height : 25px ; ” > & nbsp ; < / td >
< ! – this is space of 25px to separate two paragraphs — >
</tr >
<tr>
<td align = “center” valign = “top” style = ” font – family : ” Open Sans ” , Arial , sans – serif ; font – size :18px ; li
</tr>
</table> </td>
</tr>
Phần hiển thị sẽ có dòng chữ Welcome to Email Monks Newsletter và nội dung đi kèm:
Bạn cần phải tiếp hành việc chèn thêm code này:
<div class=”em_hide” style=”white-space: nowrap; display: none; font-size:0px; line-height:0px;”> </div>. Nhiệm vụ code này là thêm khoảng cách cho bố cục máy tính trong email nhìn sẽ đẹp mắt hơn.
Vậy là bạn sẽ có mẫu email hoàn chỉnh như sau:
Nếu bạn cảm thấy các bước làm thủ công quá khó và cũng không có nhiều kinh nghiệm với việc lập trình và sử dụng css thì phương pháp sau đây sẽ là giải pháp tối ưu cho bạn. Các website được giới thiệu bên dưới sẽ hỗ trợ bạn tạo các HTML Email Template bằng phương pháp kéo thả vô cũng đơn giản. Sau đó bạn chỉ cần ấn export, website sẽ tự động chuyển email thành dạng html cho bạn sử dụng.
Chắc chắn là bạn đang sốt sắng tới việc tìm kiếm những mẫu email Html đẹp và chuyên nghiệp để sử dụng cho công việc của mình tốt hơn. Việc có mẫu email chuẩn vừa hỗ trợ tốt cho nội dung, vừa nâng cao hình ảnh hơn.
Cerberus
Mẫu Cerberus được đánh giá là mẫu phù hợp cho dạng email Html gửi cho khách hàng với thiết kế đẹp mắt và nhiều tính năng. Nhất là khi mẫu này có tích hợp dạng email phản hồi ý kiến từ khách hàng cho công ty.
Phần mềm được thiết lập giúp tạo email phản hồi đơn giản, nhanh chóng. Thư viện của Cerberus đa dạng với các template email đẹp lạ, đem tới trải nghiệm cực kỳ lý tưởng với các Html.
Tải phần mềm Cerberus tại đây.
Mailto
Việc tạo email trông chuyên nghiệp hơn và thể hiện sự trân trọng khách hàng, nội dung sẽ được ghi nhớ hơn khi sử dụng mẫu email Mailto. Bạn sử dụng Mailto sẽ có nhiều lựa chọn phù hợp cho từng chiến dịch của mình hơn.
Omicron
Omicron là một email mẫu Html được cung cấp miễn phí và vận hành hiệu quả trên các thiết bị điện tử, nhất là trên di động tăng tương tác với các đối tác của doanh nghiệp. Bạn hoàn toàn có thể sử dụng Omicron gửi thông tin, dữ liệu, thư mời sự kiện, các buổi xúc tiến thương mại,…cho đối tác nắm bắt một cách ấn tượng, chuyên nghiệp.
Trải nghiệm Omicron tại đây.
Good Ol’ Bakery
Bạn vận hành cơ sở kinh doanh nước uống, bánh trái, thực phẩm thì sử dụng mẫu email Good Ol’ Bakery cực kỳ hợp lý. Hệ thống cung cấp các mẫu email html phản hồi hoàn toàn miễn phí, giúp ích cho việc marketing và kết nối với đối tác nhanh chóng.
Nhất là khi doanh nghiệp, cửa hàng bạn cần mở rộng thị trường, tìm đầu ra hoặc hợp tác đầu tư thì mẫu email này có thể tùy biến nội dung gửi đi chuyên nghiệp. Điều này tăng khả năng nhận được sự đồng ý từ đối tác và nhận về đánh giá cao.
Thiết kế của Good Ol’ Bakery rõ ràng, gọn gàng, thanh lịch. Cách tạo tiêu đề thông minh, tinh tế. Đồng thời khả năng vận hành hiệu quả trên các nần tàng thương mại điện tử.
Tải template Good Ol’ Bakery tại đây.
Đối với gmail thì thường hệ thống không muốn bạn tạo html bên ngoài vào gửi nó vào ứng dụng email. Nhưng có cách đơn giản để nhận email html và sử dụng chúng phục vụ công việc. Xem các bước hướng dẫn chi tiết dưới đây
Có thế thấy, chủ đề Email Marketing vô cùng rộng, bạn sẽ phải làm rất nhiều thứ trước khi chạy chiến dịch. Hy vọng bài viết của mình sẽ giúp các bạn dễ dàng tạo email Marketing chuyên nghiệp nhanh hơn nhờ vào các các mẫu có sẵn để, từ đó bạn sẽ có nhiều thời gian hơn vào chiến dịch của mình.
Đọc nhiều nhất
Bảng giá tên miền
