If you visit CBC.ca for everyday for news, like I do, you’ll have noticed their newly-designed website that went live today. My initial impressions were very positive – right away I noticed the new site had paid good attention to detail, in regards to web-standards, semantics, good design and the like.
For most people, this change will amount to the new layout and styles applied to the website. This amounts to a greater focus on today’s “Top Story”, as well as special features such as their kids section and online radio. Online feature stories were also given greater precendence over mere headlines, which were moved below into neatly organized panels – an overall greater focus on in-depth online articles, rather than just everyday news headlines. The new design definitely looks “more busy”, but not cluttered, in my opinion.
It’s also interesting to note that the design folks at CBC took a lot of user input into account when doing the redesign.
We embarked on the redesign process about 15 months ago, starting with a massive study conducted for us by Decima Research. The survey asked your opinions about dozens of elements of CBC.caโs design, information architecture and content โ and, over just a few days, more than 5,000 of you filled it out for us.
The results of that survey, combined with the feedback we get daily through e-mails, phone calls and our online forms, formed the basis of this redesign. Our goal was to improve the site for you, by making it easier to use and giving you more of the features youโd like to see.
Overall, the site looks a lot more user-friendly, and definitely in step with “modern-looking” sites. RSS feeds have also been added, something that was in dire need, especially on a news-oriented website. The site may end up looking a lot like other news sites (CNN.com comes to mind), and while this may be criticized as a lack of creativity, sometimes congruence is helpful when browsing, to better give the sense that this is a news site, and not something else.
But of most interest to me was the transit to a standards-based, semantic website that properly separated content from style. Upon a quick first inspection, the site appears to make good use of proper XHTML elements, with not too many generic div elements used. This should make the site more friendly and accessible to a variety of browsers, especially those for the visually-impaired. The move also signals CBC‘s commitment to web standards, something that, while having its share of growing pains, should help improve the state of the Web now and in the future.
The site also does a fairly good job on separating style graphics from content images – though the link images at the top should probably be put in place via CSS, and not be part of the markup. Another more serious problem would be the use of inline Javascript; in particular, the use of Javascript to submit the search form should have been avoided, as seen in this attribute:
onclick="javascript:forms.gs.searchWeb.value='cbc';
forms.gs.submit();"
I’m not sure what they’re using Javascript here for (as I haven’t bothered to look at everything), but chances are, whatever effect they are doing could be accomplished by using an external script file and then using event registration – all of the major browsers support this, and it results a better site because you don’t have messy inline Javascript calls in your markup. They are also using several onmouseover
attributes to dynamically change images, which again, can be accomplished in a cleaner way using event registration.
Which brings me to my next point, that while CBC.ca did a good job of separating content and style, they were a bit sloppy when it came to content and behaviour. While the styles and visual layout information were separated out in a style sheet file, the Javascript governing behaviour was not. The mass of onclick
and onmouseover
/onmouseout
attributes attests to this.
But don’t get me wrong. I have a very favourable attitude towards the new CBC.ca, and I while I may seem nitpicky here, I applaud their efforts as a move in the right direction.