2010-05-29 50 views
67

HTML/CSS cho bản tin email html có cần phải ở định dạng bảng hay không hoặc tôi có thể sử dụng DIV với sự đảm bảo bằng nhau để hiển thị tốt ứng dụng email khách chéo không? Tôi đã tải xuống một số mẫu để xem chúng được thực hiện như thế nào, dựa trên đó để nền tảng của riêng tôi và tất cả chúng đều có vẻ sử dụng bảng.Email HTML: bảng hoặc div?

Bất kỳ thông tin chi tiết nào được đánh giá cao, cảm ơn!

+2

Điều này cực kỳ toàn diện: [http://mailchimp.com/resources/guides/email-marketing-field-guide](http://mailchimp.com/resources/guides/email-marketing-field-guide) –

+0

Rất hữu ích. Nhúng CSS vào trong thẻ body. Ai đã nghĩ! – aaandre

+0

URL đã thay đổi: http://mailchimp.com/resources/guides/email-marketing-field-guide/ – JasonB

Trả lời

129

Khi nói đến email HTML, lưu ý rằng tất cả các phương pháp hay nhất từ ​​phát triển web sẽ xuất hiện ngoài cửa sổ. Để làm cho giao diện phù hợp, bạn nên:

  1. Sử dụng bảng dựa bố trí
  2. Sử dụng cũ-học phong cách cho các bảng
  3. CHỈ sử dụng inline-phong cách, và chỉ rất đơn giản như vậy thuộc tính. <style> -tags được loại bỏ bởi nhiều khách hàng.
  4. Bỏ qua sử dụng <html>, <head><body> - Chúng sẽ bị loại bỏ bởi hầu hết khách hàng.
  5. Nếu bạn nhúng hình ảnh, hãy thử đảm bảo rằng e-mail có vẻ phong nha ngay cả khi hình ảnh không được tải. Nhiều khách hàng yêu cầu người dùng đánh dấu email là "an toàn" trước khi hiển thị hình ảnh.

Bạn có thể đọc các phiên bản chi tiết hơn về những điểm trên đây:

+3

Điều này đúng. Outlook 2007 là một trong những điều tồi tệ nhất trong số đó (và hầu hết đều khá tệ ...). – Max

+4

Và không có hình nền (cảm ơn triển vọng nhiều 2010). –

+3

Các quy tắc này là GOLD tinh khiết khi tạo email HTML/CSS. Cảm ơn bạn. –

4

Nhiều ứng dụng email khách không thể hiển thị css. Tôi sẽ sử dụng các bảng để định dạng thư của bạn và sử dụng hình ảnh cho bất kỳ thứ gì khác.

+1

Bạn không thể sử dụng hình ảnh trong email theo mặc định; ứng dụng thư khách sẽ chặn chúng cho đến khi người dùng đánh dấu người gửi là an toàn. Gần như tất cả các khách hàng phổ biến đều hỗ trợ CSS nội tuyến giới hạn. –

+0

Khách hàng cũ hơn không và nhiều người dùng doanh nghiệp vẫn sử dụng chúng. Và không, không phải mọi khách hàng đều không hiển thị hình ảnh. Nó chỉ là một bước để bảo mật bổ sung, nhưng khách hàng như iPhone không có lý do để chặn hình ảnh. – fb55

+0

[Gmail hiện hiển thị hình ảnh] (http://gmailblog.blogspot.ch/2013/12/images-now-showing.html) :-) – rds

9

Giống như tất cả mọi người ở đây đã cho biết, bảng sử dụng và nội tuyến tất cả css của bạn ... nhưng có một hệ sinh thái của các ứng dụng email để giúp bạn tạo email.

Tôi đã sử dụng Mailrox (https://www.mailrox.com/) đối với hầu hết email của tôi gần đây và dường như khá tốt và xuất ra các email HTML hoàn hảo, nếu bạn xây dựng một email từ thiết kế, mặc dù nó đang ở giai đoạn beta.

Bạn cũng có thể thử các mẫu được tạo sẵn từ Mailchimp hoặc Campaign Monitor, nhưng có vẻ như bạn có thiết kế cho email của mình để Mailrox có thể là tốt nhất.

Nếu bạn thực sự muốn xây dựng email, tôi muốn nói hầu hết những gì bạn biết về thiết kế web hiện đại và bố cục bảng chính và sử dụng liên kết từ PatrikAkerstrand.

Litmus cũng tuyệt vời để thử nghiệm các thiết kế được mã hóa bằng tay của bạn. Họ cung cấp cho bạn xem trước email của bạn trong (khá nhiều) tất cả các ứng dụng email.

Hy vọng điều này sẽ hữu ích.

1

Như đã được đề cập - email HTML của bạn phải được tạo bằng bảng (chứ không phải div). Bạn cũng có thể thêm CSS - cả bằng cách sử dụng biểu định kiểu bên ngoài, nhưng điều này sẽ không được tất cả các ứng dụng email khách chọn, do đó, thực sự đáng tin cậy hơn khi thêm css của bạn vào dòng.Ngay cả khi làm như vậy, một số thuộc tính có thể bị bỏ qua bởi một số ứng dụng email nhất định, do đó, đặt cược tốt nhất của bạn vẫn đang sử dụng các thuộc tính HTML bất cứ khi nào chúng có sẵn. "Bạn phải làm điều này vì một số khách hàng, chẳng hạn như Gmail, sẽ bỏ qua hoặc loại bỏ nội dung thẻ của bạn hoặc bỏ qua chúng." Nguồn: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978

Điều đó sang một bên, tôi cũng đã học qua thử và sai rằng ngay cả hình ảnh phải được cắt thành kích thước chính xác mà bạn muốn chúng hiển thị trong email của bạn. Outlook nếu khủng khiếp tại chọn lên các thuộc tính HTML cho chiều rộng/chiều cao cho hình ảnh, và tôi đã nhìn thấy một vài email khó chịu kéo dài, chỉ vì các thuộc tính này đã bị bỏ qua và hình ảnh được hiển thị kích thước đầy đủ.