best-practices.md: Warn about Outlook breaking font style inheritence when using tables #302
Conversation
… when using tables
The following code can be used to verify the behavior in Outlook (basically any version from 2007 to 365) on Windows (tested on Windows 10):
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
font-family: 'Times New Roman';
font-size: 20px;
color: #FF0000;
}
</style>
</head>
<body>
<table>
<tr>
<td style="font-family: sans-serif; font-size: 30px; font-weight: 600; line-height: 50px; color: #0000FF;">
This text has font family "sans-serif", font-size 30px, font-weight: 600,<br>
line-height: 50px and blue color.
<table>
<tr>
<td>
This text should have same styles<br>
but Outlook resets them to styles from body.
</td>
</tr>
</table>
<table>
<tr>
<td style="font-family: sans-serif; font-size: 30px; font-weight: 600; line-height: 50px; color: #0000FF;">
This text has the same styles as the first text<br>
because we inlined them and did not rely on inheritance.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
```
|
Note: I only added one item to the numbered list of best practices but since it was renumbered, the diff looks like successive rules were changed too. |
|
Yes, thanks so much for this. This is a great point that should be in the docs. I'll wordsmith a bit so it sounds like the rest and get it in there. Thanks again! |
| 6. **HTML attributes are still relevant.** Most styling is done using CSS. But because some email clients use antiquated rendering engines, they tend to better understand HTML attributes like `align`, `valign`, `height`, and `width`. | ||
| 7. **Define color as `#ffffff` instead of `#fff` or `rgb(1,2,3)`.** Six-digit hex is supported in inline CSS as well as HTML attributes like `bgcolor` that are still supported in email. | ||
| 8. **Don’t forget about [preview text](https://stackoverflow.design/email/guidelines/faq#what-is-preview-text?).** We can specify the text that appears beneath subject lines in many email clients. If preview text is not included, this space will be populated by the email’s content. | ||
| 3. **Don't rely on CSS inheritance.** Some versions of Windows Outlook reset CSS properties `font-family`, `font-size`, `font-weight`, `line-height`, `color` from parent elements from `<body>` when nesting tables. |
There was a problem hiding this comment.
Thanks for your feedback @TedGoas.
Shouldn't it be "from parent elements to <body>" rather than "from parent elements from <body>"?
What do you think about the following version ?
Some versions of Windows Outlook reset CSS properties like
font-family,font-size,font-weight,line-height, andcolorthat should be inherited from parent elements to<body>when nesting tables.
(the bold font is used only to highlight my changes)
Note: I'm not a native English speaker so maybe your wording is all right.
Also, I would like to share my personal experience: As a beginner I was not really sure whether to apply the font styles to <table>, <tr>, or <td> elements. Only after I found the janogarcia's guidelines I realized that the font styles should be applied to <td> elements and it helped me to clean up my template quite a lot. Before that, I had the styles scattered randomly among those three element types and sometimes even duplicated both in <table> and the descendant <td> because I thought that it was necessary to work in all different quirky email clients.
That is why I mentioned <td> specifically in my wording.
There was a problem hiding this comment.
Yes, these are good edits, I'll get them in there. Your English is very good :)
|
@sustmi Glad to hear that those old notes helped! Please bear in mind that I marked them as obsolete way back in 2019. The email coding guidelines in that Gist are based on the first iteration I used for coding email at Doist (Todoist, Twist) in 2015, but later evolved into a more mature template — which took a ton of inspiration from @TedGoas excellent Cerberus templates — and component library that powered all the newsletters and transactional emails, as explained in the Email — Conquistando el Inbox presentation (Spanish). For more up to date general email coding guidelines, I'd recommend looking into the following resources (as well as following any tips/advice found in Cerberus!):
You can find more resources in the aforementioned presentation, but keep in mind that it was delivered in 2019, so it may not be accurate anymore. |
It took me more time than I would like to admit until I realized that I should always copy font styles to
<td>elements.It is mentioned for example in Email Coding Guidelines by @janogarcia:
I checked the code of the Fluid Template and it seems to adhere to this rule but I did not find it mentioned anywhere in the documentation.
The following code can be used to verify the behavior in Outlook (basically any version from 2007 to 365) on Windows (tested on Windows 10):
Here is example how Outlook 2021 on Windows 10 renders it:
I think it is important for this rule to be mentioned explicitly since the previous best practice advises to nest tables when in doubt.