Thực tiễn tốt nhất để tạo kiểu email HTML [đã đóng]

Tôi đang thiết kế một mẫu HTML cho một bản tin email. Tôi đã học được rằng nhiều ứng dụng email bỏ qua các bảng định kiểu được liên kết và nhiều ứng dụng khác (bao gồm cả Gmail) bỏ qua các khai báo khối CSS hoàn toàn. Là thuộc tính phong cách nội tuyến sự lựa chọn duy nhất của tôi? Các thực tiễn tốt nhất để tạo kiểu email HTML là gì?

Giám sát chiến dịch có một ma trận hỗ trợ tuyệt vời chi tiết những gì được hỗ trợ và những gì không có trong các ứng dụng thư khác nhau.

Bạn có thể sử dụng một dịch vụ như Litmus để xem cách một email xuất hiện trên một số khách hàng và liệu họ có bị bắt bởi các bộ lọc hay không, v.v.

Tôi đã chiến đấu trong cuộc chiến email HTML trước đây. Dưới đây là một số lời khuyên của tôi về kiểu dáng để tương thích tối đa giữa các ứng dụng email.

• Phong cách nội tuyến là bạn tốt nhất. Tuyệt đối không liên kết các biểu định kiểu và không sử dụng <style>thẻ (ví dụ: Gmail, dải các thẻ đó và tất cả nội dung của nó).

• Chống lại sự phán xét tốt hơn của bạn, sử dụng và bảng lạm dụng . <div>s sẽ không cắt nó (đặc biệt là trong Outlook).

• Đừng sử dụng hình nền , chúng bị đốm và sẽ làm phiền bạn.

• Hãy nhớ rằng một số ứng dụng email sẽ tự động chuyển đổi các siêu liên kết đã nhập thành các liên kết (nếu bạn không tự neo <a>chúng). Điều này đôi khi có thể đạt được các hiệu ứng tiêu cực (giả sử nếu bạn đặt một kiểu trên mỗi siêu liên kết để xuất hiện một màu khác nhau).

• Hãy cẩn thận siêu liên kết một liên kết thực tế với một cái gì đó khác nhau. Ví dụ: không gõ ra http://www.google.comvà sau đó liên kết nó với https://gmail.com/. Một số khách hàng sẽ gắn cờ thư là Spam hoặc Junk.

• Lưu hình ảnh của bạn trong càng ít màu càng tốt để tiết kiệm kích thước.

• Nếu có thể, hãy nhúng hình ảnh của bạn vào email của bạn. Email sẽ không phải liên hệ với máy chủ web bên ngoài để tải xuống và chúng sẽ không xuất hiện dưới dạng tệp đính kèm của email.

Và cuối cùng, kiểm tra, thử nghiệm, kiểm tra ! Mỗi ứng dụng email thực hiện mọi thứ theo cách khác với trình duyệt sẽ làm.

Mail tinh tinh đã có một bài viết khá hay về những điều không nên làm. (Tôi biết nó nghe sai vòng cho những gì bạn muốn)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

Nói chung, tất cả những điều bạn đã học được là thực tiễn tồi cho thiết kế web dường như là lựa chọn duy nhất cho email html.

Những điều cơ bản là:

• Có đường dẫn tuyệt đối cho hình ảnh (ví dụ: https://stackoverflow.com/random-image.png )
• Sử dụng bảng để bố trí (không bao giờ nghĩ rằng tôi khuyên bạn nên điều đó!)
• Sử dụng các kiểu nội tuyến (và css trường cũ cũng vậy, nhiều nhất là 2.1, hộp bóng tối sẽ không hoạt động;))

Chỉ cần kiểm tra càng nhiều ứng dụng email mà bạn có thể có được hoặc sử dụng Litmus như người khác đã đề xuất ở trên! (tín dụng cho Jim)

BIÊN TẬP :

Thư tinh tinh đã làm một công việc tuyệt vời bằng cách làm công cụ này có sẵn cho cộng đồng.

Nó áp dụng các lớp CSS của bạn cho các phần tử html nội tuyến cho bạn!

Ngoài các câu trả lời được đăng ở đây, hãy chắc chắn rằng bạn đã đọc bài viết này:

http://24ways.org/2009/rock-solid-html-emails

Tài nguyên mà tôi luôn luôn quay trở lại về các email HTML là hướng dẫn CSS của CampaignMonitor .

Vì công việc kinh doanh của họ chỉ tập trung vào việc gửi email, họ biết công cụ của họ cũng như bất cứ ai sẽ

'Sợ quá. Tôi sẽ tạo một trang HTML bằng biểu định kiểu, sau đó sử dụng jQuery để áp dụng biểu định kiểu cho biểu thức kiểu của từng thành phần. Một cái gì đó như thế này:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

Sau đó sao chép DOM và sử dụng nó trong email.

Tôi thấy rằng bản đồ hình ảnh hoạt động khá tốt. Nếu bạn có bất kỳ tiêu đề hoặc chân trang nào là hình ảnh, hãy đảm bảo rằng bạn áp dụng bgcolor = "điền vào chỗ trống" bởi vì triển vọng trong hầu hết các trường hợp sẽ không tải hình ảnh và bạn sẽ được để lại một tiêu đề trong suốt. Nếu bạn ít nhất chỉ định một màu hoạt động với tất cả cảm giác của email, nó sẽ ít gây sốc cho người dùng. Không bao giờ thử và sử dụng bất kỳ tấm tạo kiểu. Hoặc CSS nào cả! Chỉ cần tránh nó.

Tùy thuộc vào việc bạn đang sao chép nội dung từ một từ hoặc chia sẻ google Doc, hãy chắc chắn (lệnh + F) Tìm tất cả (') và (") và thay thế chúng trong phần mềm chỉnh sửa của bạn (đặc biệt là dreemweaver) vì chúng sẽ hiển thị dưới dạng mã và nó không tốt

ALT là người bạn tốt nhất của bạn. sử dụng thẻ ALT để thêm văn bản vào tất cả các hình ảnh của bạn. Bởi vì tỷ lệ cược là họ sẽ không tải đúng. Và văn bản ALT đó là thứ khiến mọi người nhấp vào nút (xem hình ảnh). Đồng thời xác định hình ảnh của bạn Chiều rộng, Chiều cao và làm cho nội dung 0 để bạn không nhận được các dòng lạ xung quanh hình ảnh của mình.

Cân nhắc chỉnh sửa tất cả các hình ảnh trong Photoshop với một tấm ván 15px ở mỗi bên (làm cho nền trong suốt và lưu dưới dạng PNG 24) của hình ảnh. Đôi khi các ứng dụng email không đọc bất kỳ kiểu đệm nào mà bạn áp dụng cho hình ảnh để tránh mọi định dạng kỳ lạ!

Ngoài ra tôi đã tìm thấy dòng bên dưới các liên kết đặc biệt khó chịu vì vậy nếu bạn áp dụng <style = "text-trang trí: none; color: #whthing màu bạn muốn ở đây!" > nó sẽ loại bỏ các dòng và cung cấp cho bạn giao diện mong muốn.

Có rất nhiều có thể thực sự lộn xộn với tất cả các giao diện.