Google Gmail
STATUS: Improvement Recommended screenshot
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.
Note that these same issues also feature in the Gmail client for Android phones (eg. Google Nexus series), providing an inferior email experience in comparison to the excellent default email client on Android phones.
Last updated: 13 July 2011
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
Find out more about CSS support in this email client.
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.
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.
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.
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 background-color
, list-style-image
and 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.
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.
View a sample of how a layout crumbles without support for width
and height
.
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.
Version History
- 13 July 2011
- Gmail for Android observations added. Find out more about this client.
- 28 Nov 2007
- Initial recommendations added
Noticed any differences?
If you've used Gmail recently and noticed any results that might differ from our findings, we'd .
Work for Google?
We'd love to work with you in any capacity to help Gmail embrace these recommendations. and tell us how we can help.