Những lưu ý khi thiết kế Email Marketing

Tin tức

Một vài điểm chúng ta cần chú ý trong việc thiết kế Email Marketing. Điều này không giống như thiết kế web. Email có những chuẩn riêng về kiểu dáng, hình ảnh và kích thước.

Trước khi bắt đầu bạn cần chú ý…

Thiết kế Email Marketing không phải là thiết kế web
Nếu bạn quan tâm về chuẩn W3C, sử dụng công nghệ mới nhất trong CSS,…bạn cần quên tất cả chúng đi khi bắt đầu thiết kế Email.

15

1. Về layout (bố cục)

– Chiều rộng tốt nhất là 600px hoặc có thể 650px
Quy tắc chung cho chiều rộng email chỉ nên ở mức 650px hoặc ngắn hơn. Điều này cho phép email hiển thị đúng bố cục trong hầu hết các chương trình đọc email (Outlook, IncrediMail, Lotus..) cũng như trên các webmail (Gmail, Hotmail, Yahoo..).

– Bố cục đơn giản là tốt nhất
Với thiết kế email thì bố cục đơn giản là tốt. Nếu bạn thử thiết kế phức tạp thì sẽ bị lỗi và mất rất nhiều khi hiển thị trên các mailbox hay email client.

2. Sử dụng HTML table đơn giản
Bạn cần tuân theo các chuẩn table của HTML. Các kỹ thuật phức tạp sử dụng CSS và layout sẽ không hiển thị đúng trong hầu hết các email client. (hãy nhớ quy tắc table lồng table khi cắt HTML email)

– Tránh sử dụng colspans=”” trong table
Một số email client không hỗ trợ hoàn toàn những điều này. Sẽ có vấn đề về việc hiển thị ở một số sell nếu bạn sử dung colspan.

3. CSS
– Không sử dụng stylesheet bên ngoài
Phần lớn CSS bên ngoài (css nằm riêng trong file .css) sẽ không làm việc trong các email client và bạn nên đưa chúng vào trong mã HTML của email sử dụng inline CSS.

– Không sử dụng CSS class – luôn luôn sử dụng inline CSS
Một số email clients không hỗ trợ CSS class. Thay vì sử dụng CSS class, bạn nên sử dụng inline CSS. Ví dụ sử dụng <div style=”color:#cccccc;”>nội dung</div> thay vì <div>nội dung</div>

– Không sử dụng CSS shortcut
CSS cho phép bạn set thuộc tính thành nhóm. Ví dụ style=”font: 12px, Arial” thay vì nhóm các thuộc tính lại, bạn nên chia thành các phần riêng lẻ như style=”font-size:12px; font-family:Arial”

– Tránh sử dụng CSS float hay position option
Một số email client không hiển thị tốt với cả 2 dạng float và position CSS option. Thay vì đó bạn nên sử dụng table.

4.Images & Video

– Sử dụng ảnh với Src là URL tuyệt đối
Thay vì chèn ảnh ảnh như(<img src=”/img.gif”>) bạn phải sử dụng url tuyệt đối (<img src=”http://site.com/img.gif”>)

– Luôn sử dụng thẻ alt
Hầu hết các email clien thì mặc định không hiển thị ảnh. Nếu bạn không sử dụng thẻ alt thì nó sẽ không hiển thị gì cả. (<img src=”http://site.com/img.gif” alt=”Company ABC”>)

– Không nhúng Flash hay Video
Không phải là ý tưởng tốt nếu nhúng video hay flash trực tiếp vào email của bạn. Một số email client không hỗ trợ code nhúng của bạn và hầu hết các bộ lọc spam có thể đánh dấu bạn như là một email spam. Thay vì nhúng video, flash vào trong email, bạn nên chèn ảnh chụp video hay flash và tạo một liên kết tới video, flash tới ảnh đó. Người đọc sẽ có thể click vào và xem chúng trên trình duyệt.

-Không phải email client nào cũng hỗ trợ hoàn toàn ảnh Gif động
Hãy xem xét việc sử dụng ảnh gif động. Trong khi phần lớn hỗ trợ gif động thì Outlook 2007 không hỗ trợ, có thể chỉ hiển thị khung đầu tiên của anh gif.

-Cẩn thận với việc chia nhỏ hình ảnh
Nếu bạn có một cái ảnh lớn và chia nhỏ ra để ghép bằng HTML sử dụng table cess, img tag thì bạn cần phải test cẩn thận. Một số email client sẽ tự động thêm vào khoảng trống giữa các ảnh của bạn.
Xem cách khắc phục lỗi khoảng trắng giữa các ảnh tại đây

– Kiểm tra email của bạn trong trường hợp ảnh bị ẩn
Vì phần lớn email client sẽ mặc định ẩn ảnh của bạn. Nên sẽ rất quan trọng nếu bạn kiểm tra chúng trước khi gửi.

– Xem xét kích cỡ file của bạn
Email hay ảnh càng nhẹ thì càng dễ tải về. Nếu bạn không muốn người nhận phải chờ 30 giây để đọc được email của bạn thì hãy xem xét lại kích thước ảnh, email của bạn.

– Cân nhắc tỉ lệ giữa hình ảnh và text
Không nên sử dụng Email chỉ có chứa hình vì nhà cung cấp Email sẽ chặn không cho hiển thị và người nhận sẽ không xem được nội dung email là gì nếu không click để tải hình về. Tỉ lệ hình ảnh và text tốt nhất là 20% ảnh 80% text.

5.Backgrounds

– Không hoàn toàn hỗ trợ ảnh nền
Nếu bạn đang sử dụng ảnh làm background thì hãy để ý là một số email client sẽ không hiển thị chúng. Nếu bạn vẫn muốn sử dụng thì hãy dùng thẻ HTML thay vì sử dụng CSS.

– Full body background colors
Một số email client (như Gmail) không hiển thị background color mà bạn set ở thẻ Nếu bạn đang cấu hình màu nền cho background thì nên dùng một thẻ div bao với màu nền. Vì nếu body background color không hiển thị thì bạn sẽ vẫn hiển thị được một màu tương tự.

6. Một số chú ý khác

– Không nhập nội dung ngoài thẻ <body>
Tất cả nội dung bạn nhập vào bên trên thẻ body sẽ không được sử dụng

– Không chèn javascript
Hầu hết các bộ lọc sẽ xác định chúng như là mã độc hại và việc email của bạn bị coi như spam là không tránh khỏi.

Tránh sử dụng Microsoft Office
Mã HTML được tạo ra bởi MS Office sẽ có rất nhiều vấn đề khi hiển thị trên email client. Nếu bạn có ý định copy từ MS Office thì có thể sử dụng Dreamweaver để đơn giản hóa thẻ html của bạn.

Tham khảo cách viết HTML email cơ bản tại đây

Nguồn: Internet

Chia sẻ dự án này

Trả lời

Email của bạn sẽ được ẩn. Các thông tin bắt buộc được đánh dấu *


TIN MỚI NHẤT


GỬI TRAO YÊU THƯƠNG – CÙNG EM TỚI TRƯỜNG

Tin tức

Khi trao yêu thương, ta sẽ nhận lại hạnh phúc. Đúng như chân lý đó, niềm hân hoan của cô và trò tỉnh miền núi Yên Bái trong chương trình thiện nguyện “Cùng em tới trường”, do VietGuys đồng hành cùng Đài PTTH Yên Bái thực hiện, chính là điều kì diệu ấm lòng nhất mà VietGuys nhận được.  “Cùng …

Chia sẻ dự án này

Làm thế nào để thành công trong mảng B2B Sale & Marketing?

Tin tức

Đây cũng là chủ đề chính trong buổi Workshop của chị Phan Thanh Thảo tại văn phòng VietGuys chiều ngày 16/9 vừa qua. Ấn tượng đầu tiên ở chị, người phụ nữ đang đảm nhận vị trí Head of Commercial tại tập đoàn Viet Thai International (VTI), là nét mộc mạc, giản dị cùng phong thái điềm đạm. Có lẽ …

Chia sẻ dự án này

VIETGUYS ĐỒNG HÀNH CÙNG IDG VIỆT NAM TẠI HỘI THẢO QUỐC GIA VỀ CHÍNH PHỦ ĐIỆN TỬ 2020

Tin tức

Ngày 17/09/2020 vừa qua, tại Khách sạn Sheraton Sài Gòn, Hội thảo – Triển lãm Quốc gia về Chính phủ Điện tử Vietnam E-Government đã chính thức đánh dấu bước ngoặt 15 năm tổ chức. Hội thảo đã trở thành một sự kiện đặc biệt quan trọng đối với cộng đồng những người phụ trách xây dựng chính phủ điện …

Chia sẻ dự án này

3 BÍ QUYẾT VÀNG TRONG “LÀNG” DATA EMAIL

Tin tức

Có thể thấy bên cạnh nội dung email hấp dẫn, hình ảnh được thiết kế đặc sắc, gây ấn tượng đến người đọc, thành bại của một chiến dịch Email Marketing còn phụ thuộc vào chất lượng danh sách email. Chính vì vậy, VietGuys mong muốn chia sẻ các bí quyết giúp bạn “chăm sóc” data email của mình thật …

Chia sẻ dự án này

VIETGUYS THEO SÁT “CHUYỂN ĐỔI SỐ” CÙNG VECOM TẠI VOIEF 2020

Tin tức

Ngày 28/7/2020 vừa qua, VietGuys vinh hạnh là nhà tài trợ Đồng trong Diễn đàn “Chuyển đổi số trong lĩnh vực xuất nhập khẩu hàng hóa” do Hiệp hội Thương mại điện tử Việt Nam cùng Bộ Công thương và VCCI phối hợp tổ chức. Sự kiện đã nêu bật lên vai trò của nền tảng Thương Mại Điện Tử …

Chia sẻ dự án này

VietGuys “Khám phá kho báu Midas” cùng Forbes Việt Nam tại sự kiện Tech Summit 2020

Tin tức

Sáng ngày 16/07 vừa qua, VietGuys vinh dự khi được góp mặt với vai trò là nhà tài trợ Bạc tại sự kiện công nghệ Tech Summit 2020 do Forbes Việt Nam tổ chức. Với chủ đề Khám phá kho báu Midas, sự kiện Tech Summit 2020 được các chuyên gia, diễn giả hàng đầu trong các lĩnh vực trí …

Chia sẻ dự án này