Microsoft Outlook използва Word за визуализиране в десктоп клиентите, което създава специфични предизвикателства при разработката на HTML имейли. В това ръководство разглеждаме условните коментари, MSO свойствата, VML, корекциите при DPI scaling и изпитани решения, с които имейлите ви изглеждат добре във всяка версия на Outlook.
Десктоп версиите на Microsoft Outlook от 2007 до 2019, както и Outlook в Office 365 за настолни компютри, използват Microsoft Word, за да визуализират имейлите, вместо браузърен механизъм. Word е създаден за оформление на документи, подобно на печатните материали, а не за работа със съвременни HTML и CSS. Затова свойства като float, position, max-width, flexbox и grid изобщо не се поддържат.
Although Outlook's overall market share has declined (averaging around 5% globally), it remains dominant in corporate environments where B2B email campaigns are critical. Ignoring Outlook rendering means risking broken layouts for a significant portion of business-oriented recipients.
Добрата новина е, че проблемите в Outlook са добре познати. Особеностите му са документирани, а решенията са изпитани във времето. Щом усвоите основните модели, като оформление с таблици, MSO свойства за фина настройка и VML за фонове и бутони, ще можете уверено да се справяте с визуализирането в Outlook.
Използва Microsoft Word за визуализиране. Това е най-ограничаващата среда по отношение на CSS поддръжката. Освен това потребителите на Windows с настройка 120 DPI могат да виждат уголемени елементи, които чупят оформлението. Именно тук се прилагат повечето Outlook специфични корекции.
Използва WebKit за визуализиране, което го прави по-близък до Apple Mail и Safari. Обикновено е надежден и рядко изисква специални заобиколни решения.
These clients use WebKit or Blink-based rendering engines and provide good HTML rendering. They don't usually break your emails. Note: Outlook.com prepends x_ към имената на всички CSS класове.
Microsoft's unified client uses a web browser engine instead of Word. Available since 2023 in the Windows App Store. Much better CSS support, but legacy desktop clients will still need to be supported for years to come.
These are the issues you'll encounter most frequently when coding HTML emails for Outlook desktop clients.
The most notorious Outlook bug. White horizontal lines appear seemingly at random, particularly in sections with odd-numbered heights or font sizes. This is caused by Word's rendering engine adding page breaks.
Променете размера на шрифта и line-height стойностите на четни числа. Добавете ghost break с <!--[if mso]><br style="mso-line-height-rule:exactly; line-height:0;"><![endif]-->Като алтернатива уеднаквете цветовете на фона в проблемните секции или добавете mso-line-height-rule:exactly към обгръщащия елемент.
Outlook игнорира CSS width и height върху изображенията и ги визуализира в оригиналната им резолюция. Ако използвате retina изображения 2x, те ще се покажат два пъти по-големи и ще счупят оформлението.
Винаги задавайте width и height като HTML атрибути на <img> таговете: <img src="image.jpg" width="300" height="200" alt="...">. На практика е достатъчно да зададете само width, защото Outlook запазва пропорциите автоматично.
Outlook премахва padding при много елементи и обработва margin непоследователно. Padding върху <div> tags is completely disregarded since Outlook doesn't support styling on divs.
Използвайте table cells за разстояния и структура. Прилагайте padding към <td> елементите, а не към <div> или <img> тагове. При изображенията добавяйте padding към обгръщащата клетка, а не към самото изображение. Използвайте техниката ghost table, за да обвиете div елементи в таблици, видими само за Outlook.
Outlook не поддържа web fonts. Още по-неприятното е, че ако персонализираният шрифт е поставен първи във font-family стека, Outlook прескача всички fallback шрифтове и преминава директно към Times New Roman.
Използвайте attribute selectors, за да пренапишете font-family стека: a[x] { font-family: 'CustomFont', Arial, sans-serif; }Това работи, защото Outlook игнорира attribute selectors и така прочита оригиналния безопасен стек. Като алтернатива обвийте текста в <span> с безопасен стек и приложите персонализирания шрифт чрез MSO условен код.
Outlook 2007-2013 не поддържа анимирани GIF файлове и показва само първия кадър. Outlook 2016 и 2019 добавят поддръжка за GIF, но по-старите клиенти все още се използват.
Проектирайте GIF файла така, че първият кадър да съдържа основното ви послание или CTA. Като алтернатива използвайте MSO условен код, за да скриете GIF файла и да покажете статично резервно изображение за десктоп клиентите на Outlook.
Десктоп клиентите на Outlook, с изключение на Outlook 365 и Outlook.com, не рендират background-image. Това засяга hero секции, бутони с фонови графики и декоративни елементи.
Използвайте VML, за да визуализира фоновите изображения в Outlook. Обвийте VML кода в MSO условни коментари, така че да таргетира само десктоп Outlook, а CSS background-image да работи за всички останали клиенти. Вижте секцията за VML по-долу за пълни примери.
Бъг в Outlook 2016 добавя рамка от 1 пиксел около клетките на таблицата, което разваля pixel perfect оформлението.
Добавете border-collapse: collapse; към стиловете на таблицата, inline или във вграден style block. Това слива съседните рамки на клетките в една и премахва нежеланото разстояние.
Когато използвате оформления с <div>елементи и display:inline-block за responsive подреждане, Outlook игнорира стилизирането на div елементите и визуализира всичко на 100% ширина.
Използвайте техниката ghost table: обвийте div колоните си в Outlook специфични условни таблици. Div елементите обслужват модерните клиенти и responsive подреждането, а ghost tables запазват колонното оформление в Outlook. <!--[if mso]><table><tr><td width="300"><![endif]--> вашето div съдържание <!--[if mso]></td></tr></table><![endif]-->
Условните коментари са HTML коментари, които се интерпретират само от десктоп клиентите на Microsoft Outlook от 2007 до 2019, както и Outlook в Office 365 за настолни компютри. Те ви позволяват да показвате или скривате съдържание специално за Outlook и дори да таргетирате отделни версии. Това е най-силният ви инструмент за Outlook специфични заобиколни решения, без да влияете на останалите имейл клиенти.
<!--[if mso]>
<p>This content is only visible on Outlook desktop clients</p>
<![endif]--><!--[if mso 14]>
<p>Only visible on Outlook 2010</p>
<![endif]-->
<!--[if (gte mso 9) | (lte mso 11)]>
<p>Visible on Outlook 2000 to Outlook 2003</p>
<![endif]-->Съответствие между MSO номерата и версиите на Outlook:
<!--[if !mso]><!-->
<p>Visible on everything except Outlook desktop</p>
<!--<![endif]-->[class~="x_foo"] {
/* Styles for Outlook.com and Office 365 web only */
}Outlook.com и Office 365 web добавят x_ to all CSS class names but don't apply this to attribute selectors. You can exploit this difference to target only Outlook web clients.
MSO свойствата са CSS подобни свойства, които се разпознават само от десктоп клиентите на Outlook. Те ви дават прецизен контрол върху line-height, padding, размера на шрифта и видимостта по начин, който стандартният CSS не може да постигне в Outlook.
Кара Outlook да спазва зададената от вас стойност за line-height Без това свойство Outlook може да добави допълнително разстояние между редовете. Поставяйте го inline непосредствено преди декларацията за line-height.
Декларира padding стойности, валидни само за десктоп Outlook. Използвайте го, когато стандартният CSS padding не се рендира коректно в Outlook. Приема същия формат като обикновения padding, тоест (top right bottom left).
Задава размер на шрифта, който използва само Outlook. Полезно е, когато Outlook рендира текста ви малко по-голям от останалите клиенти и това води до пречупване на текста.
Скрива съдържанието от всички десктоп клиенти на Outlook. Важно: това свойство се премахва, когато имейлът бъде препратен, затова за надеждност го комбинирайте с условен код <!--[if !mso]> conditional code for reliability.
VML (Vector Markup Language) is Microsoft's deprecated vector graphics language that is still supported in Outlook desktop clients. It is the only way to achieve CSS background images, rounded-corner buttons, and gradient backgrounds in Outlook 2007–2019. Always wrap VML code in MSO conditional comments.
<html lang="en"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"><!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml"
fill="true" stroke="false"
style="width:600px; height:300px;">
<v:fill type="frame"
src="https://example.com/bg.jpg"
color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="background-image:url('https://example.com/bg.jpg');
background-size:cover; padding:40px;">
<p style="color:#ffffff;">Your content here</p>
</div>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->Това създава контейнер с размер 600x300 px и фоново изображение, което работи в десктоп Outlook, като за всички останали клиенти се използва CSS fallback с background-image.
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
href="https://example.com"
style="height:44px; v-text-anchor:middle; width:200px;"
arcsize="10%"
strokecolor="#1a73e8"
fillcolor="#1a73e8">
<w:anchorlock/>
<center style="color:#ffffff;
font-family:Arial,sans-serif;
font-size:16px; font-weight:bold;">
Click Here
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://example.com"
style="background-color:#1a73e8;
border-radius:4px; color:#ffffff;
display:inline-block; padding:12px 24px;
font-size:16px; font-weight:bold;
text-decoration:none;">
Click Here
</a>
<!--<![endif]-->Това създава бутон със заоблени ъгли в Outlook чрез VML и използва стандартен CSS бутон за всички останали имейл клиенти. Така дизайнът остава последователен във всички среди.
Потребителите на Windows могат да зададат дисплея си на 120 DPI, тоест 125% scaling, или повече, което кара десктоп клиентите на Outlook да мащабират текста и графиките неравномерно. Изображенията може да изглеждат прекалено големи, таблиците може да се счупят, а разстоянията стават непоследователни. Тази корекция в три стъпки решава повечето проблеми при 120 DPI.
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:o="urn:schemas-microsoft-com:office:office"><!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->Когато използвате style="width:600px;" вместо width="600" при таблиците, DPI scaling се прилага по-последователно както към таблицата, така и към съдържанието й. Това помага да избегнете счупване на оформлението при 120 DPI.
Таблиците остават най-надеждният метод за оформление в Outlook. Използвайте <table>, <tr>и <td> за структурата. Ако предпочитате кодиране с div елементи, винаги добавяйте ghost tables, тоест MSO условни таблици, като fallback за Outlook.
Задавайте width, а при нужда и height, като HTML атрибути на всеки <img> таг. Outlook игнорира CSS размерите и ще рендира изображенията в оригиналния им размер, което може да счупи responsive оформлението.
Поставете персонализирания или уеб шрифт в attribute selector или media query, а основната декларация за font-family оставете като системно безопасен стек, например Arial, Helvetica, sans-serif, за да избегнете fallback към Times New Roman.
По подразбиране Outlook блокира изображенията, докато получателят не натисне “Download Pictures”. Добре написаният alt текст гарантира, че имейлът ви ще предаде посланието си дори когато изображенията са изключени.
Съществуват поне 8 различни среди за рендиране в Outlook. Тествайте в Outlook 2013, 2016, 2019, Office 365 desktop, Outlook.com, Outlook за Mac и New Outlook. Използвайте инструменти като Litmus или Email on Acid за цялостно тестване в различни клиенти.
Това предпазва Outlook от добавяне на фантомни рамки от 1 пиксел около клетките на таблиците. Прилагайте го като inline style на всеки <table> елемент: style="border-collapse:collapse;".
Coding HTML emails for Microsoft Outlook requires a specialised approach that differs from standard web development. The Word rendering engine used by Outlook 2007 through 2019 and Office 365 desktop clients does not support modern CSS properties like flexbox, grid, or max-width. Instead, email developers must rely on table-based layouts, MSO conditional properties, and VML (Vector Markup Language) for backgrounds and bulletproof buttons. Understanding the differences between Outlook's multiple rendering engines — Word for desktop, WebKit for Mac and mobile, and browser-based for the New Outlook — is essential for delivering pixel-perfect email campaigns across all Microsoft email clients.
В EmailDeer специализираме в ръчно кодирани HTML имейли с дълбока експертиза в визуализирането за Outlook. Тестваме всеки шаблон в над 50 имейл клиента, включително всички ключови версии на Outlook, прилагаме корекции за DPI scaling, изграждаме VML фонове и бутони и гарантираме, че брандът ви изглежда последователно от Outlook 2013 до New Outlook. Независимо дали ви трябва единичен шаблон за кампания или постоянна имейл продукция, поемаме сложностите около Outlook, за да може екипът ви да се фокусира върху стратегията и креативната посока.
We hand-code every email to render flawlessly across all Outlook versions. Get in touch and we'll handle the Word rendering engine so you don't have to.
Hand-coded HTML emails that drive clicks, impress clients, and build trust. Expert craftsmanship for brands that care about quality.
EmailDeer is a service by
bullgrape.com
.