Tại sao triển vọng của tôi hiển thị html?
Microsoft Outlook 2007 hỗ trợ cả tin nhắn văn bản thuần túy và email HTML có chứa liên kết, định dạng và đồ họa. Nếu doanh nghiệp nhỏ của bạn sử dụng ứng dụng nhưng nhận được tất cả email ở dạng văn bản thuần túy, bạn có thể cần thay đổi cài đặt Outlook để hiển thị thư của mình ở định dạng HTML. Mặc dù Outlook có thể hiển thị tất cả các thư ở dạng HTML theo mặc định, nhưng bạn cũng có thể bật HTML cho các thư cụ thể nếu bạn lo ngại về bảo mật Show
Tất cả các tin nhắn
Tin nhắn đơn
Trong bài đăng này, bạn sẽ học Nhiều phiên bản của Microsoft OutlookCái tên “Outlook” bao gồm một số ứng dụng email khác nhau với một vài công cụ kết xuất khác nhau và ít nhất hai cài đặt xem khác nhau. Tất cả những điều này có thể là một cơn đau đầu khổng lồ nếu bạn để nó. Hãy đi sâu vào các phiên bản Outlook khác nhau Triển vọng 2007-2019Đây là các phiên bản Windows dành cho máy tính để bàn của Outlook. Chúng sử dụng Word làm công cụ kết xuất, điều này có ý nghĩa vào thời điểm mà email giống như viết thư. (À, thời gian đơn giản hơn. ) Tuy nhiên, đối với các nhà tiếp thị qua email, việc hiển thị email Outlook HTML không phù hợp 120 DPI (số chấm trên mỗi inch) làm tăng thêm độ phức tạp. Người dùng Windows có thể chọn 120 DPI để tăng độ phân giải màn hình. Nếu họ làm như vậy, các ứng dụng email trên máy tính để bàn sẽ tôn trọng điều đó và sẽ cập nhật hình ảnh và văn bản để lớn hơn. Thật không may, điều này có thể tàn phá email của bạn Outlook dành cho máy MacĐây là phiên bản Outlook dành cho máy tính Mac. Nó sử dụng Webkit làm công cụ kết xuất. Điều này có nghĩa là nó thường ngang bằng với Apple Mail và iOS khi có liên quan đến kết xuất email. Nếu nó hiển thị tốt trong trình duyệt của bạn thì có khả năng nó sẽ hiển thị tốt trong Outlook dành cho Mac và bạn sẽ ít có khả năng email html của mình không hiển thị đúng cách. Quan điểm. com và ứng dụng Outlook dành cho thiết bị di độngNhững khách hàng này sử dụng Webkit hoặc các công cụ kết xuất dựa trên Webkit, vì vậy chúng cung cấp kết xuất HTML tốt và thường không làm hỏng email của bạn Văn phòng Outlook 365Có hai phiên bản khác nhau của Outlook Office 365
Phiên bản dành cho máy tính để bàn tương tự như Outlook 2007-2019 và sử dụng Word làm công cụ kết xuất (khó dùng cho email). Ứng dụng email dựa trên web sử dụng Webkit hoặc Blink và hiển thị email tương tự như Outlook. com (dễ dàng hơn nhiều) Không còn email bị hỏng Xem trước email của bạn trên hơn 100 ứng dụng email, ứng dụng và thiết bị—bao gồm tất cả các phiên bản của Outlook—để đảm bảo trải nghiệm người đăng ký đúng thương hiệu, không có lỗi Tìm hiểu cách →
Một Outlook để cai trị tất cảVào tháng 1 năm 2021 , Microsoft đã công bố tầm nhìn “One Outlook” của họ để thay thế máy khách để bàn bằng một máy khách hoạt động ở mọi nơi bắt đầu từ khoảng năm nay. Ứng dụng email Outlook mới sẽ dựa trên các ứng dụng web Outlook hiện tại. Rất hy vọng rằng nó sẽ có một công cụ hiển thị dựa trên Webkit và sẽ hiển thị email HTML, để giảm khả năng email html của bạn không hiển thị đúng trong Outlook. Thật không may, tất cả các ứng dụng khách máy tính để bàn cũ đó sẽ không biến mất khi điều đó xảy ra, vì vậy chúng sẽ vẫn phải được hỗ trợ ở một mức độ nào đó. Cách giải quyết sự cố kết xuất email Outlook. những điều nên làm và không nên làmĐiểm mấu chốt là chúng tôi đang làm việc với hai công cụ kết xuất khác nhau—Word và Webkit. Webkit dễ viết mã hơn và Word khó hơn. Không nhất thiết là tốt hay xấu, chúng chỉ yêu cầu những cách tiếp cận khác nhau và có những điều kỳ quặc khác nhau cần được xem xét Hãy cùng xem xét một số sự cố kết xuất phổ biến trong ứng dụng khách Outlook trên máy tính và cách giải quyết chúng Bao gồm các thuộc tính chiều rộng và chiều cao trên hình ảnh của bạnOutlook không hỗ trợ các kiểu CSS cho chiều rộng và chiều cao. Nếu bạn không bao gồm các thuộc tính chiều rộng và chiều cao, Outlook sẽ hiển thị hình ảnh của bạn ở kích thước thực của nó. Nếu bạn đang sử dụng hình ảnh võng mạc (bạn nên sử dụng), điều này sẽ dẫn đến những hình ảnh khổng lồ sẽ làm hỏng email của bạn. Hình ảnh võng mạc không có thuộc tính chiều rộng trong Outlook làm cho email rộng hơnBao gồm văn bản ALTĐừng để thông báo bảo mật của Outlook nói lên hình ảnh của bạn. Đảm bảo bao gồm văn bản ALT; . doesn’t display images by default unless people turn the feature on. Email trong Outlook bị chặn hình ảnhSử dụng bảngEmail has come a long way and you can use Điều này có thể không giải quyết được tất cả các vấn đề của bạn, nhưng bao gồm một số CSS dành riêng cho Outlook có thể giúp bạn giải quyết vấn đề kết xuất mà bạn chỉ gặp phải . Hoặc, bạn có thể ẩn một khối nhỏ nếu email Outlook của bạn không hiển thị đúng và sử dụng mã có điều kiện để hiển thị phiên bản would work for a specific version of Outlook. (More on conditional code later.) Outlook đặt chiều cao tối thiểu cho các ô và hình ảnh của bảng. Nếu bạn đang sử dụng một ô trong bảng làm dấu cách hoặc có một hình ảnh nhỏ, hãy đảm bảo thêm thuộc tính line-height vào thành phần bằng với chiều cao mà bạn muốn chúng xuất hiện. Ví dụ Trên máy tính Windows, có một cài đặt chung mà mọi người có thể thay đổi (hoặc trong một số trường hợp, được đặt cao hơn theo mặc định) giúp mở rộng văn bản và các thành phần đồ họa để làm cho chúng lớn hơn và dễ đọc hơn. Điều này rất phù hợp với khả năng truy cập, nhưng không phù hợp lắm với Outlook (một số thành phần được mở rộng trong khi những thành phần khác thì không). May mắn thay, có một sửa chữa. Trước tiên, bạn phải thêm một không gian tên XML vào thẻ HTML Sau đó, thêm một số mã để sửa tỷ lệ hình ảnh ngay trước thẻ Cuối cùng, đảm bảo bao gồm mọi độ rộng đã đặt dưới dạng thuộc tính CSS với pixel chứ không phải dưới dạng thuộc tính trên bảng của bạn ✗ Không phải cái này với width=”600″ . ✔ Vâng, như thế này với style=”width. 600px;” . Điều đó sẽ khắc phục hầu hết các sự cố của bạn đối với máy khách 120 DPI. Hãy xem bảng so sánh song song này trước và sau khi sửa lỗi này Outlook 2013 ở 120 DPI (không sửa)Outlook 2013 ở 120 DPI (có sửa) Thật la khac biệt Outlook không hỗ trợ lớp giả hover. Bạn vẫn nên đưa nó vào để tạo tương tác nhằm tăng khả năng tiếp cận email của bạn trên các ứng dụng email khách khác, nhưng đừng ngạc nhiên khi Outlook email is not displaying properly with the hover effect. Ứng dụng khách máy tính để bàn Outlook không hỗ trợ ảnh GIF động. Bạn có thể đặt khung ban đầu hiển thị hình ảnh bạn muốn hiển thị trong Outlook hoặc bạn có thể ẩn GIF động khỏi Outlook và sử dụng mã hóa có điều kiện để hiển thị hình ảnh tĩnh mà bạn muốn. (H3) Không sử dụng nội dung tương tác mà không có dự phòng Email HTML tương tác là một từ “không” lớn đối với Outlook. Chúng phụ thuộc vào mã hóa AMP hoặc hack hộp kiểm, cả hai tùy chọn này đều không được hỗ trợ trên Outlook. Trong trường hợp AMP cho email, tệp HTML sẽ được hiển thị thay vì tệp AMP, vì vậy không cần mã hóa thêm cho tệp đó. Đối với tương tác hack hộp kiểm, bạn sẽ phải ẩn nội dung tương tác và hiển thị dự phòng Outlook. Một lần nữa, mã hóa có điều kiện là bạn của bạn khi nói đến email Outlook HTML. Outlook strips padding and margins off of images. Add padding to the table cell around the image, or if you have the image in the same cell as copy, add a margin to the tag around the copy ( Mã hóa một email tuyệt vời cho các ứng dụng email trên máy tính để bàn của Outlook yêu cầu vượt ra ngoài HTML và CSS “bình thường”. Có ba loại mã sẽ giúp email của bạn tỏa sáng trong những khách hàng này. mã hóa có điều kiện, thuộc tính MSO và VML Làm việc với một cái gì đó mới có thể đáng sợ, nhưng nó rất đáng. Khi bạn làm cho nó hoạt động bình thường và điều đó không còn có nghĩa là email Outlook của bạn không hiển thị đúng nữa, bạn sẽ cảm thấy mình đang ở trên đỉnh thế giới. Mã hóa có điều kiện xem ứng dụng email hoặc trình duyệt mà người đăng ký của bạn đang sử dụng và chỉ hiển thị mã nếu nó đáp ứng điều kiện bên trong nhận xét, chẳng hạn như Bạn thậm chí có thể sử dụng điều này để nhắm mục tiêu các phiên bản cụ thể của ứng dụng khách máy tính để bàn của Outlook bằng cách thêm số phiên bản Tuy nhiên, Outlook không đơn giản, vì vậy số phiên bản không tương ứng với tên của ứng dụng email Bạn có thể phức tạp hơn bằng cách nhắm mục tiêu một loạt khách hàng có giá trị nhỏ hơn (lt), lớn hơn (gt), nhỏ hơn hoặc bằng (lte) hoặc lớn hơn hoặc bằng (gte). Ví dụ Nếu bạn chỉ thấy một số vấn đề trên một khách hàng cụ thể, bạn có thể nhắm mục tiêu khách hàng đó cụ thể để ẩn và hiển thị nội dung tốt hơn cho khách hàng đó Bạn cũng có thể sử dụng nhận xét có điều kiện để ẩn nội dung khỏi Outlook bằng cách nói “nếu. mso” nghĩa là “nếu không phải mso” ________số 8_______ Một cái gì đó để giữ trong tâm trí. mã có điều kiện chỉ hoạt động trên máy khách Outlook trên máy tính. Vì đây là nơi có nhiều vấn đề phát sinh, nên có thể bạn sẽ cần những bản sửa lỗi này hơn bất kỳ bản sửa lỗi nào cho ứng dụng khách webmail Cũng có nhiều cách để nhắm mục tiêu các máy khách web, mặc dù không có cách nào để nhắm mục tiêu một máy khách web Outlook trên máy khách khác. Vì vậy, khi bạn nhắm mục tiêu Outlook. com, bạn cũng sẽ nhắm mục tiêu ứng dụng web Office 365 (chứ không phải ứng dụng khách trên máy tính để bàn) Bạn có thể nhắm mục tiêu các máy khách web Outlook bằng cách khai thác thực tế là Outlook sẽ thêm “x_” vào tất cả các tên lớp, nhưng không làm điều này cho bộ chọn thuộc tính. Vì vậy, nếu bạn có một lớp “foo” và muốn xử lý nó theo cách khác đối với các ứng dụng web Outlook, bạn có thể nhắm mục tiêu nó bằng mã này (Cảm ơn Mark Robbins về bản sửa lỗi này và Dylan Smith for howtotarget.email. ) Như đã đề cập ở trên, có CSS dành riêng cho Outlook mà bạn có thể thêm. CSS này sẽ chỉ ảnh hưởng đến các ứng dụng email Outlook trên máy tính để bàn. Dưới đây là một vài trong số phổ biến nhất mso-hide. tất cả các; Thuộc tính này sẽ ẩn mọi thứ khỏi máy khách Outlook trên máy tính. Nó sẽ bị loại bỏ khi email được chuyển tiếp, vì vậy hãy thận trọng khi sử dụng riêng nó nếu đó là chức năng mà bạn biết người đăng ký của mình thường sử dụng. Bạn có thể ghép nó với mã điều kiện “if not mso” nếu bạn là một lập trình viên “đề phòng” mso-line-height-rule. một cách chính xác; Thuộc tính này đảm bảo rằng Outlook hiển thị chiều cao dòng của bạn ở mức bạn chỉ định trong thuộc tính chiều cao dòng. Không có nó, Outlook không nhất thiết phải tôn trọng chiều cao dòng của bạn. Nếu bạn đang làm việc trong một ngành mà độ chính xác là yếu tố then chốt, thì có lẽ bạn đã rất quen thuộc với thuộc tính này mso-padding-alt Cái này ít phổ biến hơn một chút, nhưng cho phép bạn khai báo phần đệm dành riêng cho Outlook. Nếu phần đệm thông thường bạn có trên một ô không hiển thị hoàn toàn đúng trong Outlook, bạn có thể sử dụng mso-padding-alt để đặt các giá trị phù hợp với bạn. . mso-ansi-cỡ chữ Điều này cho phép bạn đặt kích thước phông chữ cụ thể cho Outlook. Nếu Outlook hiển thị phông chữ của bạn lớn hơn một chút so với các ứng dụng email khách khác và bạn nhận được một dòng cuối cùng ngắn của bản sao mà bạn không muốn, hãy thêm mso-ansi-font-size and set a font size that makes your copy fit. Có rất nhiều thuộc tính MSO khác mà bạn có thể sử dụng, vì vậy hãy thử nghiệm để xem liệu có bất kỳ điều gì có thể khắc phục sự cố kết xuất cho bạn không. VML là viết tắt của Vector Markup Language. Đó là phiên bản SVG của Microsoft, nhưng ngôn ngữ này đã không còn được dùng nữa và rất hiếm khi được sử dụng (yay, email. ). Microsoft có tài liệu dành cho VML được lưu trữ trực tuyến, vì vậy bạn vẫn có thể tra cứu cách sử dụng nó để tạo vectơ trong Outlook, nơi nó vẫn được hỗ trợ. Về mặt lý thuyết, khi Microsoft chuyển đổi sang mô hình “One Outlook”, chúng tôi sẽ có thể bỏ lại VML. Make sure to include the VML namespace declaration. I usually add it to the element in my boilerplate template so I can use VML whenever I need to: Khi bạn đã có điều đó, bạn có thể thêm bất kỳ VML nào vào mã của mình bên trong các điều kiện MSO Mã đó sẽ tạo một hình chữ nhật màu xanh có kích thước 200px x 50px. Đó có thể không phải là thứ bạn thực sự có thể sử dụng trong email, nhưng bạn có thể sử dụng VML để thêm các nút có góc tròn vào mã, hình nền và độ dốc của nền. Bạn cũng có thể sử dụng VML để tạo định vị tuyệt đối giả, hiệu ứng đổ bóng, . Có rất nhiều thứ bạn có thể làm với VML khi bạn đi sâu vào. a fallback to support CSS art in Outlook. There are lots you can do with VML once you dive in. Outlook từ lâu đã trở thành nỗi ám ảnh của các nhà tiếp thị qua email, nhưng không nhất thiết phải như vậy Với các công cụ phù hợp, bạn có thể tạo các email Outlook HTML đẹp mắt hiển thị chính xác trong Outlook. Kiểm tra các tài nguyên trong suốt bài đăng này để xây dựng các phần mã hóa Outlook của bạn và kiểm tra chúng trong email của bạn với Litmus Builder và Email Previews. Think of coding for Outlook as a puzzle waiting to be solved, and you may find yourself loving Outlook and all of its quirks. Email bị hỏng dẫn đến ít chuyển đổi hơn. Xem trước email của bạn trên hơn 100 ứng dụng email, ứng dụng và thiết bị để đảm bảo trải nghiệm người đăng ký đúng thương hiệu, không có lỗi. Mỗi lần |