February 27, 2003, 4:42 PM ET
Dynamically displaying acronyms and abbreviations
I just implemented a quick CSS experiment -- using the content property to dynamically expand abbreviations and acronyms whenever you mouse over them. Here's the code:
acronym:hover:after { content: " (" attr(title) ")"; }
abbr:hover:after { content: " (" attr(title) ")"; }
In English: "Whenever a user mouses over an acronym or abbr tag, insert a space, start-parenthesis, full contents of the title attribute, and a close-parenthesis."
This effect will only be visible in browsers that fully support :hover and dynamic generation using content and after. On my Windows machine, it didn't work in IE 6 nor Opera 7. But it does work in Mozilla.
I'm not sold on this concept. It's more for entertainment than for function, because most browsers already render abbrs' and acronyms' title attributes in tool tips. I'm also concerned there might be a usability issue in the dynamic expansion of text: Say you're moving your mouse to click a link, and then the link moves because you've accidently moused over an acronym. Plus, this might annoy users who already know what an abbreviation means.
That said, it could be useful for the small percentage of Web users who haven't yet grasped the emerging convention of giving abbreviations a dotted underline. I've observed several people who try to click on those, to no avail, and don't wait the two seconds for a tool tip to show up. This method removes the delay; it gives instant results.
What do you think? Is this a usability faux pas?
UPDATE: I've removed the style rules from my global style sheet and posted a separate test page dedicated to this browser experiment.
February 24, 2003, 11:38 PM ET
Covering elections on LJWorld.com
Some cool online journalism I've helped produce at the Lawrence (Kan.) Journal-World lately:
Live online chats with school-board candidates -- 11 of the 13 candidates agreed to chat with readers online, in real time, using my DHTML-driven chat software. Thanks to promotion from our local TV station and word of mouth, traffic (as measured by number of questions asked) increased steadily from chat to chat. I loved these chats for three reasons:
- Rawness. Readers were able to see for themselves how candidates responded and acted -- not seen through the eyes and ears of a newspaper reporter. Even the most unbiased reporter puts his or her mark on a story.
- Accessibility/convenience. Sure, there've been public candidate forums, but online chats let you interact with candidates from your own computer.
- Relative anonymity. We got a number of questions that Lawrence residents might not have been comfortable asking the candidates face-to-face -- and, hence, might otherwise have gone unanswered. Some might argue anonymity brings out the troublemakers, but that's what a moderator is for.
Also, we put together interactive "candidate selectors" for the city-commission race and school board race -- Click on the candidate quotes you agree with, and the script will tell you which candidates you agreed with the most. It's intended mostly as a guide, but it is, without a doubt, useful in that "hey, that really made me think about the candidates" sort of way. I decided to use quotes instead of straight "yes/no" or "agree/disagree" questions because, well, issues aren't always cut and dry.
February 23, 2003, 2:31 AM ET
A very large screen
What are the online-news applications for this thing?
February 19, 2003, 8:08 PM ET
Recommended reading
Nathan Ashby-Kuhlman: Can your CMS do different layouts?
World Wide Web Consortium: Common HTTP Implementation Problems
BBC News Online has redesigned. See the site's announcement and site's FAQ page, read OJR's coverage (including three interviews with BBC staff), and check out reactions by Ben of Magnetbox and Craig Saila.
Netscape DevEdge, Netscape's developer site, has redesigned in all CSS. The best part: Designer (and CSS guru) Eric Meyer explains his style-sheet and JavaScript techniques.
February 18, 2003, 6:56 PM ET
ESPN home page now has tableless layout (almost)
ESPN.com has redesigned its home page, as I hinted at last week.
Most notably, the site's new lite home page uses a tableless layout. The normal ("heavy") home page isn't tableless, but the few layout tables on that page appear to be related to the site's MSN navigation and advertising. The MSN navigation is spread across several sites and likely beyond ESPN designers' control; the advertising code is probably locked in an ad management system somewhere.
Inside article pages (example) appear to have the same layout as before.
Like Wired News' recent redesign, this is a great victory for Web standards and the CSS-based school of design. Every time a major site redesigns in all-CSS, the word spreads farther. Does your site use this critical technology yet?
February 11, 2003, 2:25 AM ET
Recommended reading
- WebWord features an interview with Andy King, Web Site optimization expert, who says, "
For informational sites like WebWord.com or news-related sites, the graphics should be kept to a minimum.
" - Editor and Publisher reports USAToday.com, one of the most-visited American news sites, has begun including related text ads on its story pages -- much like Google AdWords. In the spirit of a recent weblog entry about labeling ads properly, I viewed a sample USAToday.com story in a text-only browser and handheld-browser emulator, and I'm pleased to note that the advertisements were, for the most part, not viewable by those means. The reason: The ads are in an
iframe. - Simon Willison has written an "Image Drag" bookmarklet that, when clicked, makes a Web site's images draggable. Although it doesn't work in Internet Explorer or on some types of sites, it could be a useful tool in the design process.
- Jakob Nielsen's latest Alertbox column examines "Homepage Real Estate Allocation." The gist: "
In most cases, content and navigation do need the lion's share of space. It's a disgrace that they only account for 39% of the precious pixels on today's limited computer screens.
" - Having acquired my first cellphone three days ago, I found Marc Rettig's Design For Small Screens presentation (PDF file) particularly relevant and informative.
Post a comment:
Comments on this entry are closed.
Don't see any comments? That's because my Web hosting provider has made a server upgrade that broke the commenting feature on this site. I'm working to restore that; please check back later.
February 11, 2003, 1:31 AM ET
Read our lead story: We dare you
A fun challenge: Visit The Woburn (Mass.) Daily Times Chronicle and time how long it takes you to figure out how to access the lead story.
This interface takes news Web sites to a new level of user-hostility.
Not only is the headline unclickable; once you locate the 12-by-12-pixel circular image link that takes you to the story, its measly size makes it unnecessarily difficult to click.
Users of non-graphical browsers, such as Lynx, aren't much better off. That circular image link lacks an alt attribute (explanatory text that non-graphical browsers substitute for graphics), which means Lynx and its text-browser cousins won't display helpful text explaining that link.
How to fix this? Make the headline clickable. And if the graphic must remain, enlarge it; Fitt's Law dictates it'd be a lot easier to click if it were bigger.
February 8, 2003, 11:48 PM ET
ESPN.com to redesign
Today I returned home from the University of Florida's Symposium on Converged Journalism, where I contributed to a panel discussion on "interactivity and news audiences."
One of the topics we briefly touched on is the ability of weblogs to break news online. Well, with that in mind, here's a development in the online news industry that I haven't seen reported elsewhere yet:
During the discussion of "Sports Journalism in the 21st Century," ESPN.com Executive Editor John Marvel mentioned his site, which is the world's leading sports Web site, will be redesigned in the coming weeks. He said, with much enthusiasm, that the home page would begin to feature video clips prominently.
It has previously been reported that the site "is plannng a 2003 debut for EXPN Action Sports On Demand, a broadband and subscription video-on-demand service targeting the genre."
Marvel declined to give me a sneak preview of the redesigned site.
February 6, 2003, 12:39 AM ET
Recommended reading
A few recently published articles of interest to developers of news/information sites:
- Joe Gillespie: Designing Effective Banner Ads
- Jay Small: I don't hate Flash; I just hate what it does to designers
- Usability News: The Impact of Paging vs. Scrolling on Reading Online Text Passages
- Usability News: Breadcrumb Navigation: An Exploratory Study of Usage
- Usability News: Cascading versus Indexed Menu Design
- Usability News: Aesthetics and Usability: A Look at Color and Balance
- Usability News: Examining Tolerance for Online Delays
- New York Post: News sites deploy for war coverage
- CyberJournalist.Net: Online Space Shuttle Columbia Crash Coverage
- Staci D. Kramer: Shuttle Disaster Coverage Mixed, but Strong Overall
Post a comment:
Comments on this entry are closed.
Don't see any comments? That's because my Web hosting provider has made a server upgrade that broke the commenting feature on this site. I'm working to restore that; please check back later.
February 5, 2003, 3:21 AM ET
FOXNews.com advertising should be labeled in all browsers
From the Society of Professional Journalists' Code of Ethics:
Journalists should distinguish news from advertising and shun hybrids that blur the lines between the two.
Ah, that stern creed we all learned in J-school. "Label advertising accordingly," we were taught. "It'll keep us credible."
It did, for the most part, for many years. Then the digital age came, and some news outlets stayed ethical, and others sold out, and others just kinda did both, depending on the weather.
But, mostly, online news sites did an OK job of labeling advertising. Now, though, there's an emerging problem with the way this is done: News sites are not taking into account non-graphical browsers and the ramifications of relying on graphics alone to distinguish advertising content.
An example: FOXNews.com displays a section of advertising links toward the bottom of its home page. Here's what that looks like in a modern graphical browser. (I've included the parts of the page immediately before and after the ads, to give context.)
The ad section's strong graphical resemblance to the other (news) sections is ethically questionable -- and flies in the face of the established convention that advertising should appear in a different design/typeface -- but that's not the problem I'd like to point out here.
The problem I'd like to point out here becomes obvious when you view this page in an unconventional browser. Here's a screenshot of the same section of FOXNews.com, as viewed in Microsoft Mobile Explorer Emulator, which "simulate[s] the activity of using a browser on a mobile phone"
, according to its documentation:
There's little to distinguish those advertising links from the genuine news links. Yes, astute readers will correctly suspect "FREE debt assistance" is advertising, but what of "Quality Dental Plans"? What of "Got Student Loans?"? The former could very well be the headline of a story in the health section; the latter sounds like a fluffy feature headline. An unsuspecting reader might see it, follow the link and be surprised (and irritated) when he or she realizes it's an ad. Or, worse yet, a reader might read the subsequent advertising content indiscriminately, believing Fox News -- not a paid advertiser -- was providing that information as a fair and accurate news outlet.
And let's look, now, at how Lynx, a text-only browser, interprets this page:
* Groups Petition Senators to Rename Building * Green Groups Protest Oil, War * Industry Insider Says Gun Makers Knew of Sales to Criminals * N.J. Lawmakers Scramble to Resolve Malpractice Insurance Crisis * Senator Seeks U.N. Resolution, More Information Sharing * Jitters on Wall Street * Cisco Posts Profit Despite Slipping Sales * Colgate-Palmolive Profit Boosted by New Products * Toyota to Open Next U.S. Plant in San Antonio * Casino Stocks Slammed by New Jersey Gambling Tax Plan [INLINE] [INLINE] [INLINE] [INLINE] [INLINE] [INLINE] [INLINE] [INLINE] [INLINE] FREE debt assistance Live Video Dating! Golf School Giveaway Quality Dental Plans Reach Your PC Remotely Compare REALTORS! Discover Card- 0% APR Rebuild Your Credit! Got Student Loans? [INLINE] [INLINE] [INLINE] Schedule | FOX News Bios | E-mail Shows | FAQ | FOX News Shop [INLINE] Find FOX News Channel in Your Area | Find FOX News Channel Abroad
Here, again, we see no difference between the news links and the advertising links.
Post a comment:
Comments on this entry are closed.
Don't see any comments? That's because my Web hosting provider has made a server upgrade that broke the commenting feature on this site. I'm working to restore that; please check back later.