September 1, 2006

Makin’ it worse: Packers.com redesign

September 1, 2006, 5:55 PM | 0 Comments

Yesterday the Green Bay Packers launched their latest redesign of Packers.com, the official website of the Green Bay Packers franchise. At first I was excited to hear about the redesign, hoping that they would improve upon their 2005 redesign, which was a giant step forward. I’m sad to say however, that the new version of Packers.com is a step backwards in many aspects.

First, let me make one thing clear: I am a huge Packers fan and have been so for several years. Bad redesign or not, I will still continue to support the team and visit the site on a regular basis. The only reason I’ve decided to post my thoughts on their latest redesign is because I would like to see the website of my favourite football team reflect the identity, history and prestige of the Green Bay Packers franchise.

The main goal of any site redesign is to improve on what was already in place, and I feel that this redesign does not meet that goal. Granted, most sites for NFL teams are not exactly great examples of “good” site design (in my opinion). Usually these sites are extremely busy and include far too much content on the home page and often the navigation is just as busy which makes finding the content you’re looking for a little tricky sometimes.

Design:

Honestly, I think this is by far the worst aspect of the new site. My first impression of the site was that it reminded me of the type of design that was really popular around the late 90’s with all its chunky 3D graphics and jagged rounded corners. Internet Explorer users even get treated to custom coloured scrollbars! (Which by the way, don’t even resemble team colours).

Speaking of team colours, overall the site’s colours are pretty good and do reflect the team colours. I would’ve picked a lighter shade of gray, but that’s just getting really picky. The football texturing on the header is a good idea and I do like the “Packers.com” logo that looks fairly college/university apparel inspired. The thing that I don’t like about the header though is that the brown seems to be a little on the washed out side and looks more like mud or clay than a football.

While I don’t like the aesthetics of the site’s navigation, it’s clear, easy to use, and because the site has so much content, drop-down navigation actually makes sense here. The content modules have an odd navigation system where the green buttons are the inactive ones and the gray buttons are active. This seems pretty backwards to me and took me a while to realize which was which.  Maybe it’s because usually gray is associated with something being disabled, but it just doesn’t feel right to me. In case you’re wondering about the picture to the right (or above if you’re viewing this without the benefit of CSS), yes, the “Schedule” section is the selected item in that module.

Accessibility and Usability:

Here’s where the redesign basically takes all the rules and best practices and seemingly discards them without a second thought. The site is table based, which based on all of the previous versions of Packers.com (and all of the sites in the portfolio of the company who developed the site) was to be expected.

As we all know, just because a site is using tables for layout doesn’t automatically mean that it’s inaccessible, but there are plenty of other things that make the new site almost completely useless to anyone who’s not using a full-fledged browser. Just for fun I decided to look at the site in my cell phone’s browser to see how it would look and let’s just say that it didn’t fair so well.

Pulling up the site on my cell phone also allowed me to notice one glaring mistake… none of the site’s content images had ALT tags set, so all I got to see was a plethora of image outlines with no idea whatsoever what they were for. Upon further review of the source code I found only 7 occurrences of ALT tags and in every case the value was empty.

Another problem is that the site is very slow to load initially (it took me almost 30 seconds for the initial load) because there are so many images, no doubt caused by all of the rounded corner images, spacer images and all the content that loads in all at once. Images aren’t bad, but when the home page takes 30 seconds to load on fast broadband connections, that raises a couple of flags. I did a count in my text editor and found 895 image tags just on the homepage. The size of the homepage download with all its supporting files is approximately 1.5 megabytes, which normally wouldn’t take 30 seconds, but when you’re making 900+ separate requests for files it’s understandable. (30 seconds is nothing compared to how long it took for my cell phone to load the site).

From a usability standpoint, if you don’t have Javascript enabled in your browser, forget about it. Graceful degradation is a term completely foreign to this site. There seems to be a lot of hidden content (activated by rolling over the menu items for all the modules) that loads in right away that could easily be made better by using AJAX to download it on demand, rather than bogging down the initial load-time. To their credit though, some content does seem to be loading on demand, but I’m not too sure about that.

But there’s some good in all this… right?

Of course there is! Some of the new features and modifications are really good. Packers.com has always been on top of offering a lot of great media. Audio, video, photos… you name it and there’s lots of it. The media section is now more tightly integrated into the home page, making it easy to find all kinds of audio/visual goodies. One problem though was that the videos wouldn’t play for me in Firefox, but worked fine in Internet Explorer. Sadly, their ‘cutting edge technology’ (a direct quote from a video of the President and COO of the Packers welcoming fans to the new site) seems to only work in IE.

While nothing ground-breaking, I really like the scrolling stories on the homepage. NFL.com and ESPN (and many other sites) have been doing this for a while and I think it’s a great addition to the site. And finally, finally, FINALLY they have an RSS feed for all their news, stories and articles. This is something I almost emailed their web company about last year, so I’m excited to see it.

Conclusion:

I’m sure the team that worked on the new site had extremely good intentions, but to me the design of the site alone just doesn’t do it for me. Even if it were table-based, spacer-gif ridden and completely inaccessible but looked and felt really good I would have a better opinion of the site, but I feel like the old design was a much better representation of the Packers brand.

From a web professional’s stand-point there are so many more things to be disappointed about in this site than there are to be happy about. I am not naive enough to believe that there aren’t some Packers fans that have physical disabilities that make browsing this site incredibly difficult. I also know that sports fans are becoming more and more tech savvy because of services like Mobile ESPN and more and more fans are using their cell phones to browse the web to find scores and stats.

You can argue that if I don’t like the site that I can just use the RSS feed and leave the site alone, but that’s not the way I use RSS. I’ve always used RSS to keep me up to date with my favourite sites. My RSS reader only shows me the first little bit of content and when I see a story that I want to read, I always visit the site.

It really is a shame because Packers.com contains a vast amount of high quality content that is otherwise very well organized and well thought out. There’s a reason that Packers.com is one of the top 5 team sites every year.

So… What do YOU think?

I’m curious to know what other Packers fans, NFL fans, sports fans, designers, and other web professionals thoughts are about the redesigned site. Post your comments below and let me know what you think. I get email updates from the Packers (so I knew this redesign was coming) and I saved a screenshot, so for visual reference, here’s a screenshot of the old site.

I’ve also gone through the sites of all the NFL teams just to see where this latest version of Packers.com fairs compared to the other 31 franchises, and I’d like to have a vote. Check out the other sites (the list is below) and vote for the ugliest NFL team website in the poll at the top of this entry. (I’ve limited the poll to 9 choices… 32 options would be too much so I’ve picked one team from each division to compete for the title). And in case you’re wondering, as far as I can tell only 1 site out of the 32 NFL team sites has a CSS based layout… that’s only 3.125%! Congratulations to the Baltimore Ravens for being in the minority!

NFL Team Sites:

AFC East:
Buffalo Bills, Miami Dolphins, New England Patriots, New York Jets
AFC North:
Baltimore Ravens, Cincinnati Bengals, Cleveland Browns, Pittsburgh Steelers
AFC South:
Houston Texans, Indianapolis Colts, Jacksonville Jaguars, Tennessee Titans
AFC West:
Denver Broncos, Kansas City Chiefs, Oakland Raiders, San Diego Chargers
NFC East:
Dallas Cowboys, New York Giants, Philadelphia Eagles, Washington Redskins
NFC North:
Chicago Bears, Detroit Lions, Green Bay Packers, Minnesota Vikings
NFC South:
Atlanta Falcons, Carolina Panthers, New Orleans Saints, Tampa Bay Buccaneers
NFC West:
Arizona Cardinals, St. Louis Rams, San Francisco 49ers, Seattle Seahawks

Posted in: Design, Sports, Web Development