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.)
April 17, 2003, 2:29 AM ET
CJOnline redesigns
The award-winning Topeka (Kansas) Capital-Journal site, CJOnline, has redesigned. (See the editor's note.)
Here are a few quick thoughts. Full disclaimer: CJOnline is one of my employer's competitors.
- The design is mostly CSS-based. (I say "mostly" because some page elements, such as navigation, are still coded using
tables.) As always, use of this technology should be applauded. - Netscape 4 users are redirected to a "sorry, your browser is not supported" page. It's a cute message, but isn't the Web Standards Movement about making content accessible to all devices?
- The reader reactions are fascinating and instructive. Plenty of insight here, from normal Web users who don't know (and likely don't care) what stylesheet-based layout is.
- The site uses quite a bit of DHTML to let users show and hide certain pieces of content dynamically. My first impressions haven't been favorable -- mainly because many of the dynamic widgets are triggered when my mouse moves over them, rather than when I click on them. That causes quite a bit of "Oops, didn't mean to do that. What was I looking at before my mouse cursor moved over this picture?" The home-page widgets (e.g. the "Breaking News" at the top) are a decent idea and would be improved a good deal with this quick fix: an
onclickinstead of anonmouseover. - It took me a while to notice the horizontal Flash bar on the home page; I had ignored it because I thought it was an ad. Surely there's a better way to present this content than through an animated Flash bar that looks awfully like a dreaded banner ad. Not to mention, what's the difference between "Sports1" and "Sports2"? And why aren't they next to each other?
April 17, 2003, 1:47 AM ET
NYTimes.com article pages lose left rail
The New York Times' Web site no longer features left-rail navigation on its story pages. Here's an example. Instead, it's got a new breadcrumb navigation scheme. From what I can tell, the change hasn't been implemented throughout the whole site yet, but it's on many pages. (Thanks to my friend David for the heads-up.)
I sense they made the change in order to make room for large ads on the right side of the page. Previously, the site embedded large, distracting ads in body text, making articles difficult to read. As far as I can tell from clicking through the site this evening, this practice has been discontinued on the pages that don't have a left nav.
At face value, this minor redesign seems like a positive change. But I fear the Times might've thrown the baby out with the bathwater. The lack of a left navigation bar creates a wider content area, which is either more readable or less readable, depending on whose usability study you're reading. The Times' opinion pieces are particularly wide now -- some go clear across the page.
And it's obvious that moving from section to section (e.g., from International to Technology) is significantly more difficult without a trusty sitewide-navigation bar always at your side. I get the feeling breadcrumb navigation is being relied on a bit too heavily.
Also, the fact that the Times' ads now appear outside the content area sounds like good news at first, but might it be a sneaky way of introducing even larger ads? I stumbled upon a nytimes.com page that featured a 336-by-850-pixel ad. That's, like, bigger than my face. Just because an ad isn't in the content area doesn't make it any less annoying; in fact, I'd say that humongous ad was more annoying than any other inline ad I'd seen.
April 10, 2003, 12:32 PM ET
Boston.com sells out
Boston.com's home-page logo today:
The logo links to a pop-up window filled with advertising from Long's Jewelers.
(Thanks to Adam Gaffin of online-news for bringing this to my attention.)
April 4, 2003, 12:22 AM ET
Bumbling news sites display incorrect Baghdad time
A number of major news organizations' sites around the world have latched onto a peculiar trend: Displaying the current time in Baghdad.
Examples:
- Tribune-owned newspapers: Los Angeles Times, Orlando Sentinel, Allentown Morning Call (These sites share content, and thus most of them offer the same Baghdad clock)
- nbc-2.com in southwest Florida
- MSNBC
- news.com.au, Australia
- New York Times
I won't comment on the usefulness of such a feature (I can see both arguments), but I will comment on the several incorrect techniques many sites have been using to display Baghdad time.
Problem #1: Relying on users' computers to provide accurate time
Here's an example: Visit the Los Angeles Times' home page in a graphical browser with JavaScript turned on, and you'll see a "Baghdad Time & Weather" sidebar in the right rail. It updates every second, making it look like a real clock.
Pretty cool, eh? I can practically see the men in suits patting themselves on the back, saying, "Man, this is great. We're really taking advantage of the medium."
Except...no. The clock may add a certain gee-whiz factor, but for many users, the information is inaccurate. The reason: It grabs the current time from your computer's operating system and calculates the time in Baghdad by adding (in the Times' case) 4 hours.
That means, if you set your system's clock to 8 a.m., latimes.com will dutifully report it's noon in Baghdad. And if you set it to noon, the clock will read "4 p.m." It's kind of fun to play with, once you figure it out.
How many users' system clocks are inaccurate? I don't know. Is Baghdad time critical information? No. But it's still a possible inaccuracy, and news organizations should strive to weed out inaccuracy (as the Los Angeles Times itself has done recently in another arena).
It comes down to this: As I said in a similar article last August, relying on client-side information to produce content that aims to be journalistically sound is a bad idea. Plus, relying on user-provided data on the Web is insecure and just plain naïve, in general. That's one of the hallmark rules of Web programming.
Problem #2: Relying on JavaScript
With JavaScript turned off, the headline "Baghdad Time & Weather" is a lie; the time simply isn't shown. The Times and its content-sharing partners could avoid this problem by placing a server-generated timestamp in a noscript tag: an adequate replacement.
Problem #3: Incorrect information, period
Take a look at the Orlando Sentinel's Baghdad clock (right side of page), the nbc-2.com clock and the aforementioned latimes.com clock. At time of this writing, Orlando is reporting it's 8:20 a.m. in Baghdad. NBC2 is reporting it's 7:20. Los Angeles is reporting it's 9:20.
How could that be? I don't know. Are those sites each assuming I live within their respective time zones, and calculating Baghdad time relatively, based on that incorrect assumption? Possibly. If you can figure it out, please share.
The best practice
The best solution, in my mind, is practiced by the New York Times. Its clock is generated by the server, not by JavaScript. Which means the site's reported time will stay unchanged until the page is refreshed -- but that's a small price to pay for accurate information.
April 3, 2003, 2:29 AM ET
Web standards improve 2theadvocate.com navigation
2theadvocate.com, a brand-new news site in Baton Rouge, La., that merges a local television station and newspaper, was launched early yesterday morning. They're doing some great stuff -- particularly in the traffic section, which features a Flash map of the city with traffic accidents drawn in dynamically via a live data feed. Very cool.
I was surfing the site earlier today and stopped to play with the JavaScript-driven left-rail navigation, which looks nice and clean. After clicking the navigation several times and looking under the hood, though, I was not as impressed. Here's why:
- It requires JavaScript. For users who disable JavaScript, seven of the 10 navigation choices do nothing when clicked. The choices should degrade gracefully into simple text links for JavaScript-less browsers.
- Some options drop down, but others don't. "Get Email Alerts," "Traffic" and "Weather" are direct links that take you to specific pages, whereas the rest of the navigation choices are only drop-downs. The only visual difference between the two link types is a subtle gray mouseover on the direct links. Expecting a drop-down but getting a link to another page is jarring.
- The navigation bar alone weighs almost 50 KB. And that's not including the commented-out parts, which add another 4 KB. What's to blame? Messy spacer graphics and unnecessary table structure.
- The show/hide methodology is inconsistent. For example, if you click "Food," then "News," both will be expanded. But if you click "News," then "Food," "News" will collapse as "Food" expands. That's unintuitive and irritating.
With these problems in mind, I set about redoing the navigation bar with clean code and a more usable interface. Take a look at the results.
The navigation bar looks almost identical in the browsers I tested it in (Windows: Internet Explorer 6, Mozilla 1.3, Opera 7), and it's more accessible and usable in several ways. It even looks decent -- an elegant, plain-text, unordered list -- in the Cruel Mistress. A quick runthrough:
- Problem 1 was solved by wrapping each link with a valid link and telling the
onclickevent handlers toreturn falseif thedocument.getElementByIdJavaScript capability, which is required for dynamic drop-downs, isn't detected. - Problem 2 was solved by displaying the white arrow only for drop-down options. It's a more obvious visual clue distinguishing those choices.
- Problem 3 was solved by eliminating all table structures, spacer images and redundant
classes. I redid the navigation from the bottom up in clean, table-freep's andli's, with the design specifications contained in a number of CSS rules. Now the page weighs 8 KB -- 16 percent of its original size. - Problem 4 was solved by an improved JavaScript algorithm.
April 1, 2003, 2:48 PM ET
April Fool's Day
I'd planned a one-day redesign of this site, complete with flashing banner ads, a registration screen and pop-ups. Alas, it didn't happen, and for another year I'll have to rest on the laurels of my April 1, 2001, attempt at designing the ugliest Web site ever, put together in my days at The Maneater -- which has a rich history of April Fool's editions.
