Hướng dẫn do html emails need body tag? - email html có cần thẻ body không?

Giới thiệu

Bạn đã xây dựng rất nhiều trang web, bạn có thể viết HTML và CSS trong giấc ngủ và bạn có một poster lớn trên bức tường của Jeffrey Zeldman.

Vì vậy, làm thế nào khó khăn để xây dựng một email HTML?

Chà, với tất cả các trình duyệt web và khách hàng email hiện có vào ngày hôm nay, nó khó hơn bạn nghĩ.

Chương 1

Điều gì khó khăn về việc mã hóa email HTML?

Trong thế giới thiết kế web rộng lớn hơn, chúng tôi đã trải qua các cuộc chiến trình duyệt nơi Netscape và Internet Explorer đã chiến đấu với nhau để giới thiệu các cách cạnh tranh để mã hóa mọi thứ. Nhờ dự án tiêu chuẩn web và các nỗ lực liên quan, trình duyệt web hiện đại phù hợp hơn nhiều so với mười năm trước.

Thật không may, trong khi chiến tranh đó đang được chiến đấu, các ứng dụng email như Outlook và Lotus Notes không được tìm thấy, ẩn ở một góc nào đó, bị bỏ lại phía sau.

Thậm chí tệ hơn là không cố gắng cải thiện kết xuất HTML và CSS của họ, một số ứng dụng email đã thực sự đi ngược. Mười ba năm trước, Microsoft đã quyết định Outlook 2007 sẽ ngừng sử dụng Internet Explorer để hiển thị email HTML. Trước khi bạn cảm thấy phấn khích, họ đã thay thế nó bằng Microsoft Word. Có từ Microsoft Word: Trình xử lý Word. Trong một phiên bản, Outlook đã chuyển từ khá và dễ hiểu, đến hết sức khủng khiếp khi hiển thị email HTML từ bất kỳ ai ngoại trừ người dùng Outlook khác.

Outlook vẫn sử dụng công cụ kết xuất Microsoft Word trong tất cả các ứng dụng máy tính để bàn Windows Windows, với mỗi lần lặp được cung cấp một số phiên bản (ngoại trừ mới nhất: Outlook 2016 và 2019 là như nhau, rất nhiều cho sự mất tinh thần của chúng tôi).

Và Outlook vẫn là một ứng dụng email cực kỳ phổ biến, nhưng điều đó giới thiệu nhiều vấn đề hơn nữa: Xây dựng HTML cho email có nghĩa là bạn đang xử lý hơn bốn hoặc năm trình duyệt web lớn và 12 đến 15 ứng dụng email khác nhau, mỗi ứng dụng có thị phần vững chắc. Litmus đã từng đặt ra rằng nếu bạn đếm mọi lần lặp lại của mô hình ứng dụng/trình duyệt/sản phẩm email, đó sẽ là 15.000 khả năng khác nhau!

Một số trong số họ là tuyệt vời, như Apple Mail. Một thiết kế hoạt động trong Safari sẽ hoàn hảo trong Apple Mail. Một số, như triển vọng, gây ra căng thẳng và lo lắng cho mỗi nhà phát triển email. Gmail hiện có thị phần cao nhất (xem phần còn lại của sự cố trên trang web thị phần email của Litmus) và Gmail có những điều phức tạp riêng. Ở giữa là một loạt các ràng buộc kết xuất khác nhau, kỳ quặc và sự không nhất quán.

Không cần phải nói, có một thách thức đối với các nhà thiết kế web: Làm thế nào để bạn thực hiện các kỹ năng thiết kế web năm 2020 của mình và áp dụng chúng cho các ứng dụng gửi email với các khả năng của thiên niên kỷ trước?

Don Tiết tuyệt vọng, bởi vì nó có thể thành công với một chút kiến ​​thức và sẵn sàng kiểm tra. Bạn thậm chí có thể lưu chân tóc của bạn.

chương 2

Xây dựng một mẫu email HTML hiệu quả

Nếu bạn đã xây dựng các trang web đủ lâu để ghi nhớ những ngày vinh quang của Geocities và Angelfire, bạn có thể đã xây dựng các trang web đầu tiên của mình bằng cách sử dụng các bảng để bố cục. Xây dựng email HTML ngày hôm nay sẽ đưa bạn trở lại những thời gian bá đạo đó, mặc dù ít sử dụng thẻ.

Hãy tiếp tục và dán một dấu trang trong phần này, bởi vì bạn sẽ muốn quay lại nó mỗi khi bạn bắt đầu xây dựng một mẫu email mới. Chúng tôi sẽ bao gồm các mẹo và thủ thuật giúp có thể đạt được kết quả tốt cho càng nhiều người đọc của bạn hoặc khách hàng của bạn càng tốt.

Máy khách duy nhất vẫn cần các bảng HTML là triển vọng cho Windows Desktop, vì vậy cho đến khi điều đó không được chấp nhận, bạn sẽ cần phải hiểu cách các bảng hiển thị của ứng dụng email, ngay cả khi đó chỉ là dự phòng bố trí bảng cho Outlook.

Nhưng trước tiên, điều quan trọng là phải biết bạn đang gửi cho ai.

Xác định khán giả của bạn thói quen xem.

Bước đầu tiên trong việc xây dựng email HTML thành công là biết nó sẽ được đọc như thế nào. Ví dụ, nếu tất cả các thuê bao sẽ đọc email của bạn trên email Outlook của công ty của họ, ví dụ, điều này có thể hướng bạn về việc sử dụng Plaintext.

Trong hầu hết các trường hợp, sẽ có một sự kết hợp của các ứng dụng email được sử dụng, nhưng có một vài cách để tìm hiểu. Màn hình chiến dịch xuất bản một số số liệu thống kê tổng thể cho việc sử dụng ứng dụng ứng dụng email cung cấp một cái nhìn tổng quan rộng rãi, mặc dù có một số hạn chế. Hoặc bạn có thể xem trang web thị phần email Litmus.

Mặc dù vậy, không có gì đảm bảo rằng những điều này phản ánh khán giả của bạn. Giám sát chiến dịch và một loạt các nhà cung cấp dịch vụ email khác sẽ cung cấp cho bạn một báo cáo cho từng chiến dịch, liệt kê ứng dụng email cho mỗi thuê bao nếu có.

Những gì bạn đang tìm kiếm trong các báo cáo này là mẫu số chung thấp nhất của bạn. Ví dụ, nếu có 30% sử dụng Lotus Notes 7, bạn sẽ cần đảm bảo rằng bạn đặc biệt kiểm tra trong máy khách đó trước khi gửi. Một phiên bản cụ thể của một ứng dụng email có thể có liên quan, Outlook 2003 sẽ khiến bạn ít đau đầu hơn nhiều so với Outlook 2007 và trong một số trường hợp, danh sách của bạn chỉ có thể sử dụng một phiên bản.

Nếu bạn không bao giờ gửi đến danh sách này trước đây, bạn có thể phải kiểm tra mọi khách hàng bạn có thể tìm thấy và đưa ra một số dự đoán có giáo dục về loại đối tượng mà bạn đang giao dịch. Có khả năng họ đang sử dụng điện thoại di động để đọc email hoặc máy chủ công ty bị khóa? Có thể họ là tất cả các cá nhân sử dụng địa chỉ Outlook.com và Yahoo, ít nhất là dễ kiểm tra. Bất cứ điều gì bạn biết về đối tượng của mình, hãy tự ghi chú về những ứng dụng email mà bạn muốn kiểm tra hầu hết mỗi khi bạn gửi.

Thật đáng nhớ rằng trong vài năm qua, số lượng người nhận đọc email trên thiết bị di động của họ đã tăng lên 50% thời gian. Ở một số thị trường, hơn 70% email được đọc trên thiết bị di động. Đảm bảo email của bạn đáp ứng sẽ mang lại trải nghiệm khách hàng tốt hơn, đặc biệt là khi tiêu thụ email di động chỉ tiếp tục tăng.

Dựa vào các bảng, và không chỉ cho dữ liệu.

Hướng dẫn quan trọng nhất cho các email HTML là bố cục CSS chỉ không hoạt động. Các ứng dụng email chính không cung cấp hỗ trợ nào cả, hoặc mang nó theo vô số cách khác nhau một cách bực bội.

Sử dụng CSS thay vì các bảng là tiếng kêu của cuộc chiến tiêu chuẩn web, nhưng mã hóa email HTML có nghĩa là giơ cờ trắng và đưa ra. Trừ khi bạn đang xây dựng một email cực kỳ đơn giản hoặc toàn bộ khán giả của bạn đang sử dụng một công cụ đọc email hiện đại hơn , nó trở lại với tất cả các thẻ ____99 bao gồm.

Gmail, Outlook, Lotus Notes, và không nghi ngờ gì nữa, nhiều người khác đều có vấn đề lớn với các yếu tố nổi, và thậm chí cực kỳ không đáng tin cậy với lợi nhuận và đệm. Bạn sẽ muốn thiết lập một số bảng HTML cấu trúc để đảm bảo bạn kết thúc với một email ít nhất là giữ tốt với nhau.

Có một số vấn đề sử dụng bảng, như đã học được một cách khó khăn của nhiều nhà thiết kế. Dưới đây là một vài mẹo để xử lý các bảng trong một email.

1. Đặt chiều rộng trong mỗi ô thay vì trên bảng.

Sự kết hợp của chiều rộng trên bảng, chiều rộng trên các ô, lề HTML và đệm, và lề CSS và đệm có thể hỗn loạn. Đơn giản hóa mã của bạn và cuộc sống của bạn chỉ bằng cách đặt trên mỗi ô:

Các ứng dụng email không đáng tin cậy khi suy ra độ rộng chính xác của một ô, do đó, nó an toàn nhất để đặt rõ ràng một. Chiều rộng pixel là đáng tin cậy nhất, vì sử dụng tỷ lệ phần trăm có thể cung cấp cho bạn một số kết quả lập dị, đặc biệt là khi sử dụng các bảng lồng nhau.

Để đặt đệm ô của bạn, hoặc đặt nó một lần trên toàn bộ bảng với tham số

p {
  line-height: 1.5em;
  margin: 0px 0px 10px 0px;
}

2. Bàn tổ cho khoảng cách nhất quán.

Ngay cả khi tỷ suất lợi nhuận và đệm được hỗ trợ bởi hầu hết các ứng dụng email, kết quả sẽ không nhất quán. Nếu khoảng cách là rất quan trọng đối với bạn, hãy thử làm tổ trong bảng chính của bạn. Nó trường học cũ, nhưng nó đã thử và đúng.

3. Đặt một màu nền trên bảng container.

Một số ứng dụng email sẽ bỏ qua một nền tảng trên thẻ

p {
  line-height: 1.5em;
  margin: 0px 0px 10px 0px;
}

p {
  line-height: 1.5em;
  margin: 0px 0px 10px 0px;
}

4. Vấn đề khoảng trắng.

Về mặt lý thuyết, khoảng trắng trong các tệp HTML nên được bỏ qua. Nhưng trong thực tế, nó có thể gây ra tất cả các loại quirks kết xuất, đặc biệt là nếu bạn có khoảng trắng giữa các ô bảng. Tạo thói quen loại bỏ bất kỳ khoảng trống nào giữa thẻ đóng của một ô và thẻ mở của bên tiếp theo để tránh các khoảng trống khó coi và các vấn đề bố cục.

Sử dụng CSS nội tuyến.

Đây là nơi C để xếp tầng trong CSS có ích. Áp dụng một kiểu theo dòng mang lại ưu tiên cho các kiểu xa hơn (chẳng hạn như kiểu máy khách webmail) và cũng hoạt động xung quanh các ứng dụng email loại bỏ CSS từ các tệp CSS đầu hoặc bên ngoài.

Hiện tại, ứng dụng email chính duy nhất loại bỏ tất cả các loại CSS khác, các thẻ nhúng vào đầu hoặc cơ thể và các kiểu dáng được liên kết bên ngoài là ứng dụng Gmail có địa chỉ không gmail (thường được gọi là Ganga).

Gmail không hỗ trợ bảng hiệu kiểu bên ngoài hoặc thẻ

p {
  line-height: 1.5em;
  margin: 0px 0px 10px 0px;
}

p {
  line-height: 1.5em;
  margin: 0px 0px 10px 0px;
}

p {
  line-height: 1.5em;
  margin: 0px 0px 10px 0px;
}

Ở đây, một sự bồi dưỡng nhanh chóng trong trường hợp bạn không sử dụng CSS Inline trong một thời gian (hoặc bao giờ, nếu bạn bắt đầu thiết kế web sau năm 2000).

Nội tuyến CSS: những điều cơ bản

Một kiểu được áp dụng cho các phần tử

p {
  line-height: 1.5em;
  margin: 0px 0px 10px 0px;
}

p {
  line-height: 1.5em;
  margin: 0px 0px 10px 0px;
}

Các phong cách này sẽ áp dụng cho tất cả các đoạn trong trang của bạn, nhưng nếu kiểu bị loại bỏ, các đoạn văn sẽ được tạo kiểu theo bất kỳ kiểu mặc định nào mà ứng dụng email sử dụng hoặc bảng kiểu khách hàng của WebMail.

Áp dụng phong cách theo dòng có nghĩa là tạo kiểu cho từng phần tử

p {
  line-height: 1.5em;
  margin: 0px 0px 10px 0px;
}

Lorem

Bạn sẽ đạt được kết quả phù hợp hơn nếu bạn áp dụng các kiểu theo cách này cho mọi yếu tố trong email HTML của bạn.

Khi bạn bắt đầu làm điều này, bạn sẽ nhanh chóng nhận ra rằng công việc mệt mỏi của nó lặp đi lặp lại các phong cách giống nhau trong HTML của bạn (rất giống các thẻ

p {
  line-height: 1.5em;
  margin: 0px 0px 10px 0px;
}

• Don Tiết nội tuyến phong cách của bạn cho đến khi bạn hoàn thành mã hóa. Phát triển toàn bộ thiết kế bằng thẻ

  p {
    line-height: 1.5em;
    margin: 0px 0px 10px 0px;
  }

  3 trong đầu và chỉ khi bạn đã thực hiện các điều chỉnh cuối cùng, bạn mới áp dụng chúng theo dòng. Điều này tiết kiệm phải quay lại và chỉnh sửa 20 trường hợp của cùng một phong cách.
• Sử dụng dịch vụ email hoặc công cụ sẽ tự động nội tuyến CSS của bạn cho bạn. Ví dụ, Màn hình chiến dịch có các công cụ để lấy các kiểu từ đầu hoặc tệp bên ngoài và tự động áp dụng từng kiểu cho các yếu tố phù hợp khi bạn nhập chiến dịch.

Có một số công cụ sẽ lấy một trang HTML và bảng kiểu, sau đó nhổ trang của bạn với tất cả các CSS. Bạn có thể sử dụng INLINER CSS giám sát chiến dịch hoặc một mục yêu thích khác của chúng tôi, Premaierer, cũng sẽ cung cấp cho bạn lời khuyên hữu ích về CSS không được hỗ trợ.

Có một số phong cách nhất định thực hiện nội tuyến kém, bạn không thể chỉ định: các trạng thái lơ lửng cho các liên kết, làm ví dụ. Nó nói chung đáng để giữ các phong cách trong đầu cũng như phù hợp với kích thước tải xuống vượt trội hơn lợi ích của việc bao quát tất cả các căn cứ của bạn.

Tránh dựa vào hình ảnh cho mẫu HTML của bạn.

Bạn có nhớ thuật ngữ thiết kế web & nbsp; cắt không? Đây là khi các trang web từng được xây dựng bằng cách thiết kế một hình ảnh có kích thước trang và cắt nó thành các phần nhỏ, sau đó được lắp lại vào các bảng và đặt trên một trang.

Cắt lát được sử dụng là một kỹ thuật rất phổ biến để làm việc xung quanh sự không nhất quán của trình duyệt. Đáng buồn thay, kỹ thuật tương tự sống trong nhiều nhà thiết kế email, hộp công cụ, và thậm chí các công ty lớn nhất gửi email HTML không gì khác hơn là một bộ sưu tập hình ảnh.

Mặc dù nó chắc chắn làm giảm thời gian phát triển email, những lợi ích kết thúc ở đó. Không giống như các trình duyệt web, ứng dụng gửi email thường xuyên chặn hình ảnh từ khi tải xuống cho đến khi người đọc nhấp vào một nút hoặc liên kết đặc biệt, như trong hình ảnh bên dưới.

Nghiên cứu trong vài năm qua đã chỉ ra rằng một tỷ lệ đáng kể (một số ước tính lên tới 40%) người nhận email không bao giờ cho phép hình ảnh. Thêm vào đó, tất cả những người không nhận ra họ có thể hiển thị hình ảnh và bạn có rất nhiều người nhận sẽ không nhìn thấy logo hoặc hình ảnh tiêu đề của bạn, ít hơn phần còn lại của email của bạn nếu nó hoàn toàn dựa trên hình ảnh.

Các cài đặt chặn hình ảnh mặc định cho các ứng dụng email khác nhau được hiển thị trong bảng bên dưới. Chúng tôi sẽ giải thích những gì cột cuối cùng (hiển thị IMG người gửi đáng tin cậy) có nghĩa là trong phần tiếp theo. Hiện tại, chỉ cần chú ý đến cột thứ hai: Điều này cho thấy liệu hình ảnh có được hiển thị theo mặc định trong mỗi máy khách hay không.

Chặn hình ảnh mặc định trong ứng dụng email

Không

Yahoo mail beta

Windows Live Mail

Gmail

Outlook.com

AOL Web

Trong các chiến dịch email thực tế của bạn, bạn có thể làm như vậy. Để hữu ích hơn, hãy đặt một trang trên trang web của bạn với các hướng dẫn về cách thêm địa chỉ vào danh sách trắng cho các ứng dụng email khác nhau và liên kết với nó.

2. Sống mà không có hình ảnh.

Sẽ luôn có những người mà cho dù là do sự lựa chọn hay cơ hội không bao giờ cho phép hình ảnh cho các chiến dịch của bạn, vì vậy thiết kế cần tính đến điều đó. Thực hiện theo một vài hướng dẫn đơn giản để cải thiện kết quả của bạn:

Don Tiết sử dụng một hình ảnh làm mục đầu tiên trong email của bạn. Hãy nhớ rằng nhiều ứng dụng email sẽ sử dụng một cửa sổ xem trước nhỏ và nếu phần tử duy nhất phù hợp với hình ảnh không hiển thị, email cũng có thể trống. Thay vào đó, hãy đảm bảo bắt đầu thân email với một số văn bản trước để đưa ra một bản xem trước thích hợp và lôi kéo nhiều hơn. Remember that many email clients will use a small preview window, and if the only element that fits there is an undisplayed image, the email might as well be blank. Instead, make sure to start the email body with some preheader text to give a proper preview and entice more opens.

Sử dụng các thuộc tính ALT. Giống như bạn làm cho một trang web, hãy đảm bảo có các thuộc tính ALT hữu ích cho mỗi hình ảnh. Trong một số trường hợp, họ sẽ hiển thị khi hình ảnh bị chặn và có thể cung cấp một bản sao lưu tốt. Họ đã giành chiến thắng luôn luôn được hiển thị, hoặc có thể không được hiển thị đầy đủ. Bạn có thể thấy các ứng dụng email phổ biến sẽ xử lý các thuộc tính ALT trong bảng dưới đây như thế nào. Just like you do for a website, make sure to have useful alt attributes for each image. In some cases, they’ll show up when the image is blocked, and can provide a good backup. They won’t always be displayed, or may not be displayed in full. You can see how common email clients will handle alt attributes in the table below.

Hỗ trợ thuộc tính Alt theo ứng dụng email

Windows Live Mail If you have an image that contains important content (as opposed to being a decorative element), use a text caption to describe it. That way, even if the image is not displayed—and even if the alt text isn’t shown—readers will have access to the message.

Gmail If you have a balance of HTML text and some images, then the email is useful even without images. If the email entirely consists of images that are blocked, the email is a waste of time and might draw some unsubscribes.

Đôi khi Sometimes imagery is essential. For a great example, see the FontShop newsletter, which displays samples of new fonts. Without the images, it’s a lot less useful—so they’re definitely worth including. The FontShop audience is also more likely to be displaying images at all times and using more progressive email clients.

Tùy chọn về chiều dài văn bản.

Outlook.com

Thư Apple Web designers often say that they personally know better than to send purely image emails, but their clients want everything to look perfect. Here’s the point—it’s the job of designers to show clients why that’s a bad idea. Show them what their email will look like without images, and ask them, “Would you click through on this blank page?”

Thay thế văn bản alt bằng biểu tượng dấu câu hỏi.

Thunderbird

Áp dụng kiểu phông chữ CSS cho văn bản alt.Spam filters often use the ratio of images versus text as a flag to gauge whether an email is legitimate. All-image emails are more likely to be marked as spam versus mixed content emails.

Outlook 2007

Loại của

Thay thế văn bản alt bằng tin nhắn bảo mật.

Outlook 2003

Đúng

Bạn sẽ muốn đề cập đến tài nguyên này khi xây dựng các mẫu như một cách nhanh chóng để xem bộ chọn và thuộc tính nào an toàn để làm việc và những người bạn cần xem. Thậm chí khó khăn hơn, bạn sẽ thấy sự hỗ trợ không nhất quán cho một số yếu tố, sẽ hoạt động trong một số kết hợp nhất định nhưng không phải ở những yếu tố khác. Vì vậy, những gì hoạt động trong một email có thể thất bại trong một email khác.

Không có gì tránh được quá trình thử nghiệm, nhưng các biểu đồ hỗ trợ CSS sẽ cắt giảm rất nhiều sự thất vọng cho bạn. Khi bạn đã xây dựng một vài mẫu, bạn sẽ bắt đầu biết từ bộ nhớ theo cách nhanh nhất để đạt được kết quả vững chắc.

Khách hàng webmail có thể là một trường hợp đặc biệt khi kết xuất email HTML. Ví dụ, Gmail có ít nhất hai phiên bản khác nhau và trong thử nghiệm của Màn hình chiến dịch, chúng tôi đã thấy các biến thể trong cách cùng một email xuất hiện tùy thuộc vào phiên bản bạn làm việc.

Chương 4

Công nghệ internet hiện đại trong email

Các trang web hiện đại chứa nhiều hơn HTML, CSS và hình ảnh. JavaScript, âm thanh, flash, video, hình ảnh động và các biểu mẫu đều là một phần của bộ công cụ thiết kế. Điều nào trong số này làm việc trong ứng dụng email? Phần này phác thảo trạng thái chơi hiện tại.

Ngay cả khi bạn có thể sử dụng một kỹ thuật hoặc phương tiện nhất định, bạn có thể không muốn. Mọi người thường truy cập trang web của bạn theo lựa chọn. Họ đi khi họ muốn và với sự hiểu biết về những gì mong đợi.

Một email là một môi trường hoàn toàn khác với một trang web. Có âm thanh hoặc video phát bên trong email có nhiều khả năng gây khó chịu hơn là giải trí. Đối với một số email và một số người đăng ký, điều đó có thể ổn, nhưng rất thận trọng về việc phá vỡ sự mong đợi của độc giả của bạn.

Hãy cùng xem cách công nghệ internet hiện đại có thể hoặc không thể phá vỡ những kỳ vọng đó.

JavaScript trong email

Khi nói đến kịch bản, chúng ta có thể đưa ra một tuyên bố bao quát: kịch bản không được hỗ trợ trong email.

Điều này hầu như không đáng ngạc nhiên, với những rủi ro bảo mật rõ ràng liên quan đến một tập lệnh chạy bên trong một ứng dụng có hàng tấn thông tin cá nhân được lưu trữ trong đó.

Các máy khách webmail chủ yếu đang chạy giao diện trong JavaScript và aren quan tâm đến email của bạn can thiệp vào điều đó. Và các bộ lọc trên máy khách máy tính để bàn thường coi JavaScript là một chỉ số của thư rác hoặc email lừa đảo.

Ngay cả trong những trường hợp nó có thể chạy, thực sự có rất ít lợi ích cho kịch bản trong email. Giữ email của bạn dưới dạng HTML và CSS thẳng, và tránh những rắc rối.

Flash trong email

Trong thị trường trình duyệt web, Adobe Flash gần như có mặt khắp nơi, nhưng trong thế giới khách hàng email, Flash hầu như không tồn tại. Trong hầu hết các trường hợp, nó hoàn toàn vắng mặt, và ngay cả hình ảnh dự phòng, bạn có thể chọn won won hiển thị.

Sử dụng flash trong email của bạn nên tránh cho hiện tại, vì nó không hoạt động. Không có gì đáng ngạc nhiên, điều này có ảnh hưởng đáng kể đến hiệu quả của video trong email, đó là chủ đề tiếp theo của chúng tôi.

Video trong email

Video có thể là một phương tiện rất thuyết phục, miêu tả hành động thay vì chỉ hiển thị một bức ảnh tĩnh hoặc mô tả văn bản. Cho dù mọi người thực sự muốn xem video trong email của họ chứ không phải trên trang web là một câu hỏi mở.

Vào năm 2020, có rất nhiều cách khác nhau mà video có thể được đưa vào một tin nhắn email, nhưng, trên thực tế, hầu hết trong số họ đã giành được công việc cho phần lớn người nhận. Màn hình chiến dịch đã thử nghiệm các kỹ thuật và định dạng sau đây cho video trực tiếp trong một email: flash, quicktime, phương tiện Windows, GIF hoạt hình (được phát trực tuyến và nhúng), applet Java, MPEG được nhúng và video HTML5 phát trực tuyến. Các kết quả chi tiết được hiển thị trong hướng dẫn này.

Như bạn thấy, các GIF hoạt hình có sự hỗ trợ vững chắc, mặc dù chúng vẫn phải chịu sự chặn hình ảnh nhiều như hình ảnh tĩnh. Ngoài ra, Outlook trên Windows sẽ chỉ hiển thị khung đầu tiên của hình ảnh động.

Có thể là khôn ngoan khi vẫn thực hiện một cách tiếp cận đơn giản hơn: sử dụng hình thu nhỏ của video hoặc chụp ảnh chụp màn hình của người chơi (lý tưởng nhất là có nút phát) và đưa nó vào email của bạn. Làm cho nó liên kết đến video trên trang web của bạn (và liên kết một chú thích bên dưới nó). Nó có một cú nhấp chuột bổ sung, nhưng nó được đảm bảo để làm việc cho tất cả mọi người.

Hình thức trong email

Có một email chứa một biểu mẫu trực tiếp là một ý tưởng tuyệt vời. Nó dễ dàng cho độc giả của bạn điền vào một số chi tiết, RSVP hoặc trả lời khảo sát. Thật không may, sự hỗ trợ cho các biểu mẫu trong ứng dụng email là khá không nhất quán. Một số khách hàng sẽ đưa ra các cảnh báo bảo mật trông đáng sợ khi người đọc cố gắng sử dụng một biểu mẫu và những người khác sẽ chỉ vô hiệu hóa biểu mẫu để nó không thể được gửi.

Rất nhiều người có thể sử dụng một hình thức, nhưng phần còn lại sẽ thấy một hình thức không có gì cả, đó là một trải nghiệm khá tệ. Cách tiếp cận được đề xuất là liên kết đến một biểu mẫu trên trang web của bạn, nơi bạn biết nó sẽ hoạt động. Mức độ hỗ trợ biểu mẫu trong khách hàng chung có thể được tìm thấy ở đây.

Chương 5

Kiểm tra email HTML của bạn

Nếu bạn học chỉ một bài học từ hướng dẫn này, hãy để nó là thế này: Luôn luôn, luôn luôn, luôn luôn kiểm tra email của bạn trước khi bạn gửi chúng ra.

Cảm giác chìm sau khi nhấn gửi và sau đó phát hiện ra một lỗi đánh máy trong tiêu đề đầu tiên là khủng khiếp. Và danh sách càng lớn, hố càng lớn trong dạ dày của bạn.

Khi một email đã được gửi đi, nó không thể lấy lại được. Một trang web có thể được cập nhật trong một khoảnh khắc, nhưng các email sống cuộc sống riêng biệt của họ trong một triệu hộp thư đến khác nhau, ngoài tầm với.

Có khá nhiều phương pháp và yếu tố để kiểm tra. Rõ ràng, bạn sẽ có tất cả các bản sao được chứng minh và kiểm tra lại bởi một người khác. Nhưng khi nói đến thiết kế và xây dựng, thử nghiệm có thể hơi tốn thời gian. Với rất nhiều ứng dụng email khác nhau để xem, các phiên bản của những máy khách và sự khác biệt về nền tảng, nó có thể quá sức.

May mắn thay, có một vài dịch vụ tuyệt vời xung quanh mang lại nhiều nỗi đau khi kiểm tra email của bạn trong nhiều ứng dụng email:

• Kiểm tra email Litmus
• Email về kiểm tra email axit
• Thiết kế giám sát chiến dịch và thử nghiệm thư rác

Mỗi dịch vụ sẽ lấy email HTML của bạn và cung cấp lại cho bạn một loạt ảnh chụp màn hình cho thấy cách email của bạn hiển thị trong một số ứng dụng email khác nhau. Bạn thường có thể cuộn qua toàn bộ email, xem nó với hình ảnh bị chặn hoặc hình ảnh được tải và có được một ý tưởng khá tốt nếu có một vấn đề bạn cần khắc phục.

Có nhiều thời gian hơn và truy cập vào tất cả nhiều ứng dụng email đã được thiết lập, sẽ tốt hơn nếu tương tác vật lý với từng ứng dụng. Nhưng, trong thực tế, các dịch vụ thử nghiệm này là một trình tiết kiệm thời gian rất lớn và rất đáng giá.

Trong trường hợp rất có thể là một cái gì đó không hoạt động đúng (nội dung bị cắt hoặc hiển thị sai vị trí hoặc bất kỳ số lượng hành vi kỳ quặc nào), quá trình khắc phục sự cố bắt đầu. Nếu bạn may mắn, khách hàng có vấn đề sẽ là một người như Gmail hoặc Outlook mà dễ dàng bắt tay.

Sau đó, bạn có thể điều chỉnh và kiểm tra một vài lần để làm cho nó hoạt động trở lại, và có lẽ chạy một thử nghiệm thiết kế đầy đủ khác để đảm bảo không có gì khác bị hỏng trong quá trình sửa chữa.

Đôi khi nó sẽ là một máy khách khó khăn hơn, chẳng hạn như một phiên bản cụ thể của Lotus Notes. Đây có thể là khó khăn để khắc phục sự cố và bạn có thể cần sự giúp đỡ của người đọc hoặc đồng nghiệp, những người có thể chạy một số bài kiểm tra cho bạn.

Quá trình này có thể khá dài. Nhưng một khi bạn đã trải qua việc khắc phục sự cố mạnh mẽ cho mẫu của mình, nó có thể được sử dụng lại nhiều lần cho các chiến dịch trong tương lai và thường thích nghi với phù hợp với nhiều thiết kế. Vì vậy, thời gian sẽ được chi tiêu tốt.

Chương 6

Xây dựng bản tin Henchman hiện đại

Trong phần cuối cùng của chương này, chúng tôi sẽ xem xét mã cần thiết cho bản tin Henchman hiện đại, đã được phát triển và thử nghiệm theo các hướng dẫn mà chúng tôi đã đề cập.

Bạn có thể tải xuống mẫu này miễn phí với kho lưu trữ mã cho cuốn sách này13 và sử dụng nó làm cơ sở cho các thiết kế của riêng bạn, nếu bạn muốn.

Đối với khách hàng của chúng tôi, tạp chí Henchman hiện đại, chúng tôi đang cố gắng tạo ra một mẫu chắc chắn sẽ được sử dụng lại mỗi tháng mà không cần phải có thêm thời gian trong thiết kế hoặc thử nghiệm. Vì vậy, chúng ta cần phát triển một email có cấu trúc có thể xử lý nội dung dài hơn hoặc ngắn hơn mà không bị phá vỡ. Hình 4.4 cho thấy một lời nhắc nhở về những gì chúng tôi muốn sản phẩm cuối cùng trông như thế nào.

Xây dựng khuôn khổ

Bắt đầu từ đầu, chúng tôi có một phần giới thiệu sẽ hiển thị trong khung xem trước cho hầu hết các độc giả. Nó sẽ chứa một danh sách đơn giản các nội dung cho email và một lời nhắc nhở về lý do tại sao mọi người nhận được bản tin.

Ngay cả khi hình ảnh tắt, văn bản đó sẽ được nhìn thấy, và đó là một cơ hội tuyệt vời để thuyết phục mọi người đọc tiếp. Chúng tôi cũng sẽ đặt một liên kết hủy đăng ký ngay lên hàng đầu, cho những người không còn quan tâm. Như chúng tôi đã thảo luận, nó tốt hơn rất nhiều khi để họ hủy đăng ký dễ dàng hơn là buộc họ đánh dấu nó là thư rác.

Bên dưới phần giới thiệu là Masthead, rộng 580 pixel. Điều đó đủ hẹp để có thể đọc được mà không cần cuộn ngang cho hầu hết các ứng dụng email. Rõ ràng một số độc giả di động sẽ đấu tranh, nhưng vì mục tiêu chính của chúng tôi là quảng bá sản phẩm của tháng và chúng tôi muốn sử dụng một bức ảnh lớn, chúng tôi có thể đi quá nhiều quá nhiều.

Khi bạn thiết kế cho khách hàng của riêng mình, bạn có thể sử dụng chiều rộng cột linh hoạt, nhưng hãy nhớ xem xét các mục tiêu của bạn và chuẩn bị để phù hợp với nội dung khác nhau.

Bố cục cho nội dung cơ thể khá đơn giản, về cơ bản là một cấu trúc hai cột, nhưng với ít nhất một phần trải dài trên toàn bộ chiều rộng cho quảng cáo sản phẩm.

Chúng tôi đã biết rằng phao CSS đã giành được công việc, vì vậy để xây dựng bố cục này, chúng tôi sẽ sử dụng các bảng để giữ nội dung. Để đảm bảo rằng chúng tôi có thể đặt một màu nền và hình ảnh (ít nhất là đối với một số ứng dụng email), chúng tôi bắt đầu với bảng container chiều rộng 100%:

Khoảng trắng

Có! Tôi đã đề cập trước đó rằng một số ứng dụng email có thể nhạy cảm với khoảng trắng trong HTML của bạn. Trong các ví dụ tiếp theo, tôi đã đưa ra đánh dấu cho khả năng đọc tối đa và nó vẫn hoạt động tốt trong các máy khách mà tôi đã thử nghiệm. Tuy nhiên, điều này có thể không đáng tin cậy, vì vậy nếu bạn đang điều chỉnh mẫu này và gặp phải mọi vấn đề về khoảng cách kỳ lạ, bạn nên thử loại bỏ khoảng trắng để xem điều đó có giúp ích gì không.I mentioned earlier that several email clients can be sensitive to whitespace in your HTML. In the examples that follow, I’ve laid out the markup for maximum readability, and it still works well in the clients I’ve tested. However, this can be unreliable, so if you are adapting this template and run into any weird spacing issues, you should try removing the whitespace to see if that helps.

Bên trong đó là bộ chứa nội dung chính của chúng tôi với chiều rộng cố định là 580 pixel:

Bạn có thể nhận thấy rằng chúng tôi sử dụng các thuộc tính HTML thay vì CSS ở đây để có kết quả tốt nhất. Các bảng làm tổ cho bố cục đáng tin cậy hơn chúng ta có thể đạt được, đặc biệt là với các ứng dụng email như Outlook và Lotus Notes.
Khi bạn đang xây dựng các mẫu của riêng mình, bạn nên kiểm tra trong Outlook 2007 (nếu bạn có thể) và gmail khi bạn tiến triển, để bạn tìm thấy bất kỳ vấn đề bố cục lớn nào sớm .
Đổ đầy các ô bảng với màu khối và thêm một số đường viền CSS để bạn có thể thấy cách bố cục được giữ lại với nhau khi bạn làm việc trên nó.
Thêm nội dung
Xử lý phần giới thiệu và tiêu đề toàn chiều rộng rất đơn giản, chúng có thể được thêm vào dưới dạng các hàng có chiều rộng đơn giản vào bảng nội dung:

  

    

      

        

          
You are receiving this email ... 
        
      
    
  


  

    

      

        

          
Modern
          
Henchman
        
        

          
In this issue:
          
Contents listing
        
      
    
  


  

    
Dưới đó, bố cục hai cột bắt đầu. Điều này trông giống như một công việc cho một bảng khác. Nesting một bàn khác cho phép chúng ta tạo phần đệm và lề nhất quán xung quanh bản sao cơ thể:



Điều này có vẻ phức tạp hơn nó. Chúng tôi tạo hai cột, một lần nữa cài đặt chiều rộng rõ ràng. Như tôi đã đề cập trước đây, để cho các ứng dụng email cố gắng tìm ra một yếu tố nên không bao giờ là một ý tưởng tốt, vì kết quả sẽ rất khác nhau.
Bí quyết cho cái gọi là bố cục hai cột của người Viking thực sự là nhiều cột, ẩn xung quanh cả hai mặt của nội dung để tạo ra máng xối và lề.
Hình 4.5 cho thấy khối nội dung có đường viền được bật. Tôi đã sử dụng tiện ích mở rộng thanh công cụ nhà phát triển web cho Firefox để hiển thị một đường viền xung quanh tất cả các ô bảng, điều này giúp dễ dàng hiểu được những gì đang diễn ra. Nếu bạn không bao giờ làm việc với các bố cục dựa trên bảng trước đây hoặc đã trục xuất chúng khỏi tâm trí của bạn, phần mở rộng này có thể giúp bạn hiểu được chúng khi bạn phát triển các mẫu email của mình.
Hình 4.5. Khối nội dung với các ô bảng được phác thảo
Như bạn có thể thấy, chúng tôi sử dụng tổng cộng sáu cột cho bố cục hai cột của chúng tôi. Tôi biết, nó xấu xí và trường học cũ, và khiến bạn cảm thấy hơi xấu khi nhìn vào nó. Tất cả chúng ta đều cảm thấy như vậy lần đầu tiên chúng ta quay lại bố cục bảng.
Nỗi buồn nôn cuối cùng sẽ vượt qua và bạn sẽ bị bỏ lại với bố cục hai cột hiển thị một cách đáng tin cậy trong tất cả các ứng dụng email chính. Mã cho khối nội dung toàn chiều rộng rất giống nhau, ngoại trừ việc nó chỉ sử dụng ba cột: một cho mỗi máng xối và một cho khu vực nội dung.
Khi bạn cần phân chia một khu vực nội dung xa hơn, tất cả những gì bạn cần làm là làm tổ một bảng khác. Trong ví dụ của chúng tôi, những người gửi cho một người bạn và các khối hủy đăng ký của các khối ở cuối email yêu cầu làm tổ một bảng một cột khác, như thế này:
Bố cục hoàn chỉnh được mô tả trong Hình 4.6.
Hình 4.6. Ảnh chụp màn hình của toàn bộ mẫu, với tất cả các ô bảng được phác thảo
Kiểm tra hạt cho mọi ứng dụng email
Trong việc xây dựng bất kỳ mẫu email HTML nào, bạn sẽ đạt được điểm quyết định. Cho rằng các cột được đặt đúng chỗ, và sẽ giữ tốt với nhau cho hầu hết mọi người, chúng tôi có thể ngừng gây rối cho các ứng dụng gửi email vào thời điểm này.
Nếu bạn và khách hàng của bạn ổn với một số biến thể trực quan nhỏ giữa các ứng dụng email, bạn có thể trở lại các kỹ thuật hiện đại hơn cho nội dung thực tế. Chỉ cần điền vào các tiêu đề và đoạn văn, tạo kiểu cho chúng trong CSS của bạn và để chúng được hiển thị theo phương tiện của khách hàng.
Hầu hết thời gian độc giả của bạn sẽ không so sánh email trong các chương trình khác nhau, vì vậy trừ khi một cái gì đó thực sự bị phá vỡ, họ sẽ không biết gì về những khác biệt nhỏ. Đây là những gì tôi đã đề xuất hầu hết thời gian, mặc dù tất nhiên có rất nhiều thử nghiệm được thực hiện.
Nếu khách hàng của bạn đòi hỏi nhiều hơn, hoặc thiết kế thực sự cần phải nhất quán, bạn có thể tiếp tục với các bảng lồng tiếp theo cho các khối nội dung riêng lẻ. Bằng cách đó, bạn sẽ có nhiều quyền kiểm soát hơn đối với khoảng cách xung quanh các tiêu đề, và kiểm soát tính nhất quán để cho phép bạn xếp hàng các phần tử với nhau.
Ở đây, một ví dụ về nỗ lực cần thiết để tạo ra một khối tiêu đề nhất quán:

      

        

          
Month Name Newsletter
        
        

          
Send to a henchmate | Unsubscribe | ... 
        
      

  

    

      

        

          
 
        
        

          
Article photo
          
Article title
          
Article copy
          
Read more link
        

          
 
        
        

          
 
        
        

          
Article photo
          
Article title
          
Article copy
          
Read more link
        

          
 
        
      
    
  

  

    

      

        

          
Send to
a henchmate
          
Do your henching colleagues need some tips? ... 
        
      
      

        

          
Unsubscribe
          
If you're not interested in being ... 
        
      
    
  

  

    

      

        
The actual heading
      
    
  
Đây là tất cả các mã cần thiết chỉ để đảm bảo rằng được hiển thị ở cùng kích thước và với cùng một không gian xung quanh trên các ứng dụng email lớn.
Hãy suy nghĩ cẩn thận trước khi bạn đi đến những độ dài này, bởi vì nó cũng có thể là một sự lãng phí thời gian của bạn. Nó vẫn tốt để biết rằng nó có thể được thực hiện.
Kiểm tra bố cục hiện đại & NBSP; Bố cục
Hình 4.7 và Hình 4.8 minh họa cách phiên bản mẫu của chúng tôi về bản tin Henchman hiện đại nhìn vào một vài ứng dụng email phổ biến. Những ảnh chụp màn hình này được tạo bằng công cụ kiểm tra giám sát chiến dịch, nhưng bạn có thể đạt được kết quả tương tự từ các dịch vụ khác.
Hình 4.7. Ảnh chụp màn hình trong Gmail (trái), Windows Live (giữa) và AOL Desktop 9 (phải)
Hình 4.8. Ảnh chụp màn hình trong Outlook 2007 (trái), Thunderbird (giữa) và Lotus Notes 6.5 (phải)
Có thể khó có thể tạo ra trong các ảnh chụp màn hình, nhưng vẫn còn một số biến thể từ khách hàng đến khách hàng. Những gì bạn có thể thấy là thiết kế tổng thể khá gần và chắc chắn không có vẻ bị hỏng ở bất kỳ máy khách nào trong số này (mặc dù một trong những hình ảnh đã không tải được trong Lotus Notes 6.5).
Bài học bạn lấy đi từ điều này nên là bạn không cần chỉ sử dụng hình ảnh để đạt được kết quả nhất quán với email HTML. Mã hóa email của bạn theo cách mà tôi đã phác thảo có thể cần nhiều nỗ lực hơn một chút, nhưng chúng sẽ hiệu quả hơn, vì vậy bạn sẽ gặt hái được phần thưởng trong thời gian dài.
Tạo một mẫu HTML chống khách hàng thực sự là một tác phẩm nghệ thuật. Như bạn có thể thấy từ hướng dẫn này, nó không phải là một quá trình nhanh chóng, nhưng nó rất đơn giản khi sử dụng các thực tiễn tốt nhất. Và, như đã nêu nhiều lần, bạn sẽ thấy phần thưởng theo thời gian vì các mẫu thử và đúng này sẽ lượm lặt được sự tham gia và kết quả thực sự.
Web có đầy đủ các phòng trưng bày thiết kế và các phòng trưng bày CSS dường như đang mọc lên như nấm ở mọi góc của nó, nhưng có tương đối ít phòng trưng bày mẫu email HTML.
Giữ các trang web này được đánh dấu cho thiết kế tiếp theo bạn cần mã hóa, bởi vì bạn có thể tiết kiệm rất nhiều thời gian:
Mẫu miễn phí từ giám sát chiến dịch
Bộ sưu tập tại các email thực sự tốt
Mẫu chủ đề
Không có gì xấu hổ khi lấy một mẫu được thử nghiệm mà có sẵn miễn phí và điều chỉnh nó theo nhu cầu của bạn.
Khách hàng của bạn không có hứng thú với việc trả tiền cho bạn để chiến đấu với cái chết với Lotus Notes 7, họ chỉ muốn một email mà mọi người có thể đọc và đạt được mục tiêu của họ.
Theo thời gian, bạn sẽ xây dựng kiến ​​thức của riêng mình và một bộ mã làm việc mà bạn có thể sử dụng lại, điều này sẽ giúp bạn tiết kiệm thời gian mà bạn dành cho các mục tiêu thiết kế và kinh doanh.
Sử dụng màn hình chiến dịch, bạn có thể nhập HTML của riêng mình cho các thiết kế email tùy chỉnh, nội tuyến tất cả các CSS của bạn và thậm chí tạo các mẫu mà khách hàng hoặc thành viên trong nhóm có thể nhanh chóng chỉnh sửa trong tương lai. Đăng ký hôm nay miễn phí và cho nó một shot.
Hướng dẫn này ban đầu được xuất bản vào tháng 4 năm 2010 dưới dạng một đoạn trích từ cuốn sách Tạo email HTML tuyệt đẹp chỉ hoạt động! bởi Mathew Patterson. Hướng dẫn này đã được cập nhật vào tháng 5 năm 2020.
Nhấn CMD+D để đánh dấu trang nàyCMD+D to Bookmark this page
Email thương hiệu tức thì
Với trình tạo mẫu của chúng tôi, bạn có thể tạo email có thương hiệu và sau đó gửi chúng. Nó là dễ dàng.
Tìm hiểu thêm
Trường hợp nghiên cứu
RIP Curl, thương hiệu lướt sóng hàng đầu của Úc, sử dụng nội dung động để thúc đẩy chuyển đổi.
Tìm hiểu làm thế nào
Thông tin cho hộp thư đến của bạn
Chúng tôi đi tuyệt vời với hộp thư đến. Đăng ký nhận bản tin của chúng tôi để biết những hiểu biết tiếp thị của Cann-miss.
Đặt mua
 

Chúng ta có thể viết HTML mà không có cơ thể không?
Bỏ qua các thẻ HTML, đầu và cơ thể chắc chắn được cho phép bởi các thông số kỹ thuật HTML..
Cơ thể có quan trọng trong HTML không?
Phần tử có thể là yếu tố HTML quan trọng nhất có.Nội dung của phần tử là những gì thực sự được hiển thị cho người dùng truy cập trang web của bạn hoặc xem tài liệu của bạn.. The contents of the  element are what actually get displayed to the user visiting your web page or viewing your document.
HTML nào được phép trong email?
Danh sách các thẻ HTML được phép và các thuộc tính của chúng: A: href, tiêu đề, tên, phong cách, id, lớp, hình dạng, phối hợp, alt, mục tiêu.href, title, name, style, id, class, shape, coords, alt, target.

Đọc tiếp








programming
html
HTML email doctype



Reply
0
0
 Chia sẻ