Standards support samples

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-image: Supported

Background-image: Good

Background-image: Unsupported

Background-image: Bad

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.

Background-position: Supported

Background position: Good

Background-position: Unsupported

Background position: Bad

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.

Float/Clear: Supported

Float: Good

Float/Clear: Unsupported

Float: Bad

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.

Margin: Unsupported

Margin: Bad

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.

Padding: Supported

Padding Good

Padding: Unsupported

Padding Bad

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.

Width/height: Supported

Width Height Good

Width/height: Unsupported

Width Height Bad