Let’s have some fun: A non-political critique of the Canadian political party websites.

With the election just around the corner, I thought it might be fun to impartially analyze the websites of the parties we’ll be voting for in just a few short days. We’re not going to discuss economic policies, the green shift, or anything else remotely political, just a completely subjective review of the websites themselves by a member of the industry. The sites will be judged on three criteria: Design / Aesthetics , Usability, and Technology . Please keep in mind, we’re just having a bit of fun here, feel free to disagree with my conclusions in the comments section, but let’s keep it light and fun.

Conservative Party of Canada - Conservative.ca

Unfortunately, this one is going to hurt a little… I tend to lean to the right in the political spectrum, but I have to be impartial here and there are some fairly significant issues with the site.  So Let’s take a look at our first candidate.

Design:

One of my biggest pet peeves with the Conservative website design and graphic structure is their overuse of the “shrugging Dion” as I like to call it:

At one point in September, this image was the central focus of 3 - 4 different banner boxes on their homepage. They’ve taken an effective image and used it so much that its effect has been lost and now I groan every time I see it.  Toning down the usage overall is a dramatic improvement for the site.

Overall the conservative site doesn’t look terrible, but it lacks polish and the little touches that really make a site design stand out. When it comes to the design of a website, it’s the small details that move it from the realm of a decent looking website to one that will be memorable for your visitors… I don’t think we need to present the case of how important making a memorable impression on visitors in this case! Consider the navigation on the Conservative website:

versus the navigation of a recent client of ours:

The Conservative website navigation isn’t horrible, but the wide spacing between navigation looks awkward and their navigation links consist of just black text, and don’t even incorporate a simple mouse-over. The end result: navigation that looks okay, but is completely unmemorable.  The design is full of issues like this, resulting in a design that isn’t hideous, but borders on boring and forgettable.

Usability:

It doesn’t get much better here, unfortunately.  Navigating the site, we discover that the menu items have what I like to call “shy drop-downs”. Basically, if you’re a little slow moving the mouse down from the main navigational item to the actual drop-down (think an older, less experienced computer user), then the drop-down menu disappears before your mouse cursor gets to it. Fortunately this issue only happens in Firefox, and isn’t an issue in Internet Explorer. That being said, this is a fairly significant usability issue as it can exasperate a user while they try to navigate through a site and can cause them to leave in frustration. The fact that this wasn’t caught and fixed (15 - 30 minutes tops) shows a bit of laziness or lacking understanding of the need for cross-browser testing. To put it in perspective, do you think a candidate would ignore setting up clear communication between around 30% (the approximate market share currently held by Firefox) of his or her riding because it would take an extra 10 - 15 minutes? I think not!

A less significant issue is the file size of the header banners on the site. They are unoptimized jpeg files that are all pushing 10o kilobytes of storage space. This is bad for a plethora of reasons… users on slower connections may have to wait even longer to load the page, and the site ends up eating more bandwidth (2/3rds more from the banners alone) than it should. The more bandwidth used, the higher the cost of maintaining the site. I optimized one of the banner files in about 5 seconds as I wrote this article and I managed to reduce the file size to 1/3rd of the original file size without any noticeable difference to the image itself. If the larger files aren’t optimized, then it’s likely that none of the files are optimized, which results in longer loading times and significant amounts of bandwidth (and therefore money) being wasted.

What I do like is the inclusion of all the videos and tv ads on their homepage. The Internet and webpages in general are becoming more and more about video, so by including many (if not all) of the video right on the website, they’ve done the right thing. By using flash video, they’ve chosen a technology that will be accessible to most everyone on the Internet.

I also like that they’ve added a “Virtual Campaign Office” for visitors to join. Not only does this allow them to leverage the efforts of supporters around the country to promote the Conservative campaign, but they can help build their mailing list of Canadians who support them. Depending on the response from visitors to their site, this feature could be a huge boon to the Conservative campaign. Also, the added feature of a simple form to allow someone to easily order a support sign from their riding representative is a really great tool that makes lives of visitors to the site easier, which should be one of the primary goals of any website.

The integration with social media is fairly forward thinking, but I question the use of  some of the social sites. One such site is Twitter, a service that seems a bit juvenile, while another is digg.com - a site that is largely made up of American users. The chance of successfully leveraging of its user base are slim to none.

Technology:

My biggest gripes with the site are things that are under the hood,  so to speak,  and not seen by your typical user.  The site is built on tables rather than CSS, and since that probably means absolutely nothing to you,  let’s see if we can come up with an analogy that will put it into perspective… Tables are like a 85 clunker and CSS is the latest 09 model before it’s rolled off the dealers lot. Think of tables used to build the structure of your website as mold in your walls: you don’t necessarily see it, but it’s still very bad.

Conclusion:

While the website isn’t terrible, it doesn’t really live up to the standards that should be maintained for a nationally recognized political party. It’s likely that the design of the site was either built in-house by an internal jack-of-all-trades IT team who can make a website but don’t really have a full grasp of everything, or it was developed by a company with a firm grasp of programming but a lack of direction in the design department.

Liberal Party of Canada - Liberal.ca

Things are looking up! I may not be a fan of their political agenda, but while their website isn’t perfect, I’ll have a lot more nice things to say than I did about the Conservative site.

Design:

While I wouldn’t say the Liberal party website knocks my socks off, it’s definitely more polished than the Conservative site. Basically, the site is more or less your average, large corporate website. Fairly spartan, and not much to draw the eye, but polished and appropriately arranged content.  I don’t really have anything to complain about, but at the same time there’s nothing that I really like about the design either.

For me, the most “exciting” part about the design is the light Flash  powered homepage content that loads boxes in the middle of the content area on the fly, based on what you mouse over. It’s a neat effect, but it seems like it should be in a more aesthetically pleasing site, and almost feels out of place in the minimalist Liberal layout.

Usability:

The benefit of the site being so light on graphics is that it loads very quickly for just about anyone, and the few images they do have are optimized properly. There are no glaring cross-browser issues, and the site seems to operate well in both Internet Explorer and Firefox .

Almost everything is easily accessible and they have also included prominent links to forms for requesting a lawn sign, donating, or joining the Liberal party. I really like the latest headlines section, as it allows them to highlight their most recent news, I just wish it was more prominent and not hidden all the way at the bottom.  Again, I’m not a huge fan of the Twitter usage, it’s just too kitschy, but thumbs up on the other social media / networking integration and on the video. However, I’m slightly disappointed I can’t play an embedded video right on the homepage.

The RSS page is quite slick, but it’s another one of those great features that they’ve hidden away with just a tiny link to it in the footer, and another link at the bottom of the newsroom menu item that you don’t see unless you’ve moused over the newsroom text. It doesn’t take a lot of space to place a RSS icon on the homepage and there is definitely room.  Another small issue I’m not a big fan of is forcing users to click on e-news to be presented with a two field e-newsletter signup page. Statistically, with every click you add to a website process you will lose visitors who would have taken the action you want (in this case, to sign up for the newsletter). The two fields could have easily been incorporated somewhere on the homepage to eliminate that click-through.

My final complaint is the usage of space. There is a big chunk of white space in the main column, just below the green notice about their copyright agreement with GreenShift Inc., that doesn’t add to the design. This space could be filled with more content for visitors, along with a number of other options. One choice could be having the main graphic area moved down to make room for a subscription form for the newsletter and a more prominent RSS link. That’s just one example off the top of my head. While the space may not seem that big, there’s a lot that could be done with it and right now it’s just wasted space.

Technology:

The site’s structure is laid out with CSS and contains no tables. It warms my heart to know that at least one of the major political parties has built their website on current technology. Compared to the design, what’s under the hood of this website is fairly impressive. Not only have they implemented AJAX (which allows for smooth transitions between content to decrease interruption of the user experience, among other things), but they’ve incorporated dynamically-generated related videos and stories for almost every page on the site.

Conclusion:

The reliable family Sedan. It’s not flashy or expensive, and it most certainly won’t win any prizes, but you can rely on it to do an adequate job. My guess is that this site was put together by a team / individual with a solid grasp of standards and the latest code, but a less masterful (but acceptable) handle on the design portion .

New Democratic Party of Canada - NDP.ca

We’re making strides in the design department, but it looks like we’ll be taking a few steps back on usability and the technical side of things.

Design:

Leaps and bounds ahead of both the Conservative and Liberal websites, the site is both pleasing to the eye and uses space fairly well. There is a bit of white space at the bottom of the left and right columns, but filling that space could potentially make the site look too busy. When comparing this site to the previous two, it’s blatantly obvious that more thought and effort was put into the design of the NDP site. The icons and graphics all flow together and fit in nicely with the overall design.

The only minor issue is the mouse-over on the top Navigation. The mouse-over graphic doesn’t in all cases cover the grey lines that separate the navigation, and it looks almost like a website error when it sticks out the side of the mouse-over colour.

Usability:

The Good: An e-newsletter sign-up box right on the homepage, removing the need to click through to another page to subscribe.  A simple and easy-to-operate video player that lets you watch most , if not all, of the NDP videos right from the homepage. I’m a big fan of how the news stories are prominently displayed in the left column.

The Bad: Here’s where things start to go south. I had to click 4 pages deep into the navigation to get to a page that would allow me to request a sign for my yard. Since we know that every click you add between the homepage and the desired action you want the user to take decreases the amount of users who continue the process, this will directly result in fewer NDP signs on yards. For the party, this should be a significant concern. I really question why they didn’t create a link right from the homepage, such as the ones we saw on the Liberal and Conservative websites.

A minor issue in the Top News Stories section, users must click on “read more” to get to the full story. Why can’t they click on the actual text of the story to get there, too? Remember: always make it as easy as possible for your users. They’ve also hidden away the RSS and French site links in tiny text to the left of the navigation.  Some visitors will not even see these links, and if someone they happens to prefer to view their sites in French, they may leave with a bad taste in their mouth.

Technology:

Unfortunately, even though the NDP site is appealing to look at, a glance behind the curtain reveals a design structured by tables. From a technical standpoint, this washes away a lot of the things they did right.  It’s always disappointing to see a site with such a nice design that uses obsolete technology behind the scenes.

Conclusion:

A really nice-looking site that is plagued by some serious usability issues and outdated technology under the hood.  In very simple terms, we can split a website into two parts: the design and the code. Unfortunately, most of the time only one is done properly while the other suffers, and we’ve seen this in every site we’ve reviewed here.

The Winners!

Best Design:

Hands down, the NDP website is tonight’s belle of the ball. It’s unfortunate that it came up short in some other crucial areas which are arguably more significant than design.

Best Usability:

The Liberal Party website inched ahead of the Conservatives due to a few major issues.  For the most part, the issues with the Liberal site were all relatively minor, so they pulled into the lead.

Best Technology:

This wasn’t even close, as it is the only site built with CSS and not Tables: the Liberal Party site started with a huge lead, and only increased from there. Slick AJAX implementation and solid structure secured the Liberal victory in the technology catalog.

Overall:

Winning two out of the three categories and having a decent (albeit nothing special) design has secured the Liberal Party of Canada’s site with the gold ribbon of this independent, non-partisan comparison. If only we could look at traffic and usage data for their websites to compare the effect they had on the campaign… That would make things even more interesting.