Fixing CMS usability issues with JavaScript
At work over the past few weeks, I’ve been writing some JavaScript to fix several of my pet peeves with our Vignette-based content management system. There’s a lot that can be done with manipulating the DOM. My little scripts aren’t remotely innovative uses of the DOM for news sites, but they do let me change some things in HTML that is otherwise out of my control:
- Putting the article headline in the browser window’s title. Try visiting an article with JavaScript turned on in a modern browser. You should get “TCPalm: PSL growth outpacing police force” in the title of the window. Visit again with JavaScript off, and you’d see “TCPalm: News.” The CMS itself only puts boilerplate in the page title (in this case the section name), which is not a good system for page titles.
- Linking the site’s header logo to the home page. On that same article page with JavaScript on, the TCPalm.com logo in the upper-left corner (we call it the “sun dude”) links to the home page. With JavaScript off, there’s no such link.
- Removing URL crud. With JavaScript off, section URLs look like this: http://www.tcpalm.com/tcp/stuart_news/0,1651,TCP_1001,00.html. The JavaScript removes the ugly Vignette cURL on links to sections: http://www.tcpalm.com/tcp/stuart_news/.
- Adding a “not found” error message. If you tried to access a nonexistent article or one that expired, you used to get a “blank page” rather than an error message. Now, with JavaScript on, at least you get some kind of error screen.
For the record, I hate it when sites depend on JavaScript to display content. But since I can’t control some of the CMS’s HTML directly, JavaScript is really the only tool I have to make these usability improvements. I’d rather some of my site’s visitors have a more usable site, even if I can’t improve it for everyone. I wonder if other news sites could use (or are using) JavaScript to “fix” the underlying CMS?
Thanks for the article. Checking quickly in Opera 7.5 Preview 2 it appears that the section URL's are cruft free and the not found page work, however the title and logo URL tricks have no effect. Opera 7.x is normally pretty good in comparison to IE 6.x or Mozilla / Firefox.
/michael.
Ha! Man, these hacks are brilliant -- particularly the 404 page. I laughed out loud when I peeked at the code and saw it was looking for a table with a width of 460.
The icing on the cake is the all-caps note to "DO NOT REMOVE THIS SCRIPT -- SEE NATHAN" in the source. Translation: "Don't even attempt to understand the hackery happening here. Just talk to Nathan." :-)
/Michael, thanks for the note about Opera 7.5. Everything did work correctly in Opera 7.0, so I'll have to check on that.
Adrian, yes, it would have been MUCH nicer to have been able to use getElementById() rather than getElementsByTagName(). Since I couldn't, the way some of the scripts find the nodes they want is quite klunky. But somehow it seems to work OK.
I would have thought that software that costs so much would have covered this but then again, I work with a few cms systems myself and there are alot of them that have the exact same problems that you've had to deal with.. Must be pretty common these days for cms developers.
Cheers..
Chris, I should have clarified: Almost all of these problems are my personal issues with the custom content management system built on top of the Vignette platform, not limitations of the platform itself. So blaming the platform for these problems would be like blaming a compiler for the bugs in your source code. But that said, given how much some of these CMS platforms cost, you’d think there wouldn’t need to be much development done (and thus bugs/problems introduced) on top of them. But there is, so everyone has to reinvent some wheels, and that, in my opinion, is where these application-level problems arise.