adrian holovaty

November 19, 2002, 11:22 PM ET

One thing wrong with the Reuters redesign

Reuters, the news service, has redesigned its Web site. Its home page has abandoned subtlety and simplicity for an intense, overly designed busyness; it is a page in which many pieces shout.

The code is equally inflated. When I examined the home page, it had 112 spacer GIFs, 125 tables and flat-out indulgent class names such as class="bottomNavigationChannelsSmall". A measly 6.29 % of the home page's source code is actual text content, according to the GetContentSize utility.

Here is a particularly heinous example of the page's bloat:

<script>
if (document.all) {
document.write('<input class="headerSearchBox" name="ticker" type="text" size="7">');
}
else if (document.getElementById) {
document.write('<input class="headerSearchBox" name="ticker" type="text" size="12">');
}
else {
document.write('<input class="headerSearchBox" name="ticker" type="text" size="5">');
}
</script>

Some of you readers might recognize (and laugh maniacally at) the problem and ill-conceived solution here. For the others, first a little background...

Browser quirks make it difficult to control precisely the width of text fields (input type="text" -- an example of which is this page's search form). The input tag, which defines a text field, allows for the size attribute, but browsers' varying default font settings interpret size differently. Most notably, Netscape 4's default is to format text fields in a wide fixed-width font, which means a form field with a size="12" will look substantially longer in Netscape 4 than in other browsers -- and, hence, messing up sophisticated layouts.

That said, we return to the Reuters code. For the JavaScript-uninitiated, if (document.all) is often used as a shortcut method for determining whether the user's browser is a recent version of Internet Explorer or Opera. (document.all is a piece of functionality that works in those browsers and not in others.) Likewise, if (document.getElementById) is widely used to test for browsers that adhere to the DOM, such as Netscape 6+ and Mozilla.

What we have here, then, is basically a browser-sniffing script that outputs a hard-coded size on an input tag based on the browser.

This is poor in practice, wasteful and flat-out silly.

A much easier method would be to use a simple style declaration in a CSS file. To accomodate for the lowest common denominator (Netscape 4), set the size as small as needed so as not to blow-out the layout:

<input class="headerSearchBox" name="ticker" type="text" size="5">

Then, set the text field's width in a style sheet, like so:

input.headerSearchbox { width: 80px; }

The style sheet width declaration will overrule the size="5" in all browsers that support this basic CSS property, and Netscape 4 will happily buzz along with its size="5". This has the added bonus of pixel precision, and it doesn't require JavaScript for the form fields to show up on the page.