Tìm kiếm
Góc thư giãn
08/05/14,21:18
Hit: 2073

Những lưu ý khi dựng HTML cho Email Marketing

Những lưu ý khi dựng HTML cho Email Marketing

Việc dựng trang cho Email hiện nay chủ yếu dựa theo tiêu chuẩn dựng trang HTML, tức 1 trang email có thể xem như là 1 trang web, tuy nhiên mỗi ứng dụng đọc email lại hỗ trợ một cách khác nhau khiến diện mạo trang email có thể bị thay đổi, sai lệch hoàn toàn.

Việc gửi email để giới thiệu sản phẩm dịch vụ là một việc không thể thiếu của một doanh nghiệp, nó có thể là một thư chào hàng, một bản tin định kỳ hay đơn giản là một tấm thiệp chúc Tết. Một email được trình bày nghiêm túc sẽ mang lại thành công cao hơn với một email toàn là văn bản như một email trao đổi thông thường, tuy nhiên việc trình bày này lại không hề đơn giản như vẫn nghĩ.

Tính tương thích

Cùng một design nhưng cách xây dựng chúng có thể khác nhau hoàn toàn, có cái hoàn toàn là HTML, có cái dùng CSS, nhưng mục tiêu chung là phải hiển thị giống nhau cho hầu hết người nhận, bất kể họ sử dụng chương trình đọc mail hay dịch vụ email nào. Một email trông hoàn hảo từ Outlook không có nghĩa là nó sẽ giống như vậy trong GMail.

Để thuận tiện cho sự tương thích, một email cần tập trung vào 3 việc:
- một là giữ chúng thật đơn giản, tránh làm phức tạp thiết kế khiến chúng như bị nghẹt thở
- hai là cần năm vững kỹ thuật dựng trang HTML, CSS
- ba là luôn cập nhật những nâng cấp mới của các chương trình đọc mail, một email trông hoàn hảo hôm nay không có nghĩa là chúng sẽ như vậy trong ngày hôm sau.

Khách hàng mục tiêu sử dụng chương trình đọc mail nào

Cần biết được email này gửi đến ai, và người đó đọc email bằng chương trình nào, Outlook, Gmail hay Yahoo. Từ đó tập trung kỹ thuật dựng trang cho tương thích tốt với chương trình đó trước.

SỬ DỤNG BẢNG

Một số chương trình đọc mail không hỗ trợ một số thuộc tính như margin, padding, float… vì thế để an toàn nhất nên sử dụng bảng để chia cột, chia khoảng cách, chiều rộng, chiều cao v.v…

Luôn đặt thuộc tính cho từng ô

Nên áp dụng cho từng ô của bảng, thẻ <TD>, không nên áp dụng cho toàn bảng, thẻ <TABLE>, ví dụ ở đây thay vì định chiều rộng bảng là 360, thì định định chiều rộng cho từng cell:

<table cellspacing="0" cellpadding="10" border="0">
<tr>
<td width="80"> </td>
<td width="280"> </td> </tr>
</table>

Lưu ý, không nên dùng giá trị "%" cũng như không thêm "px" vào các giá trị.

Sử dụng bảng để tô màu nền trang

Ta thường đặt màu nền cho trang vào thẻ <BODY>, tuy nhiên một số chương trình đọc mail bỏ qua thẻ này, vì thế nên tạo một bảng bao bên ngoài với chiều rộng là 100% và tô màu nền cho nó. Ví dụ:

<table cellspacing="0" cellpadding="0" border="0" width="100%">
  <tr>
    <td bgcolor=”#000000”>
      Nội dugn email đặt ở đây.
    </td>
  </tr>
</table>

Tránh các ký tự khoảng trắng trong ô của bảng

Tránh viết khoảng trắng, hoặc 1 ký tự không cần thiết vào trong thẻ <TD>, một số chương trình đọc mail như Outlook sẽ định dạng lại ký tự này thành đoạn văn bản (thêm thẻ <P>) từ đó phát sinh ra padding và magrin của thẻ <P> khiến ô bị giãn ra, dẫn đến bố cục trang như đứt rời từng mảnh.

ĐỊNH DẠNG VĂN BẢN

CSS hiện nay được hỗ trợ khá nhiều trong các chương trình đọc mail, nên không nhất thiết lúc nào cũng phải dùng thẻ <FONT> để định dạng văn bản mà có thể dùng CSS cho cả thẻ <TD> hay <DIV>...

Luôn dùng CSS nội tuyến (inline)

Ta thường viết CSS trong cặp thẻ <STYLE></STYLE> và đặt trước thẻ <BODY>, tuy nhiên cách này có thể bị một số chương trình đọc mail như Gmail loại bỏ, do đó nên viết thẳng vào trong thẻ cần viết. Ví dụ:

<p style="color:#333; text-align:right">Văn bản màu xám.</p>

Tránh viết CSS dạng ngắn gọn

Một số chương trình đọc mail không nhận dạng được kiểu viết này, ví dụ:

<p style="font: bold georgia 13px;">Văn bản</p>

Mà nên viết chi tiết ra từng thuộc tính, ví dụ:

<p style="font-weight: bold; font-family: georgia; font-size:13px;">
  Văn bản
</p>

Thậm chí thuộc tính màu sắc cũng không nên viết tắt, ví dụ không nên viết #369 mà phải viết #336699.

Định dạng đoạn văn bản

Ta thường dùng thẻ <P> để bắt đầu một đoạn văn bản, tuy nhiên thuộc tính padding và margin của thẻ <P> rất khó kiểm soát, bởi một số chương trình đọc mail có thể tự định dạng thể <P> theo cách của nó. Một số người hay sử dụng 2 thẻ <BR /> liền nhau hoặc dùng thẻ <DIV>.

Cách an toàn có thể sử dụng bảng, định dạng một ô <TD> tưng đương một đoạn văn bản, ví dụ:

<td width="200" style="font-weight:bold; font-size:1em; line-height:1.2em; font-family:georgia,'times',serif;">
  Văn bản của bạn.
</td>

Màu sắc của liên kết

Để quy định màu sắc cho một liên kết:

<a href="#" style="color:#ff0000">Liên kết màu đỏ</a>

Tuy nhiên một số chương trình đọc mail lại can thiệp vào và quy định lại màu sắc của liên kết. Do đó để tránh bị đổi màu không mong muốn, nên gắn màu sắc vào đoạn text bên trong liên kết, ví dụ:

<a href="#" style="color:#ff0000">
  <span style="color:#ff0000">Liên kết màu đỏ</span>
</a>

 

ĐỊNH DẠNG EMAIL

HTML/CSS Gmail Yahoo Mail Outlook 2007 Windows Mail Apple Mail
Background-image
Background-position
Color/background-color
Descendant-selectors
Float/clear
Margin
Padding
Varying link-colors
Width/height
Background-position a:hover
Border
Font family/size/weight/style
Font-family names with quotes
Font inheritance
Line-height
List-style-image
Position        

 

HÌNH ẢNH TRONG EMAIL

Hình ảnh là thứ thường bị các chương trình đọc mail chặn lại vì lý do an ninh, và khi bị chặn nó sẽ để lại một vùng trắng và làm sai lệch thông điệp mà chùng ta mang đến trong email.

Luôn quy định kích thước của hình

Luôn chỉ định kích thước widt và height của hình ảnh, để khi nó không được tải về thì một vùng trắng đúng bằng kích thước đó sẽ được giữ lại, tránh làm sai lệch bố cục trang.

Tránh dùng file PNG

Một số chương trình đọc email cũ không nhận diện được file PNG, hoặc có thể phần trong suốt của hình PNG sẽ không được thể hiện và bị tô một màng màu xám chẳn hạn. Do đó, nên dùng file GIF hoặc JPG cho hình ảnh.

Tạo màu nền dự phòng cho hình ảnh hay ảnh nền

Outlook 2007 không hỗ trợ ảnh nền, vì thế ta nên tô bên dưới một màu nền tương ứng để trong trường hợp hình ảnh không được hiển thị, màu nền sẽ thay thế.

Luôn dùng ALT text

Thuộc tính ALT của thẻ <IMG> cần được hiện diện, khi hình ảnh không được hiển thị, người xem có thể đọc được thông tin qua phần text trong thẻ ALT. Để đoạn text này được trình bày đẹp mắt, ta cũng có thể dùng style để quy định font chữ màu sắc cho thẻ <IMG>, ví dụ:

<img src="picture.jpg" alt="Đây là hình ảnh" style="font-size:20px; color:#0000ff;" />

Sử dụng thuộc tính display

Outllok rất hay thêm một khoảng trắng khoảng 3 pixel bên dưới mỗi hình ảnh, làm bố cục bị rời ra, vì thế dùng tiểu xảo này để chống lại việc đó, ví dụ:

<img src="picture.jpg" style="dislay:block;" />

Không sử dụng float

Outlook 2007 không hỗ trợ thuộc tính float, do đó để canh trái phải một hình ảnh, dùng thuộc tính align, ví dụ:

<img src="picture.jpg" align="right" />

 

Ứng dụng máy tính Default Trust sender ALT tag
Outlook 2007
Outlook 2003
Outlook for Mac 2011
Outlook Express
Windows Live Hotmail
Apple Mail
Ứng dụng dạng web      
Hotmail
Yahoo Mail! Beta
Gmail
Ứng dụng trên di động      
iPhone/iPad
Android (default)
Android Gmail
Windows Mobile 7
Blackberry OS6

 

MEDIA TRONG EMAIL

Trước đây một số chương trình đọc mail có thể cho phép chèn Video hay Flash trong email, nhưng hiện nay hầu hết đều không hỗ trợ, vì dùng hãy thế chúng bằng ảnh GIF động (Animated GIF). Tuy nhiên Outlook 2007 trở lên chỉ hiển thị frame đều tiên của hình GIF động, vì thế lưu ý để tránh một hình ảnh không mong muốn ở vị trí frame đầu tiên (một mảnh vỡ chưa kịp ráp lại của logo chẳn hạn…) 

Ứng dụng máy tính Flash Quicktime Window Media Animated GIF Java Applet HTML5
Apple Mail
Outlook 2003, Express
Outlook 2007+
Entourage 2008
Windows Mail
Ứng dụng dạng web            
Gmail
Outlook.com
Yahoo! Mail
Ứng dụng trên di động            
Android (default)
Android (Gmail)
Blackberry
iPhone
Windows Mobile 7

 

CHECK MAIL TỪ MOBILE

Mobile ngày nay khá phổ biến nên việc đọc mail từ mobile cũng đáng quan tâm, mặc dù hầu hết chương trình đọc mail trên mobile có thể hiển thị tốt, tự động zoom trang v.v… nhưng cũng nên chú ý những vần đề sau:

Giữ chiều rộng emali nhỏ hơn 600 pixel

Để tránh việc trang quá lớn khi zoom lại cho vừa màn hình có thể gây ra text khó đọc hay hình quả quá bé. Ngoài ra đối với ứng dụng trên máy tính, màn hình còn dành chỗ cho phần Cây thư mục bên trái, do đó phần Preview của email không thể rộng hết màn hình được.

Tránh text bị thay đổi

Một số chương trình đọc mail trên mobile như iPhone thường phóng to chữ ra cho dễ đọc, khiến bố cục trang bị xô lệch, vì thế nên dùng thêm thuộc tính CSS này cho đoạn văn bản:

-webkit-text-size-adjust: none;

ĐỪNG QUÊN KIỂM TRA

Trước khi gửi email marketing, luôn nhớ phải gửi test trước để đảm bảo kết quả giống nhau trên hầu hết chương trình đọc mail của khách hàng mục tiêu.

Ngoài ra có thể xem thêm các lưu ý khác tại đây hoặc Guideline.

Download

BÀI VIẾT LIÊN QUAN

BÀI VIẾT MỚI

BÀI VIẾT NỔI BẬT

XEM NHIỀU NHẤT