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.
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.
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.
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.
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.
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.