Microsoft Outlook 2007
STATUS: Improvement Recommended screenshot
Summary: Margin, padding and floats are vital to any design. Outlook 2007 supports none of them, which means even the most elementary standards-based design fails to render. At a minimum, we would love to see Microsoft step up and support these fundamental properties. Last updated: 29 November 2007
- Border (except on images)
- Font family/size/weight/style
- Font inheritance
- Font-family names with quotes
- Varying link-colors
Partial/No Support (High Priority):
Partial/No Support (Cosmetic):
Recommendations for Improvement
High Priority Recommendations
We believe it is critical that Microsoft improves Outlook 2007 to support the following CSS properties:
Background-image One core method of delivering accessible content is to call graphical elements using CSS rather than calling them inline. Contextually-relevant images (such as people, products, etc.) are most often appropriately called inline. However, graphics which make up the visual-design environment are best called using CSS. This not only improves separation of content/design, but it also helps with filtering for devices which do not support CSS because images aren’t downloaded. The benefits include bandwidth reduction, improved performance and enhanced presentation for text-only and aural email clients. When the CSS property
background-image is not supported, images must be displayed inline. View a sample of how inline images look in a client which does not support CSS.
Background-position When background images are supported, support for positioning of said images becomes vital for readability. Background images are often placed inside a block-level element which also contains HTML text. The CSS property
background-position helps us position background images so that nearby text doesn’t become unreadable. When positioning is unavailable, accessibility becomes a potential issue with the prospect of unreadability. View a sample of how text can become muddied with an inappropriately positioned background image.
Float/clear The CSS property
float is vital to designing with standards-based markup. When tables are removed from the designer’s toolbox,
float is the groundwork for layout. Without it, an entire design can collapse. And as elements are floated in a layout, the property
clear is there to make things right for any following elements.
Clear ensures floated elements do not cloak adjacent content,
clear go hand-in-hand. View a sample of how a lack of support for
float can completely dismantle a layout.
Margin With no support for
margin, a design looks considerably broken. But destroying the aesthetics of an email is just the beginning. When elements are forced together without a buffer, the text therein most often becomes unreadable. View a sample of how text becomes unreadable without appropriate margins on their container elements.
Padding While a lack of support for
padding has fewer ramifications than
margin, it is important for similar reasons. Most importantly because of its use in combination with other elements such as
border. When used in combination with said elements, the impact of its absence is multiplied. View a sample of how a lack of support for
padding can directly impact other supported properties.
Width/height Use of
width is more common than
height, and the latter is often used solely for aesthetic balance (extending background colors, etc.). But both are vitally important to any design as a lack thereof either can cause unreadability and demolish a layout.
Width is critically important because the functionality of properties such as
text-align are dependent upon it. When
width is not supported,
float becomes irrelevant and right-aligned or centered elements are not positioned respectively because the default width of a block-level element is 100%. And beyond the negative impact on aesthetics, a lack of support for
height can lead to problems with readability as floated elements therein aren’t cleared without additional markup. View a sample of how a layout crumbles without support for
Normal Priority recommendations
While not absolutely critical, we would like to see Microsoft improve Outlook 2007 to support the following CSS properties:
Background-position a:hover Using a:hover to change the position of a background image therein the
a tag is a widely used technique for interactivity in standards-based design. It is most often used to change background colors/images for faux buttons and navigation elements, typically comprising HTML text. While not critical to an email design, it enhances an experience with visual cues for linked elements.
List-style-image A design can be enhanced by dressing up bullets in a
UL. The two most popular methods for making this happen are the default
list-style-image and an alternate, more controllable method using
list-style-image is defined and then not supported, the degradation is minor in that a default bullet is displayed. However, it’s a modest property which, when supported, can greatly enhance a visual design.
- 21 April 2008
- Clarified that border styles (inline or otherwise) do not work at all on images
- 28 Nov 2007
- Initial recommendations added
Noticed any differences?
If you've used Outlook 2007 recently and noticed any results that might differ from our findings, we'd .
Work for Microsoft?
We'd love to work with you in any capacity to help Outlook 2007 embrace these recommendations. and tell us how we can help.