Content that flashes at certain rates or in patterns, such as animated GIFs, can cause photo-sensitive seizures in some individuals. Avoid flashing content or including links to videos that may have similar content. Accessibility is one of the founding pillars of user experience and design. Email accessibility means making sure that everyone can receive and understand your message, regardless of any disabilities or assistive devices they may be using. The mso-effects-shadow-alpha (shadow opacity) and mso-effects-shadow-dpiradius (shadow blur) properties are optional. The mso-effects-shadow-pctsx and mso-effects-shadow-pctsy properties let you scale the shadow.
If the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element’s font-family. It is Microsoft’s version of SVG, but the language has been depreciated and is very rarely used (yay, email!). Microsoft does have the documentation for VML archived online, so you can still look up how to use it to create vectors in Outlook, where it is still supported. Theoretically, when Microsoft transitions to it’s “One Outlook” model, we’ll be able to leave VML behind.
“Justified” copy means that letter- and word-spacing is adjusted so that the text falls flush with both the left and right margins. While common in print, the inconsistent word-spacing can make justified copy hard to read. Text that is left-aligned has been proven to be easier to read for all.
To view the full code snippets or take a deep-dive into the world of ghost columns, check out our fluid hybrid design guide and our explanation of ghost tables. If you’re seeing images that don’t look great in Outlook ensure you check that you’ve defined the correct width in the HTML. Outlook will always try to render your images at their native dimensions which can be annoying when you’re creating larger images and scaling them down, a common technique for high DPI devices. If your GIF includes a call-to-action or any information that is vital to the email’s messaging, you should always try to include it in the first frame.
All of this without affecting any other email clients than the Word-based versions of Outlook. But by using an .mso prefixed selector, we can override the font-family to an Outlook safe choice like the generic sans-serif family, without affecting other email clients. We can then use .mso prefixed selectors to apply CSS specifically for Word-based Outlook. Conditional comments allow us to add bits of HTML that are only read by the Word-based versions of Outlook.
Paragraphs of copy also need room to breathe to aid readability. When scanning an email it should be easy to identify paragraphs and be able to keep your place. Those are the approaches I use to code CSS that targets Outlook only.
For this reason, this might be the best option for all your email messages. This means wrapping more images, paragraphs, and basically anything with a table and applying margin or padding styles to those. Any time an element is styled with both padding and mso-padding-alt, the mso-padding-alt value takes precedence in Outlook, regardless of which order they’re in. Windows Outlook 2003 and above use Microsoft Word as a rendering engine, which can lead to some weird rendering issues. Outlook conditional comments allow us to add bits of HTML that are only read by the Word-based versions of Outlook.
For example, we could use media queries to switch 30-pixel padding on desktop to 10-pixel padding on mobile to take up less screen real estate. Instead, we’d suggest the use of cell height and/or width values, or colspan, rowspan and padding instead how to file a tax extension of empty cells. As long as you’re not using borders, this should help you achieve identical layouts in all browsers. While most email clients will respect your CSS, Outlook will not respect CSS to resize images.
If that isn’t possible you can always employ this technique to show a GIF in most email clients, but hide it and show a static fallback image in Outlook. If none of the above helped fix your white lines or if you’re interested to read more about how and why these lines occur we wrote an in-depth article taking a deeper dive into it. We also recommend checking out this brilliant article from our friends over at ActionRocket. If you just need a very quick fix and your design allows for it, you can match the background color on your problem section to the containing section/table.
Tailor the written content in your email to deliver the main message. Also, consider how compatible your design is with popular screen readers. The convenient thing about mso- prefixed properties is that they let you code self-contained hacks that you can save as snippets and drop into any template, without touching the stylesheet. Assuming your ESP doesn’t strip out unrecognized properties, this approach is also the least likely to cause any issues with inliners or the likes. So to prevent Outlook from rendering an inflated or deflated button, we apply a border of the same color as the fallback background color, to act as faux padding. Important declaration does override mso-padding-alt, but because Outlook ignores inline styles with !
As with all email hacks, neither one is a universal fix, but hopefully one of them will help the next time Outlook is giving you a hard time. Then there are the mso- prefixed properties that don’t correspond to a CSS equivalent, but to an Office feature. Many of these have no effect on Outlook, whereas others have almost too much of an effect. This month marks 10 years since then-CEO Steve Ballmer announced the 2007 version of the Microsoft Office suite. To this day, its email client still sends shivers down the spines of email developers (developers developers…) around the world.
Neither is necessarily good or bad, they just require different approaches and have different quirks that need to be taken into consideration. This only works when a border is set, and the options are just yes and no, if yes then a black shadow will be added to the bottom right at the same width as the border. Works just like margin also supports short hand values and longhand mso-para-margin-top, mso-para-margin-right, mso-para-margin-bottom, mso-para-margin-left. There are a few different font types used here ascii, ansi, bidi, fareast, hansi, symbol. Depending on what language you’re sending in ,you may need to adjust some of these styles accordingly (I need to do more testing around this).