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 https://bookkeeping-reviews.com/ or assistive devices they may be using. And since we’re all stuck with it, why not make the best of it? In this post, we will dive in on how to fix some frustrating issues with this troublemaker.
So when you target Outlook.com, you’ll also target the Office 365 web client (but not the desktop client). I’ve had this half finished for a few months and very slowly adding to it, but I’ve already referenced it a few times so I decided I’ll put it live and finish it off when I get time. This is the shorthand version of mso-char-indent-count (how many characters to indent by) and mso-char-indent-size(how big those characters are). However the indent size dosn’t work in Outlook so we can only set the count, but this works either as long hand or short hand. This is a modifier for line-heightto say if the rule should be applied exactlyor at-least.
- Fonts like Arial, Times New Roman, Verdana, Georgia are almost available on all devices.
- This lead me to finding this new way of doing it, which is actually better as it uses relative units, making it more accessible and more scalable.
- You’ll also get deliverability and accessibility checks as well image and URL validation and many other valuable features.
A bigger button will be beneficial to those who can’t control a mouse with precision. “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.
Resizing non-native images in Outlook.
This allows us to create workarounds for Outlook that would otherwise have us pulling our hair out. VML will allow you to get those beautiful background images working on Outlook but will add a layer of complexity to your email coding process. It’s commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.
Outlook has also been known to throw a bit of a tantrum when using padding on paragraph, div or anchor tags. 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.
Add left and right padding for Outlook
Stig got this recourse from Jason who shared a Microsoft Office HTML and XML Reference PDF that he in turn downloaded and decoded from this Microsoft® Office HTML and XML Reference. This is one of the things I love about the email community, people are happy to share their findings and expand on each other’s work. Changing the semantic meaning of a link can cause some pretty serious issues. Note that non-standard attributes will be ignored by default – you’ll need to define them as props in the component if you need them preserved.
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.
mso-bullet-image
But I wanted to share a few that I’ve found uses for in email. Hat tip to Joshua Hughes at FreeAgent who originally showed me his faux padding technique that inspired this version. In order to maintain support for both HTML documents and various Office specific functionality, Word generates markup with a mix of standard CSS and its own Office specific properties.
MSO table styles
Important in the declaration – and even tried valign along with every other tip I could find online…. I have been using line-height to e.g. determine button padding-top and padding-bottom, https://quick-bookkeeping.net/ since HTML Email support for padding/margin is so buggy. This is great for accessibility, but not so great for Outlook (some elements are scaled up while others aren’t).
Learn about common Outlook rendering issues and how to solve them
The mso-border-alt value of 8px (the maximum border width in Outlook) overrides the border of 1px. And to avoid the transparent padding issue, we override the padding with an mso-padding-alt value of 0. Important declaration does override mso-padding-alt, but because Outlook ignores inline styles with ! Important declarations, https://kelleysbookkeeping.com/ this only applies when overriding the padding from a stylesheet. Padding is stored in the mso-padding-alt attribute if the normal HTML padding attribute does not apply. Conditional stylesheets are great if you’re hand coding an email template and you need to apply one or more Outlook specific styles throughout the email.
Be sure to add style for your font in every td or span that contains text. In spite of what guides tell you, it’s my professional experience that you CAN better use ‘span’ instead of ‘p’. It is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element’s font-family. There are lots more MSO properties that you can use, so experiment to see if there’s anything that will fix a rendering issue for you. There are ways to target the web clients as well, though no way to target one Outlook web client over the other.