Windows Live Hotmail
STATUS: Some Improvement Recommended screenshot
Summary: Margin and padding are vital to any design, and Windows Live Hotmail partially supports both of them. Partial support is certainly better than no support, but with varying degrees of accuracy for either property a design will lose its integrity. At a minimum, we would love to see Microsoft step up and offer full support for these fundamental properties.
Although not related to Hotmail's CSS support, it's worth noting that headings within HTML emails turn green by default when viewed in this email client (see screenshot). For more information and a fix, view this blog post.
Hotmail also does not support image maps.
Please note: The Windows Live Hotmail acid test was analyzed in Firefox. This is important to note because we discovered that this webmail client renders content differently in different browsers. Read the details about this on our blog. Last updated: 08 July 2011
- Font family/size/weight/style
- 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 Windows Live Hotmail 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.
Margin With partial support for
margin, a design loses its integrity. While readability isn’t compromised, it’s clear that something isn’t visually correct. View a sample of how a design can be compromised with poor support for
Normal Priority recommendations
While not absolutely critical, we would like to see Microsoft improve Windows Live Hotmail 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.
Border A design certainly isn’t going to fall apart when its borders are compromised. But when they are missing or improperly rendered, it’s obvious something isn’t right even if that something can’t be identified.
Font-family names with quotes Though many common HTML-font names are defined as single words (Georgia, Arial, etc.), others are defined using more than one word (Trebuchet MS, Lucida Grande, etc.). And per CSS guidelines, fonts with names comprising more than one word must be enveloped in quotes. Web designers are already limited to a small cache of HTML fonts, so removing some from the list dumbs down that list even further. While a lack of support for multiple-word font names isn’t mission critical, it tightens already constrained parameters to which web designers are adhering, regarding HTML fonts. Moreover, the manner in which Windows Live Hotmail falls apart here causes other problems. Every property after the quoted font-family name (within the respective declaration) is also ignored. So unless it’s the last property in a declaration other properties are subsequently eradicated, even if they’re otherwise supported.
Font inheritance One of the many ways that CSS can optimize/recycle markup is inheritance. Sure, once a font is declared it can be redefined elsewhere. But that can lead to bloated, unnecessary markup; weighing down an email and decreasing editing efficiency. Moreover, with a lack of solid inheritance, an overall design can be compromised as fonts shift and shuffle about with undesirable results.
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.
- 8 July 2010
- Screenshot & summary updated to reflect green links and headings in Hotmail
- 28 Nov 2007
- Initial recommendations added
Noticed any differences?
If you've used Windows Live Hotmail 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 Windows Live Hotmail embrace these recommendations. and tell us how we can help.