I will be looking at four major Canadian Olympics sites:

• The Official Vancouver 2010 site
• The CTV Olympics site (official broadcaster)
• The CBC Olympic site
• The Toronto Star Olympics site

For each site, I will look at the home page, the event schedule, and a sample sport page (Nordic Combined, since I always forget what that is), as well as a few other standout features or things I come across.All four sites feature similar basic layouts with grid-based design and horizontal navigation. They all feature news content, video and interactive features, sport and athlete profiles etc. Three of the four have chosen to use a large graphic background image.

The Good

The CBC Olympics website is my favourite of the four. I like the clean, bright layout. Their colour scheme ties in to both the Vancouver 2010 site (blue) and the team Canada colours (red). It’s a unique combination that really makes their site stand out. The ribbon motif in the background didn’t make much sense to me at first, but now that I look at it I can see the movement that is reminiscent of many winter sports (sledding, figure skating, downhill skiing).

Their home page has a similar layout to the others, and also includes lots of features, but unlike the competition they have done a good job of highlighting interesting features. There’s more differentiation between the different features which helps to lead your eye down the page and focus on their best features. They’ve also used some unobtrusive javascript to fit more content on the page and help you to navigate more conveniently.

Before the Games began they had a nice, simple schedule in table form (similar to the one on the official site). Now they’re showing a weird table with little squares for events and blue dots for medal events. Hello, confusing! Lesson: when displaying complex information, it’s usually best to keep it simple rather than attempting to come up with something clever that just doesn’t work.

On the individual sport pages, content can sometimes be lacking (which sort of makes sense since they aren’t an official broadcaster). The Nordic Combined page, for example, features a lot of content that isn’t specific to Nordic Combined at all. The menu for this individual section is further down the page and easy to miss, especially since it’s buried between unrelated content.

I’m having fun with a cool interactive feature showing the geographic distribution of medals over the years (and also by sport). It’s fun to see how things changed after the breakdown of the Soviet bloc. This is a great example of how to use Flash appropriately. Just do the interactive parts in Flash (what it’s good at, and HTML/CSS is currently not), while keeping the text content as HTML.

The Official Vancouver 2010 site is a close second for me so far. It’s more complex and some of the details haven’t been worked out as well as they could be. For example, they’ve taken care to fit the design into a 1024 window while adding interest at higher resolutions, but haven’t considered what happens to people who don’t maximize their windows, and therefore see a cut-off image on the right side. There’s a big hunk of white space in between the end of the content and the footer (every time I see that I want to get into the CSS and fix it!).

I also like what they did with the event schedule. Simple list of events by time, with an option to view by sport with a drop-down from the top. In previous years they usually had complicated tables with icons for which sport was happening on which day, and you had to click through to see which events were on at what time. This makes it much easier to see what’s happening (and print for reference).

The Nordic Combined page is similar to CBC’s, but with more content and an easier to find navigation menu. I enjoyed reading about the history of the sport. There’s even an interactive quiz to test your knowledge of the sport (love the Millionaire style cheats available!).

This site also has an interactive feature showing medal distribution over time. I like this one as well, although it feels a bit less responsive than CBC’s (this one is done in JavaFX, not Flash).

The Bad

The Toronto Star is sort of a third party to the Olympic Party – not an official broadcaster or local city paper. But of course, they have to get in on the party too, and  it’s not all that pretty. As usual with their sites, the Olympics site is complicated with small text and lots of (intrusive) ads. They have used the same colour scheme as the Official site, which shows a direct link to the main event.

Their schedule page is very simple, with just a list of events. It’s not bad, but it’s a bit harder to read and takes up a lot more space than the Official site’s schedule. They don’t seem to have a page for Nordic Combined, so I looked at the Cross Country page instead. The design isn’t much, and there’s not a lot of special features, but they do have very strong news coverage (appropriately enough!).

The Ugly

CTV is Canada’s official TV network for the Games (unfortunately outbid CBC for the next 2 Olympics.). Their site takes on a simlar form to the others – grid-based layout with lots of features on the home page. I find this one to be the most cluttered looking of the four. Their colour scheme doesn’t tie in to the Official 2010 colours, working with Canadian team colours instead.

Maybe it’s just me, but I don’t find the graphic design to be very attractive. Their sharp, icy motif is a harsh contrast with the bright, clean look of the Official site and CBC’s. They use a lot of gradients and drab grey. Take a look, for example, at the centre section of their home page with the Results Spotlight, Latest Photos, and Medal Table. They use the same design scheme for their television graphics, where they aren’t any more successful.

Someone also made the (really bad) decision to create a separate domain rather than putting the Olympics site on a subdomain or folder on their main site. All that link juice down the toilet.

Their schedule is a grid with grey backgrounds to represent events occurring on that day and gold circles to show medal events. There are two dimensions of information that people might want to see on a schedule: What’s happening on that particular day, and when events are scheduled for a particular sport. This schedule attempts to show both, but doesn’t do either particularly well. The official site chose to optimize for events having day by day, while allowing users to click through to the event pages for the individual event schedules. Lesson: if you can’t accomplish all your goals in one interface, it’s sometimes better to optimize for one goal, while providing another interface for other objectives.

The Nordic Combined page, like the rest of their site, is very complicated and graphically heavy. A lot of the content isn’t directly related to Nordic Combined, but there’s no graphical differentiation to tell you what belongs and what doesn’t. Sometimes it’s hard to tell if a block is related to the page topic or not.

Other examples?

Have you seen other examples of Olympic websites that you’d like to share? What are the media outlets in your country doing?

There is a lot more I could say about the four I’ve chosen to profile here, but I only have so much time to type these days with a four month old at home!

Well, okay, I care a little bit. I was disappointed to see that, but it still didn’t leave too much of a dent in my overall impressions of the sites. I was intruiged by the methods they used to pull the user in and market their message. I think these are things that we all need to pay more attention to. There are other imperfections I could have pointed out in my reviews, but I chose not to because I wanted to focus on the key message.

Web designers often get so caught up in the code that they forget the bigger picture. I’m guilty of that too. We agonize over the finest detail of the mark-up, and delight over new CSS techniques and smarter ways of doing things. This happens with other web professionals too — we’re not alone. It’s how we become good at what we do. But while we’re focusing on the finer details of the code, who is worrying about the user experience? For the lucky few who work on specialized teams it may be someone else’s job. But for many of us it falls through the cracks.

I’m certainly not saying that it’s okay to use tables for layout. Of course it’s not the best way to design a web site, especially if someone is paying for your services. I would have been even more enthusiastic about these sites if they didn’t have those tables in there. I’m just saying that there are many more important quesitons we need to be asking ourselves: How can we communicate better? How can we market better? How can we create a better user experience? How can we pull the user in? How can we create an emotional connection?

Speaking of the photos, they are high quality and very engaging. I was immediately drawn to the slideshow on the home page. This is an example of user engagement on an emotional level - you feel the mission of the site when you look at those photos. You can’t help but become involved.

User engagement has been a bit of a theme so far in my Great Websites series.  It is very much an intangible quality, and it makes such a huge difference.

The EDGE site also contains a lot of calls to action. There are a lot of opportunities to go deeper into the site.  The purpose of the site is made clear in the right sidebar, with graphs and charts illustrating problems and calls to get involved. This reminds me of a recent post on Creating Passionate users about developing a conversation with your users. Usually this would be done with text, but the EDGE site manages to communicate in a conversational way using images and calls to action.

There are some things that could use improvement here. On most of the pages the content gets pushed down below the fold while donation buttons and photos take up most of the prime screen space. The donation button could be placed below the content, especially since most of the content is quite short and there is already a donation button in the right column. That would provide a natural next step after reading the content.

The page design is fixed width and locked to the side of the page – a centered design would make better use of the screen. Another design consideration is  the use of graphics to display headers and navigation text. These should be done in plain text so disabled users and search engines can read them better. Sometimes there are too many donation buttons that detract from the content.

All in all, EDGE is a great example of an engaging website. There are many things they have done that we can emulate to make our own sites more engaging.

Update 08/26: The site has changed quite a bit since I posted this review. See it as it was then on archive.org.

One of the things I noticed as I explored the site is that these people know who they are and aren’t afraid to communicate that to visitors. Right at the very top, even above the logo is a link to their “Declaration of Journalistic Independence”. Visitors can immediately see what makes this site different, expressed clearly and concisely in a written statement. I think this is something that a lot of site owners don’t consider and can really make or break a site: Who are you? What makes you different from other sites? Why should someone visit your site and not another one? Write it down, and don’t be afraid to show it.

The site also does a great job of communicating it’s strengths to new visitors. If you haven’t visited a site before, it’s nice to know about their best articles and have some direction in exploring the site. The right sidebar on the home page does this very well. I also liked the NewsTarget Stats at the top (more on that later) and the other interesting tidbits found in the sidebar (although some of that should be moved to the left side so the sidebars aren’t so uneven). I do find the testimonials on the left to be rather self indulgent, especially since they push key navigation down below the fold. On some pages they’ve even got a highlighted intro for people new to the site and a link to another page that explains what this site is all about (not sure if I agree with how that is presented though). Good idea in principle though

Now, about that NewsTarget Stats section. What I like about this is that they even tell you where they’re getting their revenue. From reading the Declaration of Journalistic Independence it’s obvious that transparency is important to them. This bit also sends a key message to visitors: websites need to get money from somewhere. Gasp! You mean websites aren’t free??? Nope, sorry. At the bottom of each article you’ll also see a line encouraging people to donate using their Amazon.com donation buttons:

Do you find value in articles like this one? NewsTarget needs your support. Click here to learn why or click on “Click to Pay” below

I think that there is a lot of potential in donations as a method of financing websites and I like the way this site has presented them. What I don’t like is the way that Amazon.com has pulled my name into their donation buttons. That’s a little much. The “click to pay” statement is also a little misleading, in that this is a voluntary donation not a payment.

As I browse around the site some more, I also notice blocks on some pages that highlight “Action Items”. This is a great way to get the user to take the next step and become more involved with your site. As evidenced by the growing social networking phenomenon, people want to get involved. They want something to do on your site. Give it to them!

The lessons from this one? First, know who you are. If you’re clear on that all other decisions are easier and the results are much better. Second, consider donations as an alternative to advertising for financing your site. Introduce them in a way that highlights the reasons for doing so and invites the user to contribute. Thirdly, give visitors something to do on your site, and take the opportunity to higlight the options whenever you can.

P.S. I’ve just created a new category called “Great Websites”. I plan to continue writing about good sites I come across and attempting to define what makes them great.

Update 08/26: I Stumbled upon this site again recently and was disappointed to see some not–so–good changes to the site. The right column is now a list of what looks like ads. There’s also a lot of agressive promotion of their email newsletter, which takes up significant screen real estate on the article pages. In fact, there is a lot of junk on the article pages other than the article content, including a lengthy list of testimonials from subscribers. A lot of this was there before but for some reason I’m noticing it a lot more this time.

Well, maybe not. I found myself increasingly drawn in to the site. I wanted to explore. There were many items on the page I wanted to click on, and more interesting articles as I went deeper into the site.

Why was that? What makes this site so engaging? The design, although simple, is engaging. The colours are bright and energetic, with a strong contrast between blue and orange (on opposite sides of the colour wheel). The friendly character on the front page immediately gave me a good feeling about the site. Here they are using a friendly, encouraging message to prompt change (rather than using scare tactics or scolding). The other pictures on the page are bright and interesting, yet don’t detract from the central message. There is a lot of content on the page to suck you in.

When I started to take a closer look I realized that it wasn’t just the design that was drawing me in. It was the writing. Almost every piece of text on the front page is an attention grabber. It draws you in and makes you want to take the next step. Calculate now. Get list of best fish. Take a survey. Watch the ads. There is stuff to do here.

As I went through the site I noticed more and more examples of great writing. It’s succinct and clear, but also friendly and engaging. The key text (links and headlines) are written in a way that tells you exactly what is there and makes you want to go to the next step.

We can all learn from sites like this, even if it might not be worthy of a CSS gallery. They’ve also got a partner site on the fishing issue, Ocean’s Alive. This site has a really fun and engaging flash game (… although I’m not convinced it’s a good idea to put it on the front page!).