Thiết Kế Email Hiển Thị Tốt Với Outlook 2007 & Outlook 2010

email1
0

Vì sao thiết kế email hiển thị tốt với Outlook lại khó khăn hơn?

Trong khi Microsoft đã có những cải tiến lớn về các tiêu chuẩn web ở IE, thì dường như họ đang đi ngược lại trong việc hỗ trợ email HTML ở Outlook. Trong phiên bản Outlook 2007, họ đã chuyển chế độ dàn trang HTML từ bằng nhân IE sang bằng nhân Word (có lẽ là vì lý do bảo mật), điều đó làm tê liệt hoàn toàn các email HTML so với trước. Đối với bất kỳ ai làm mail marketing và cần thiết kế, lập trình các email HTML hấp dẫn, quyết định này chẳng khác nào buộc họ phải giơ nắm đấm và nguyền rủa Microsoft.

Và tất cả đều hy vọng rằng, trong phiên bản Outlook 2010, Microsoft sẽ quay trở lại với nhân IE, nhưng rốt cuộc, họ vẫn gắn bó với nhân Word. Dường như chúng ta vẫn phải chung sống với nhân Word trong nhiều năm nữa. Thậm chí nếu sắp tới Microsoft chuyển sang dùng nhân IE cho phiên bản Outlook 2012, chúng ta sẽ vẫn còn những khách hàng đang dùng Outlook 2007, 2010. Vậy là nếu bạn chưa từng học cách thiết kế email HTML cho Outlook, bây giờ là lúc để học.

Với Outlook 2007, chúng ta đang đối mặt với chương trình đọc email khó tính nhất, và nói chung, nếu email HTML của bạn hiển thị tốt trên Outlook thì gần như chắc chắn nó hiện tốt ở tất cả các chương trình khác.

Những kinh nghiệm thiết kế với Outlook 2007

Điều đầu tiên bạn cần phải hiểu khi thiết kế và code cho Outlook là các quy tắc thông thường thông thể áp dụng được ở đây. Hãy quên đi tất cả những thói quen dùng CSS – tưởng tưởng bạn đang quay trở lại năm 2001 với những tag HTML lúc đó. Lưu ý rằng một số thứ trong CSS có thể vẫn chạy được trong Outlook, nhưng tôi khuyên bạn tránh dùng chúng vì theo kinh nghiệm của tôi, chúng thường không hiển thị nhất quán, và thật xấu hổ khi nhận được một email phản hồi từ khách hàng của bạn hỏi rằng tại sao email HTML lại bị vỡ khi họ gửi đi.

Bạn hãy ghi nhớ những quy tắc sau:

  • Quên đi việc tách nội dung bằng CSS. Chỉ tạo email HTML với các table và ảnh GIF trống. Không thẻ <div>. Hãy xem ví dụ dưới đây.
  • Không dùng background, chỉ dùng màu nền.Nếu bạn muốn đặt text lên trên ảnh trong email HTML, bạn sẽ phải tạo một vùng phía sau phần text với một màu nền duy nhất, rồi cắt nhỏ ảnh theo bố cục.
  • Bạn có thể dùng các style cơ bản, nhưng hãy dùng chúng thẳng trong từng tag, đừng để trong phần header. Đừng cố tưởng tượng, rất nhiều thứ chạy tốt trên trình duyệt nhưng không chạy được trên Outlook.
  • Đừng dùng padding, chỉ dùng margin. Padding sẽ không hiển thị chuẩn.
  • Dùng code càng đơn giản càng tốt.
  • Tối ưu hóa email HTML của bạn cho chế độ ‘tắt ảnh’, đó thường là chế độ mặc định khi người nhận mở email. Nếu bạn không khai báo chiều cao của ảnh, email HTML sẽ bị co lại theo chiều dọc, đẩy phần nội dung text lên phía trên,dù cho bạn đã xác định chiều rộng ảnh.

Hãy xem ví dụ bên dưới:

tuyen dung marketing tai tphcmHãy xem đoạn text đầu tiên để hiểu cách email HTML nên được code cho phù hợp với Outlook. tuyen dung marketing tai tphcm

<tr>
<td width=”20′′>
<img src=”http://client.muralconsulting.com/neustar/7w ays/spacer.gif” width=”20′′ height=”1′′ border=”0′′ alt=”” />
</td>
<td bgcolor=”#ffffff” width=”530′′>
<p style=”font: 14px/20px Arial, Helvetica, sans- serif; color: #002765; margin-bottom:10px;”> <strong>Budgets are tight, yet your customers’ demands for high performance from your online service are growing.</strong> The good news is that you don’t need to spend a lot of money to make your web applications faster&hellip; if you know where to look!</p>
</td>
<td width=”20′′>
<img src=”http://client.muralconsulting.com/neustar/7w ays/spacer.gif” width=”20′′ height=”1′′ border=”0′′ alt=”” />
</td>
</tr>

Lưu ý rằng chúng ta đang dùng table để phân chia bố cục, không dùng CSS, và chúng ta đang dãn các ô bằng các ảnh GIF trống. Tất cả các style được đưa thẳng vào từng tag <p> tương ứng, không đưa vào tag <p> chung toàn cục. Cũng lưu ý rằng chúng ta đang bố trí khoảng trống dọc bằng margin, không dùng padding.

Nhiều người thiết kế website chê cười những công cụ như Dreamweaver vì nó không cung cấp chế độ design chính xác cho CSS nâng cao. Nhưng Dreamweaver thực sự là một công cụ tốt cho email, và nó có thể hiển thị email khá chính xác. Ban đầu nó được thiết kế để tạo website trước cả khi các web nhiều màu sắc được phổ biến, tức là rất phù hợp với mục đích của chúng ta. Nó chắc chắn sẽ giúp bạn tạo các table, nên đừng ngại dùng nó.

Đọc thêm: Phương pháp xây dựng email marketing

<Nguồn: Cộng đồng Tất Tần Tật>

Related Blogs

Leave us a comment