Các phương pháp hay nhất và cân nhắc khi viết Email HTML [đã đóng]


83

Tôi đã phát triển trang web hơn một thập kỷ nay, nhưng nhanh chóng nhận thấy rằng nhiều thói quen của tôi trong việc phát triển web là vô ích khi phát triển cho ứng dụng email. Điều này đã khiến tôi vô cùng thất vọng, vì vậy tôi nghĩ mình sẽ hỏi một câu:

Những phương pháp hay nhất và những cân nhắc cần thiết đối với những người khác như tôi, những người thỉnh thoảng có thể thấy mình thiết kế cho gmail, outlook, v.v.?

Ví dụ: <style>...</style> so với CSS nội tuyến.

Tóm lại: điều gì chuyển từ thế giới web sang thế giới email và điều gì không?

Câu trả lời:


131

Đây có vẻ là một nơi tuyệt vời để liệt kê một số tài nguyên cho bất kỳ ai đang cố gắng tìm hiểu email HTML. Đây (có thể là) danh sách toàn diện nhất về các tài nguyên Email HTML mà bạn sẽ tìm thấy trên web. Chúc bạn học vui vẻ.

Hướng dẫn Bắt đầu:

Hỗ trợ CSS & Hướng dẫn Chung:

Bạn phải luôn nội dòng CSS của mình trong html-email. Đây là danh sách các công cụ nội tuyến CSS

Hướng dẫn đáp ứng:

Mẫu & Khung:

Ví dụ thay thế thích ứng:

Ngoài ra, liên kết Ted Goas Responsive ở trên có một ví dụ linh hoạt tuyệt vời.

Khắc phục sự cố & Hướng dẫn Chung:

Bạn sẽ cần sử dụng VML để có được hình nền hoạt động trong Outlook (Ngoại trừ trong thẻ body ). Dưới đây là một số liên kết VML:


37

Tôi đã làm những điều này (khá nhiều lần) cho công việc của tôi trong một thời gian. Có rất nhiều cạm bẫy với email HTML. Các ứng dụng Email khác nhau hiển thị HTML khác nhau và làm cho IE6 trông nâng cao.

Đây là tóm tắt về những gì tôi đã học được cho đến nay.

  • Sử dụng CSS nội dòng : Các kiểu không phải lúc nào cũng được hỗ trợ.
  • Sử dụng bố cục bảng : Tôi biết, nhưng bố cục div phụ thuộc vào css và nhiều ứng dụng email khách không thể đối phó.
  • Không sử dụng rowspan : Điều này gây ra các vấn đề về khoảng cách kỳ lạ.
  • Không sử dụng hình nền : Hỗ trợ cho những hình ảnh này bị hạn chế.
  • Tạo kiểu cho thẻ hình ảnh với "display: block" : Điều này khắc phục các vấn đề về khoảng cách kỳ lạ với hotmail.
  • Nếu sử dụng nhiều bảng lồng chúng trong một bảng mẹ : Điều này ngăn chặn các vấn đề về khoảng cách kỳ lạ hơn.
  • Không sử dụng Javascript : Một lần nữa không được hỗ trợ rất tốt.
  • Đảm bảo rằng email của bạn dễ đọc và không có hình ảnh : Người dùng có thể không tải chúng.
  • Cung cấp phiên bản trực tuyến và liên kết đến nó : Điều này cho phép người dùng xem nội dung dự định, ngay cả khi ứng dụng email của họ quá tệ.
  • Kiểm tra, kiểm tra, kiểm tra : Chỉ vì nó hoạt động trên một ứng dụng email không có nghĩa là nó hoạt động ở những ứng dụng khác. Một điểm nổi bật lớn là Outlook 2007. Nó sử dụng word để kết xuất HTML (thở dài).

Đây không phải là một danh sách toàn diện, nhưng sẽ giúp hầu hết mọi người đi đúng hướng.


5

Nội tuyến css và bảng - hãy nghĩ rằng việc phát triển web vào khoảng năm 2000 và bạn sẽ ổn thôi. Trình theo dõi chiến dịch có một tài nguyên tuyệt vời cho những thứ mà khách hàng email có thể giải quyết. Cũng sử dụng http://www.emailonacid.com/ để thử nghiệm - tiết kiệm việc phải gửi nhiều thử nghiệm.


cũng có một số nguyên tắc do mailchimp cung cấp tại đây: mailchimp.com/articles/email_marketing_guide
Dal Hundal,
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.