Outlook currently holds 19% of the email market share according to Litmus making it the second most popular email client (iPhone is the most popular at 23%). That means almost one in five emails are opened in some version of Outlook. Even in its latest versions, Outlook doesn’t support some seemingly basic CSS properties. Here are five CSS properties that cause issues for Outlook and should be avoided.
Outlook is the only major email client that does not support the float property. It’s a broad-brush layout style that would cause too much damage to a design in Outlook. As nice as it would be to have, Outlook has made it vorboten.
This property would come in really handy for responsive design to show and hide content based on the end user’s environment. But in this case, Outlook isn’t the only culprit. Gmail has partnered with Outlook on this one and nixed it.
If it weren’t for Outlook, background-image would be a great tool for email development. It would open the door to more creative emails with subtle gradient backgrounds and other visual enhancements. Outlook gives it a thumbs down.
Height isn’t something developers often use so it’s not as hard of a loss. In most situations, the HTML attribute version will suffice and Outlook looks on that with more grace.
This is the tricky one. If it’s not a critical spacing that will screw up a design, it can be used for small adjustments here and there since it’s well supported in other email clients. Margin has good support in the native Outlook client, but is not supported in Outlook.com. Conversely, padding is unreliable in the native client but is supported in the Outlook.com. It’s a lose-lose situation. Use it judiciously and be sure to test Outlook’s reaction thoroughly.