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.
Comments
Posted by ryan on November 20, 2002, at 7:25 p.m.:
I think their biggest crime is the use of Arial.
Posted by Carl on November 20, 2002, at 7:52 p.m.:
From one extreme to another - the old version is in my opinion too simplistic, almost non-professional by today's standards. The new style looks nicer, maybe, but 125 tables?
Posted by Curt Wohleber on November 20, 2002, at 7:52 p.m.:
You know there's a problem when you try to vie source in IE and Windows tell you the home page is too large to open in Notepad. More than 66K of code and text for a page that's about 2.5 screens high at 960x720.
Visually, I don't think it's terrible. Busy, yes, but reasonably well organized (again, visually; the markup is another matter altogether( and uncluttered.
Posted by Ben on November 20, 2002, at 8:07 p.m.:
I personally liked the older version. To me it seemed before, they were the pusher, and now their trying to be both the pusher and the user at the same time. As the great thespians N.W.A. once said, "Don't get high on your own supply."
Posted by kpaul on November 20, 2002, at 9:10 p.m.:
I've also heard that using a monotype font in a style (while not attractive) will help get the input fields to display a little more similar on more platforms and browsers.
Posted by Jake Howlett on November 20, 2002, at 11:43 p.m.:
Heehee, I love it ;o)
The mind boggles wondering how much they paid for the new site to be developed....
Jake
Posted by Paul Turner on November 21, 2002, at 12:48 a.m.:
..also check out how images have alt tags...I couldn't find any...
Posted by Joe on November 21, 2002, at 7:42 a.m.:
You note that document.all is used to isolate MS Internet Explorer -- I'll pedantically note that document.all is also recognized by several versions of Opera. Because browser sniffing is so fun.
And the number of tables on the page sounds like a new online tool. Something to slurp a page and count the number of <table> tags. Probably pretty simple to do.
Posted by Jay Small on November 21, 2002, at 3:44 p.m.:
Clearly the design is overwrought. Adding business-side insult to design-side injury, Reuters also now reaches out directly to news consumers in ways it didn't do before -- which, if I were a Reuters Internet news feed client, would anger me royally.
Reuters' consumer-oriented news and finance pages now look and feel an awful lot like, for example, My Yahoo!
I know Reuters isn't a cooperative, like mother AP, but its core business is as a wire service feeding international news media. Those same news media now increasingly must compete with it for consumers' eyeballs online. Same size pie, but more people ordering dessert.
Posted by Adrian on November 21, 2002, at 4:01 p.m.:
Joe: Thanks for pointing out my oversight. I've changed the entry to include Opera.
Man, brower sniffing sucks.
Posted by Tristan Nitot on November 22, 2002, at 3:58 p.m.:
Hi Adrian,
Good job on spotting this one. I've translated a piece of your article into french, on my blog (related to web standards).
See http://www.nitot.com/standards/blog/archives/2002_novembre.php#84922672
Cheers,
--Tristan
Posted by anonymous on December 2, 2002, at 5:59 p.m.:
what do you guys think of the reuters.co.uk design - it seems to be much simpler to read to me... wonder if they are going to move reuters.co.uk to the "new" reuters.com design as well???
Comments have been turned off for this page.