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!

1. What is this?
2. What do they have here?
3. What can I do here?
4. Why should I be here – and not somewhere else?

The user needs to have some clue as to whether this page or website will give them what they want (have the information they need, the products they want to buy etc.). In that sense, what appears in the fold – whatever size that is for them – is crucially important.

You also need to make sure that it’s evident that there is more content further down to scroll to. I recently visited this page on the Exercise TV site (screenshot). On my screen the fold ends around Jillian’s mid-thigh. With the blue background, the text ending where it does, and the visual focus on the photo, it wasn’t apparent to me that there is more content further down. I actually didn’t realize it until I clicked on the link to browse videos and realized that it pointed further down on the same page. With widescreen monitors the scrollbar may be out of direct view, so conscious design is needed to tell the viewer that they should scroll to see more.

Via For a Beautiful Web, where Stephen Frein has a useful comment.

There is a reason why most websites have similar basic elements. It’s called usability. When users are trying to accomplish a task (find information, buy something etc.) they don’t need to figure out an entirely new navigation structure and page layout. They need sites to behave in relatively similar ways so they know what to expect and how to accomplish their tasks.

The Web can be a repetitive and boring place. Many Web sites look the same or are created based on the same basic principles.

That’s actually a good thing There is a time and a place for trying something new, and that’s valid, it’s just not something that’s appropriate for most websites.

So, the question is, what are the most innovative web designs of all time? I’ll have to give that some thought.

I first read about this in James Kalbach’s Designing Web Navigation (p. 45) just last week. The point is that people have better experiences with visually attractive things, making them easier to use. Emotions are a central part of any user experience:

“When you felel good it is easier to make decisions, brainstorm, and be creative, for instance”

Makes sense, doesn’t it? If you’re in a good mood you’re a lot more forgiving. On the other hand, if you’re in a bad mood, you get frustrated more easily, give up faster, and generally have a hard time thinking rationally.

In the ALA article, author Stephen P. Anderson also points out that:

• products have personalities, which influences user perceptions
• visual design is used to evaluate credibility

Next you can apply this to a design project. How does your design make people feel? Is this in line with user expectations? I think we do this instinctively as designers but it’s useful to think about it deliberately. You can also think about how your design may affect different audiences in different ways. Some audiences have different ideas about what looks good and what would make them feel good about using something. Consider any OFAD types you know

Now, about the term “eye candy” – Anderson equates “eye candy” to aesthetics. I never interpreted the term that way. Who knows, maybe it’s being used in different context from what I’m used to in some other circles. To me it means visual emptiness. Flash intros. Animated graphics. Mystery meat navigation. Something the PHB wanted the designer to put there to “catch attention”, which becomes lame and annoying after a month or two. That’s eye candy. Momentarily tasty, no nutritional value.

Replace colours in a vector graphic

1. Save your graphic as an SVG. You can use Inkscape, Illustrator, or pretty much any other vector program to do this.
2. Make note of your “before” and “after” colours as hex values.
3. Open the .svg file in a text editor. You’ll see some mark-up that looks much like HTML (that’s because SVG an XML specification).
4. Search for your “before” values and replace with the “after”.
5. Save.

That’s it! Now, if only Internet Explorer would support SVG so I didn’t have to export these as png’s…

Do you find these to be effective? I think from a design perspective they solve a lot of problems. Get a lot of links on the home page without cluttering the main interface.

The problem I find is that as a user I often miss them entirely. On Jason Santa Maria’s site it took me several visits before I even noticed it was there. Why? Because I didn’t scroll that far (on the actual articles there are often many comments, making the pages quite long. Most users wouldn’t read all those comments.)

What about my home page? Will people notice the Recent Posts block at the bottom? Will they think to scroll past the white? Granted, I was intentional in what I put there vs. what I put on the sidebar. It’s not exactly essential stuff.

Usability experts have found that users have learned to scroll (early usability research found that users wouldn’t scroll past the fold). But, do they scroll the whole page? Prioritizing Web Usability, Jacob Nielsen points out that users often won’t scroll further if they get the visual impression that there is no more content on the page. If users assume that the navigation ends with the top or left navigation bar, will they try looking further down for more links?

What do you think?

I also upgraded my photo gallery from Gallery 2 to Zenphoto. Liam ended up having to write a complicated sql statement to convert it, but I’m much, much happier with the new system. I’ve been using zen for a work project and find it to be much easier to work with than Gallery 2.

If you notice anything that doesn’t look right please do let me know. I haven’t tested the new design much in IE 7 and I know it doesn’t work right in 6 (too bad).

Well, browser manufacturers have caught on to this. Following in Opera’s footsteps, IE and Firefox are now implementing zoom as the default method of resizing text.

If this is the case, then do we still need to code layouts in ems or can we go back to using pixels? I’m currently coding a new layout for this site and I’ve decided to code it in pixels. It’s so much easier not to have to do grid calculation in ems and worry about what the current font size is. My grid unit is 24px. That’s it. Much better.

So, do you think it’s still worth it to code layouts in em’s? The non-zoom font resizing functions are still there. Will people prefer to use them over zooming?

Today sj at 37 signals posted an interesting counterpoint to my position. They don’t create mock-ups because, in short, they feel that it slows things down too much and just doesn’t make sense. I think this really depends on the context. If you’re creating something highly interactive then, sure, maybe it doesn’t make sense to do a static proof. On the other hand, if you’re creating a static web site then maybe creating a visual proof and getting your ideas together first is a good idea.

sj writes:

Photoshop puts the focus on production, not productivity. Photoshop is about building something to look at, but about building something you can use. When you’re just worried about how it’s going to look, you spend too much time on production value. HTML/CSS lets you be productive. You’re constantly moving forward towards something more and more real with every change.

Reasons why I like graphic mock-ups:

1. It helps to enhance creativity. I can play with a variety of ideas without committing to anything. I can quickly throw some things together (some colours, a grid, some shapes, a typeface) and get an impression of what the site will feel like.
2. Everything is more coherent. I’ve developed pages in the past that were added to iteratively over time. One thing gets added, then another, then something gets taken away. It always feels less coherent than something that had a graphic proof to work from.
3. It’s faster and easier to arrange page elements without constantly having to fuss with CSS. This is why I like vector programs for my mock-ups. Easy to draw boxes and push them around.
4. The design isn’t dictated by what’s easier to do in HTML/CSS.
5. Details are good. Good design is in the details. How big should the margins be? Should these rounded corners be 4px or 6px? Will this little gradient enhance the design? That’s certainly not the first thing I do but I do build those things in before the proof is finished.
6. Tools are available to apply and adjust grids. I know there are some browser plugins available to do some gridding but graphic design programs were built with this in mind.
7. You know what you need to build. sj says that a mock-up is wasted time because you have to build things twice. But how do you know what to build? I think if I were to start without a mock-up I would spend as much time or more writing and re-writing CSS. Sounds frustrating.

Some of the downsides mentioned in the 37 Signals post and the commenters aren’t all that serious. I dont’ know about you, but I understand that the real version isn’t going to look exactly like the mock-up. Sure, the fonts are going to look a bit different, some elements may need to be changed based on CSS limitations. That’s okay. It’s a mock-up, not a contract.

This blog may be the only site I’ve ever done without a graphic proof, at least since my very early days and that was only because I had a solid mental picture of what I wanted it to look like and I knew the layout would be simple. But then again, maybe I could have come up with something better if I did.

What about you? Do you feel that graphic mock-ups are important? Do you always do them or do you work directly in HTML/CSS right away? Can you think of any other benefits of creating mock-ups?

The new design is surely nicer looking than the old (although I didn’t really have a problem with the old design). They’ve made quite a few interface changes – some good, some not so good. Read on to see some screenshots and analysis of the new interface.

I must preface this by saying that I haven’t had a chance to read much about the new design – there may be some rationale for a lot of these changes that I don’t know about. I also don’t participate at the WordPress forums. Of the old WordPress admin panel, Happy cog says:

“There was a randomness and unpredictability to everything from the location of key functions to the number of items in the navigation menu.”

I don’t feel that the new interface is much of an improvement in this regard. In fact, I find some elements to be even more random and unpredictable than before. I gather that they were trying to keep the peripheral tasks out of the way, but what they’ve ended up doing is mixing different types of tasks and moving some things too far from where you need them.

Note: Screenshots of the old WordPress interface are available here (those are from a slightly older version but you’ll get the gist). In this post all screenshots link to the full versions.

The header

This is the new WordPress header:

Notice how they’ve split up the navigation links into 2 main places with some secondary links at the very top (They all used to be in one long list). My biggest problem with this is that the design link is in with the content editing links and not with the administration. As we’ll see below, the designers seem to think that WordPress users change their themes a lot. I don’t.

The dashboard link has also been moved way up to the top corner where you can barely even see it. The dashboard is an important page, the link to it should be more prominent.

The dashboard

The new dashboard layout is one of the most celebrated changes in WordPress 2.5. The old dashboard had a brief welcome bit with some quick links to common tasks and a sidebar with links to your latest incoming links, comments and posts. The bulk of the page was made up of recent news from the WordPress development blog. Not the greatest use of space.

The new dashboard has improved the information provided but I still think it could be better. Take the top section under the orange header:

One of my big annoyances with this page is the way they’ve done the incoming links box:

Almost everything about this is wrong:

• The list does not include the title of the post being linked.
• The link is on the word “saying”, not the post tile. We know now to avoid “click here” links, right? This is the same thing.
• The quoted text is the opening line of the post, not the reference to your post.

You can edit this box but that only allows you to change the number of items shown and the post date (which was not displayed by default, if I remember correctly). For me the option to show the date doesn’t actually work.

The incoming links box should:

• display the title of the linking post.
• display the date of the linking post.
• display the author/site title of the linking post.
• if possible, display the context of the link to your site.
• link the title to the referrring page.
• provide options to let you turn all of these elements on or off.

(And, yes, my backlinks are really pathetic!)

The post composer & editor

This is where you go to write new posts. In the new interface they’ve moved a lot of the options to the space below the post editor, instead of keeping them in the sidebar. The only thing they kept in the sidebar is the preview and save/publish links, plus a list of related links.

There are a couple of reasons why this is really annoying:

• When I finish writing a post, my eye is at the bottom of the post text box. Now I want to either preview my post or publish it. But where are the buttons to do that? Not right underneath the post box where they should be, they’re over in the sidebar near the top of the page.
• When i start writing a post I want to make sure I remember to enter the tags and categories. In the old interface this was next to the post box where I could see it from the start. Now I have to remember to scroll down below the bottom of the post box and fill in those options.
• Meanwhile, the permalink edit option is right at the top, under the title of the post. How does that make sense? (Not shown in screenshot – this only shows up after a post has been saved once)
• The new arrangement of the page, along with the larger size of headings and bigger margins means that this is a much longer page than it used to be. There’s a lot of unnecessary scrolling.
• The related links bit is really unnecessary because those pages are easily accessible through the header menus

The image uploader

One of the things they’ve added here is a media library feature that can be accessed through the write interface. It seems they think that WordPress users like to add a lot of audio and video and stuff. I don’t. Image uploading is enough for me.

The other problem with this tool is that it doesn’t actually work. I found out later that it uses flash, which is a bit of an issue in Opera/Linux. (Flash does work in Opera/Linux, it just doesn’t work well). I was fiddling around with my permissions trying to figure out why this didn’t work but it turns out that all sorts of other things could be going wrong. I didn’t get any error messages either.

I’m also not a huge fan of the lightbox effect. I guess some people think this is cool but for me it’s kind of lame and annoying.

Other new features

I am happy that the new visual editor works in Opera. I can write HTML just fine but when I’m writing I prefer to concentrate on writing and looking at mark-up gets in the way.

Tagging is fully integrated in the 2.5 which is nice to have. You used to have to install a plugin for that. However, I must wonder if it’s really necessary to include these things in core when they can be easily managed by plugins.

It is really awesome to have notification of updates to plugins and an easy way to install them quickly. Although now I know how to use wget and I’d rather do it that way…

Final thoughts

I guess this release was designed with a certain type of blogger in mind. Someone who uses a lot of multimedia and changes themes a lot. That’s not me. I’m not a super hard core wordpress user like some people. I like the platform but I don’t really have time to spend much time playing with it and participating in the community. I guess it’s time for me to delve into creating a custom CSS and checking out some of the plugins available for the admin panel.

Edit: I just came in to fix some type-os and once again attempted to scroll to the bottom to find the save button! This is going to take some getting used to.