Sử dụng mã dành riêng cho Outlook để giải quyết các sự cố hiển thị

Đ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.]

Thêm chiều cao dòng vào hình ảnh nhỏ hoặc ô bảng

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ụ

Thực hiện đúng các vấn đề về tỷ lệ DPI

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

Đừng mong đợi hiệu ứng di chuột hoạt động

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 phụ thuộc vào ảnh động GIF để hiểu rõ quan điểm của bạn

Ứ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.

Không thêm phần đệm hoặc lề vào hình ảnh

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 [

,

,

, etc.].

Mã bạn cần để đối mặt với nỗi sợ email Outlook HTML của mình

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

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

• Outlook 2000 = mso 9
• Outlook 2002 = mso 10
• Outlook 2003 = mso 11
• Outlook 2007 = mso 12
• Outlook 2010 = mso 14
• Outlook 2013 = mso 15
• Outlook 2016, Outlook 2019 và Office 365 trên máy tính = mso 16

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

[class~="x_foo"] { }

[Cảm ơn Mark Robbins về bản sửa lỗi này và Dylan Smith for howtotarget.email. ]

tài sản MSO

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

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.

Kiểm tra để đảm bảo kết xuất email Outlook của bạn diễn ra suôn sẻ

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.

Đảm bảo thiết kế của bạn xuất hiện ngay

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

Tại sao email của tôi hiển thị dưới dạng mã HTML?

Tại sao email của tôi trông giống như mã trong Outlook?