You are currently browsing the monthly archive for January 2010.
Google Gmail
Summary:
One of the core recommendations we are proposing is support for embedded
CSS in the head. While support for inline CSS is probably better than nothing,
it isn’t a solid alternative for true, standards-based support. Therefore, because
of our recommendation, our acid test does not include inline CSS. Gmail does
not support CSS unless it is inline. Consequently not a single item from our
list is supported, nor is anything else. But even if Gmail supported embedded
styles in the head of a document, it strips all IDs and classes from the source.
So we would like to see Google remedy both of these ailments concurrently.
Partial/No Support (High Priority):
- Background-image
- Background-position
- Color/background-color
- Descendant-selectors
- Float/clear
- Margin
- Padding
- Varying link-colors
- Width/height
Partial/No Support (Cosmetic):
- Background-position a:hover
- Border
- Font family/size/weight/style
- Font-family names with quotes
- Font inheritance
- Line-height
- List-style-image
Recommendations for Improvement
High Priority Recommendations
We believe it is critical that Google improves Gmail 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.
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.
Color/background-color
Probably the most fundamental part of visual design is color; it’s the
foundation for design. But beyond support for foreground/background colors
for the sake of visual design, inconsistent or partial support can cause accessibility
problems. When a black background color is eradicated while white text thereon
is properly rendered, the result is white text on a white matte.
Descendant
selectors An excellent way to help keep markup clean and to recycle
CSS is to use descendant selectors. Without this support, IDs and classes
must be applied to every element which needs to be styled. This bloats a file
with unnecessary markup and complicates the production process.
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, float and clear
go hand-in-hand.
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.
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 background-color,
list-style-image and border. When used in combination
with said elements, the impact of its absence is multiplied.
Varying link-colors Linked text throughout an HTML document often resides atop
varying background colors, and therefore in order to preserve readability
link colors must be changed accordingly. If one parent link color supersedes
link definitions which follow it, readability can be compromised. Because
this extends beyond aesthetic characteristics we feel it is vitally important
for accessibility.
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 float
and 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.
Normal Priority recommendations
While not absolutely critical, we would like to see Google improve Gmail 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/size/weight/style When font properties are not supported, text
is still displayed using default font values. While this degradation doesn’t
result in unreadable content or inaccessibility, it does compromise design
integrity. Most notably when a serif font becomes sans-serif, or vice versa.
Fonts are an integral part of a visual design, and therefore proper support
for font properties should be a pivotal part of an email client.
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.
Font
inheritance An excellent way to help keep markup clean and to recycle
CSS is to take advantage of font inheritance. If font styling must be applied
to every necessary selector, files are weighed down with unnecessary markup
and the production process intensifies with extraneous labor.
Line-height
With a lack of support for line-height, a design hardly falters
to a state of unreadability or inaccessibility. But this property allows a
design to breathe and increases the efficiency at which someone reads. Thus
it adds value when used properly.
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 background-image
and padding. When 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.
Lotus Notes 8
Summary: Lotus
Notes is widely used, but primarily by people who work in organizations
that mandate its use. It’s an application which has a lot to offer the business
world, but when it comes to email rendering Lotus Notes falls behind. Lotus
Notes supports a number of items from our list, but they matter little when
the most important properties fail. And they can even be detrimental to
readability as with its support of color while not supporting
background-color (see specifics below).
It should be noted that while the application GUI of versions 6.5 and 8
differ significantly, the actual email-message windows and how they display
content is virtually the same. In fact, while reviewing our acid test in
Lotus Notes 8, we only noticed one improvement from 6.5: support for width.
This is a step in the right direction, but we would like to see more attention
from IBM on properly rendering emails as they develop version 9. It should
also be noted that our tests were performed using Notes in POP/IMAP
mode, not using Domino Server on the back-end.
Full Support
- Descendant-selectors
- Font family/size/weight/style
- Font-family names with quotes
- Font inheritance
- List-style-image
- Varying link-colors
- Width/height
Partial/No Support (High Priority):
Partial/No Support (Cosmetic):
Recommendations for Improvement
High Priority Recommendations
We believe it is critical that IBM improves Lotus Notes 8 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.
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.
Color/background-color
Probably the most fundamental part of visual design is color; it’s
the foundation for design. But beyond support for foreground/background
colors for the sake of visual design, inconsistent or partial support can
cause accessibility problems. When a black background color is eradicated
while white text thereon is properly rendered, the result is white text
on a white matte. And with Lotus Notes this is exactly what happened because
Lotus Notes supports color but not background-color.
Moreover, because varying link-colors are supported our white link became
invisible on a now white background.
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, float
and clear go hand-in-hand.
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.
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 background-color,
list-style-image and border. When used in combination
with said elements, the impact of its absence is multiplied.
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
float and 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.
Normal Priority recommendations
While not absolutely critical, we would like to see IBM improve Lotus Notes 8 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.
Line-height
With a lack of support for line-height, a design hardly falters
to a state of unreadability or inaccessibility. But this property allows
a design to breathe and increases the efficiency at which someone reads.
Thus it adds value when used properly.
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 background-image
and padding. When 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.
Microsoft Outlook 2007
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:
Full Support
- Border (except on images)
- Color/background-color
- Descendant-selectors
- Font family/size/weight/style
- Font inheritance
- Font-family names with quotes
- Line-height
- 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.
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.
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, float
and clear go hand-in-hand.
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.
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 background-color,
list-style-image and border. When used in combination
with said elements, the impact of its absence is multiplied.
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
float and 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.
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 background-image
and padding. When 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.
Applied Info Group's Industry Blog 