April 23, 2003, 11:37 PM ET
Lining up the reasons against Gazette.com's dots
Gazette.com, a newspaper Web site of Colorado Springs, Colo., uses dotted horizontal lines to separate content sections on its home page, like this:
Those dots? They're hard-coded periods and spaces. Using plain-text characters to represent graphical elements in such a way is a poor Web-design technique.
A better solution (besides abandoning the dotted line in favor of good ol' white space) would be to use a CSS border-bottom on the page element directly above the line, or a border-top on the element directly below it.
Why even bother with such a minor tweak? Four reasons.
- Principle. Design should be separated from content when possible and feasible. In this case, it's both.
- More design control. Using CSS, a designer can easily tweak the line's type, thickness, color and position.
- Uniformity across media/browsers. In a typical, graphical browser such as Internet Explorer -- which, no doubt, the vast majority of the site's visitors use -- set to its default font sizing, the dots span the column perfectly, with no overlap. (See the above screenshot.) But, increase your browser's font (or "text zoom"), and the dots will wrap to a second line -- and, possibly, a third. Likewise, the dots wrap in small-screened handheld devices; such devices would be better served by markup that isolates presentational code. It's tiny things like this that add up to an unpleasant browsing experience on handhelds.
- Accessibility. From what I've read, screen readers interpret periods as "pause" characters. It follows that a line full of periods could very well be interpreted as a single, ultra-long moment of silence. (Accessibility experts, please chime in.)
