Contributors:
Paul Sparwasser
Dec 28, 2018
Generally, Outlook will not support background images, gradients, or patterns. It decides it doesn’t want to display these things; it wants to display a solid color instead. That is why it is important to have a fallback color that will work as an alternative to the background.
However, there are certain scenarios in which we can trick Outlook to display backgrounds. If we have a repeatable pattern, we can apply some fancy VML code (don’t ask me what it is, I still don’t even know) and most versions of Outlook will accept it.
Furthermore, if we have a section that will always have the same size dimensions, we are able to set a background image using the VML technique. This can be useful in places where we know the content will not change; therefore, it will not constrain or break out of its container. Take the screenshot below for example:
In this email, designed by the talented Harlie Yeldezian, the background behind the featured image works only if each image that is swapped in place shares the same dimensions. Then we would have a happy Outlook and a happy subscriber.
*Note: It is still important to have a fallback color that would be acceptable in any given instance.
Outlook and grids go together like peas and carrots. There is no separating them. So when you are designing, be wary of things that overlap. Below, you can see an example in which the design had to be changed due to some overlapping sections:
That all said, there are ways we can "fake" the overlap effect using the background techniques from Chapter 1. In the first screenshot below, you can see the white video box overlapping the orange and blue break. To create this effect, a background image of a solid blue bar is placed behind the white box. The second screenshot shows where the container actually ends and how it would look without the background implementation.
The overlap can also be faked with the use of some well placed PNGs. In the example below, you can see the word "Monday" looks like it sits outside of its container. In reality, it is two different images placed into different containers. In the second screenshot, you can see how it would look if we removed the top part from the top container.
There aren’t many fonts that Outlook will support, but that makes things easier. Right? Anyway, here are the fonts you can use:
Sans Serif Fonts
Serif Fonts
So you have your cookie cutter font and now you're asking, "Paul, can I spice it up a little bit at least with some varying font weights?" In Outlook, your options are not so good. You get two weights, bold and regular. You can always throw some italics or underlines in there if you're feeling it.
You know all of those design elements that make everything look really cool and pop off the page. Yeah, Outlook doesn’t care about those. Here is a list of some elements and styles that fit the bill as Outlook no-gos:
Now, this is not to say that you should not use any of these wonderful design techniques. Other, more sophisticated email clients will render them. Just make sure the design looks fine without the use of them for the more primitive clients.
By now you might be asking yourself, "Why doesn’t Microsoft just update their software?" or, "Why is Outlook still a thing?" My only advice to you is just accept it for what it is and move on. If you are able to do that, I assure you that you will have a better “outlook” on life.
