Categories
Internet

TSN.ca: Reloaded

Yes, there's a brand new TSN.ca in town. This morning at 9:00am ET, TSN.ca relaunched with a brand new face. While not a full “relaunch” per-se, it was a reload of the new home page, and a little bit of a change on the back end. Gone are nested tables within tables within tables within tables. In is CSS and stylin' table-free design.

The new front page is about 1/2 the weight of the old page, loads twice as fast as the old page, and contains 40% more information thanks to the new “4th bar” which will be great for the 85% of our users who are at 1024×768.

By the numbers:
Lines of code in the old front page: 1014
Lines of code in the new page: 513
# of characters in the old page: 58,121
# of characters in the new page: 35,063
# of tables on the old front page: a buttload
# of tables on the new front page: 1 (for the masthead/banner combination, someday I'll figure out how to eliminate that one too).

The new front page uses SIFR, which I love, and a lot of really sweet CSS tricks to get the work done. I've had to drop out some support for IE 5.0 users, but hey, when you're using a 5 year old browser, you're probably used to not seeing all the cool stuff. Netscape 4.7 users are totally out of luck. Sorry friends.

So far the response has been mixed. The response in the building is “Nice site, love it.” The response from users is “We fear change, go back to the old look” (which is what people said about the last relaunch), and the response from the jerks is “Way to sell out TSN, you look just like ESPN now.

Now's a great chance to use my comments. Got something you love or hate about the new design? Let me know.

***UPDATED June 23rd***

24 hours after the launch and we're still tweaking things, getting rid of little errors, and modifying stuff. We've tweaked the fonts, set a base font of 12pt (which I hate the fact we had to do it), and cut our size in half. The actual HTML page was tiny, but all the images etc it was caching were HUGE!

There are still a bunch of validation errors, but it's coming along.

We're also starting to get some notice for the site changes. Today Dave Shea's Mezzoblue gave us a shout out which is pretty cool. Zen Garden has been inspirational for me, and he's helped to revitalize my love of the web. Thanks Dave!

Update: Comments have been closed on this story thanks to the comment spammers out there.

By Brian Garside

Brian is a digital experience expert, and part time internet superhero. He focuses on digital first design, digital strategies, content management, website usability, and user experience. He was part of the team behind BalanceDo, the co-founder of All New Comics, and the chief strategist at NorthIQ.

24 replies on “TSN.ca: Reloaded”

Hi, I like the new layout even though I’m not a big fan of CSS layouts. Even though they may save a bytes there really isn’t a proper (implimented) standard for browsers. One thing that I’d love to see is TSN.ca forcing their advertisers to use STATIC ads only. Nothing is more distracting than flashing and blinking text especally if you are trying to find something through 4 columns of information.

Jab: Get some glasses! Actually your problem probably had to do with the scalable fonts we were using, since it was causing too many problems we took that out of users’ hands and reverted to a 12pt font size.

Nesser: CSS Layouts are indeed web standards compliant.

The problem you’re facing is that some web browsers don’t implement standards in the right way (I.E. 6.0 I’m looking at you), this is becoming less and less of an issue since browsers are all starting to behave in similar ways. Sure you have your casualties (Netscape 4.7), but most browsers (even IE 5 and 5.5) can handle standards compliant sites.

This site itself is all CSS and Table Free layouts, and it works fantastically in every modern browser.

how can you be proud of ripping off espn’s design and doing it badly. i’m sure that’s what they wanted. however, somewhere along the line someone made the decision that espn.com was going to be MAJOR influence on your design. who was it: yours or their’s?

p.s. don’t forget to post this. thanks!

For the H3’s on the right-most column, you could have set the 3 line underline as a background anchored to the bottom of the h3. That way, if a user increases their font size, the underline will always remain at the bottom of the h3. Otherwise, looks decent enough. 🙂

Yes TSN.ca is 45% owned by ESPN. We have a mandate to use the same font package, and our logo was redesigned to incorporate ESPN’s look three years ago.

“Dave” from a.com, your comments would hold more weight if you didn’t post them anonymously.

I’m confused though how we people can say we “ripped off ESPN’s design”. Yeah we have similar logos (and we have for 3 years), but that’s kind of where the similarities end. They have 4 columns, 125px, 375px, 260px and 230. Ours are 125, 340, 300, and 225px. We both use sIFR (which was designed by ESPN’s Shaun Inman), but that’s about it. We have different ads, different content fragments, and we make good use of the 4th column.

While the pixel differences may be slightly different, the columns in combination with the drop shadow are similar enough to evoke the same feel as the ESPN site. But that’s not unusual among web site “genres” to see such striking similarities.

Honestly i was dissapointed, i loved the last site refresh, but the new menu works poorly in firefox(loses arrow in rollover), the page itself is a nightmare layout wise as it is way too cluttered and nothing is really defined as having any importance over anything else, the extra amount of ads is blinding, and the fact that its only the home page that carries the new look makes the rest of the site look unfinished….

Maybe it will be better when the whole site is redone, but to be honest i think you guys need to visit espn again and take notes. (m.)

Actually, sIFR was designed by my former co-worker at ESPN, Mike Davidson. I say Former, because in the past three weeks, we’ve both left ESPN for greener pastures. Kareem

“M”, people hated the last relaunch too. We got tons of emails, and even a few phone calls. We’re doing tweaks to make things better as people point out certain areas that they hate, and we’ve already made some significant tweaks thanks to user input.

However…the navigation is not “broken” in Firefox. When you mouse over a sport link with a plus next to it, a flyout happens. When that flyout happens, the plus dissapears because…there’s a flyout. That’s the way it’s supposed to work.

The layout complaints are strange to me. I’m not sure what site you used to look at, but I have both pages up here, and my eye flows over the new one way better. There aren’t 14 different “Spotlight on” areas anymore. The Columnists (which are one of the most popular features on the site) are more defined than ever before, and the Fantasy Sports stuff is so much better laid out.

There are the same number of ad units on the page as before, and at least two of them will now collapse when inventory runs low.

Kareem, sorry to hear that. I’ve always wanted to meet the ESPN.com team, especially Mike and Shaun. We’ve all talked about getting down to ESPN.com some day, but it’s never happened.

Hi Brian, First time visiting here, but I noticed the redesign on the tsn site right away. You can’t say how happy I was when I clicked view source and expected to find table mania. Nice to see more of the bigger corporations (well, for up here in Canada at least) are starting to move… now we need to work on ctv and cbc! Anyway, generally I like it, but I find, quite honestly, it’s information overload. I know that’s probably not your doing, but seriously – there is just way too much stuff on the page. My 2 cents. Good Job.

I still don’t understand why some people design sites aligned to the left. Why not center it? Is it a technical issue?

Hey Dave; I agree, we still need to work on some stuff to organize the information a little better. It’s tough balancing the needs of design with the needs of so many content producers. Each one of them wants to stick out. We’re still working though.

Geoff, I know what you mean. This site is currently designed left aligned because I knew about a thimble’s full of CSS, my new skin for Chronicology will be much cooler. For TSN.ca, we had problems with the navigation not behaving properly when it was aligned center. The real problem is still that different browsers do different things to CSS. IE 5 and 5.5 behave very poorly still, while 6 is behaving better. Mozilla, Firefox, and Safari are amazing browsers and hopefully everyone will move to them eventually.

Brian, it looks great! And it’s nice to see a pure CSS layout. To remove the last table left, here is a suggestion: Use a tsnhome div, with two nested divs, tnshomelink and masthead. Then style tnshome link with position: relative; left: 0 and fixed width and height. Style masthead with position: relative; right: 0 and fixed width and height. I haven’t tested so I don’t know whether it works, especially in IE but it might be worth a try. Another trick is to investigate display: table and display: table-cell. However I know for sure it doesn’t work in IE.

The new site is too cluttered for my liking – I guess I’m referring to the new “fourth bar”. ESPN’s site has less information and is easier to understand. Maybe it’s the fact that I always look at sports websites early in the morning and my brain can’t process so much information at once, but I recommend reducing the number of words on the page.

Bruno: Thanks for the tip, I’ll try that out on our dev server. The problem I was having was with our “Super Masthead” ads, the ones that go over the whole masthead area for 10 seconds and then shrink into the 300px ad, but your option may work!

Matt, I’m not sure what ESPN you’re going to, but you’re way off the mark saying that ESPN has less going on. While ESPN may not have anything in their fourth column, they have: Main Headline, 3 “Today’s Voices” articles, an Insider and Must Read area, Page 2, What’s Inside, NBA Draft, Contests & Special Sections, and a “Hot Sports Deals” section…and that’s JUST in the main bar. The right bar has an additional 7 content areas (plus two of those areas have 3 and 4 options!).

Espn has 4 columns, unless you dont count the my ESPN crap all the way on right. I think ESPN.com is a disaster now. Too busy, it locks up my browser at times.

The TSN.ca re-design is, in my opinion, a prime example of sacrificing usability for the sake of standards based web design. An opinion, which you yourself almost echo in your very own update in this blog; outlining only how many lines of code and bytes you saved as opposed to any sort of usability improvements over the old design.

The redesign suffers from content overload or at least not enough segregation between major content areas and highlights. The content areas have no consistent flow to them; NHL news is followed by Cycling news and then followed by even more NHL news.

The navigation has number a problems, the first being readability. I find the grey text on grey background fairly hard to read, even more so on the “mouseover” menu. The navigation also seems to have a number of flickering and disappearing text problems in Firefox 1.0.4. In IE, the disappearing text is much more of a problem.

The links have no noticeable theme to them and a good percentage of them don’t contain any mouse over styles. Some links carry the same color as the deep red of TSN header yet some are considerably brighter (are the more or less important?). Some headers are links, some non underlined text are links, etc, leaving the user left to figure out what’s a header, a link, or just plain text.

The color choices for the right highlight area are fairly questionable, the Wimbledon update for example is, again, fairly unreadable. The NHL update is the same as the PGA update, giving the user no particular way to quickly find the “category” of sports news important to them.

The search bar is almost completely overshadowed by the rest of the design, clearly one of the most important features on a site with the extraordinary amount of content updated on a regular basis.

When the text is resized in Firefox, significant content “bleeding” occurs, text resizing in IE only seems to break the background colors (ie bug maybe?). Yes, I am aware your using pixel based text size.

Viewing the page without styles produces nothing even remotely resembling semantic markup of any kind. Headers seem to be random sizes, some image headers are still in place, etc.

Finally, it doesn’t validate, but like you said, still being worked on.

While this post may seem overly critical, it’s intention is constructive criticism in the fastest possible way. Please don’t view it as a personal attack against your design methods.

I believe, if your intention was to reduce the “weight” of the page and the bytes transferred using standards based design then you have succeeded in that goal. If you are trying to improve on the usability of the previous design, then I believe you still have significant work to do.

For a working example of a site that tackles most of these problem I have outline here, take a look at Happy Cog’s outstanding redesign of Amnesty International’s USA site located at http://www.amnestyusa.org/

On a related note, I am not sure why the respected standards based design community is linking to this as if it was some sort of victory for their camp; when realistically, it should be highlighted as an example of how standards alone can not improve usability. A bad standards based design is still a bad design any way you want to slice it.

Not saying your design is overly bad but, in my opinion, it’s not particularly good (for usability) either.

Just my thoughts, as a user and a designer.

Wow…just wow. Where to even begin?

Your “thesis” couldn’t be further from the truth. TSN.ca’s redesign had two parts, a graphical redesign, which was accomplished by our graphic designer, who consulted other sites, did research with our graphics department to make sure we were echoing our TV look, and did some internal testing to ensure the “look” worked. Then our front end team decided that they were going to make this new “look” use standards based web design. To re-iterate, I took a .gif of the site, and created a standards based design. I did not go “here’s standards, make them fit with a design”. I took a design, and massaged my HTML until it looked like the design.

I’m not sure if you were ever at TSN.ca before the redesign, a lot of your points seem like ones that come from a well informed usability/design mind, but not one that has ever had to work with the massive amounts of daily updated information that a sports site requires. Even your example regarding the Amnesty International redesign is one that is very limited in scope and is rarely updated. TSN.ca is updated literally hundreds of times a day. Sports IS information overload. The trick is trying to group items when possible, and unfortunately when you’re dealing with something as broad as “sports” that’s not always possible.

Your links issues and navigation problems are well noted, these will likely be addressed sooner rather than later. The mouseover menu is an “added value”, you can still get most places with one click. It will be tweaked as I can, but it’s still a better solution than the old one.

Validation isn’t a huge issue for me (I know, I know…it’s such a horrible thing to say, but guess what? 90% of sites which are constantly updated don’t validate 90% of the time…that’s just a fact of life). There are validation errors which will be fixed, there are others that won’t. I’ll probably sleep okay though knowing that the site doesn’t validate, but that the number of errors are much fewer than before.

I’ll just quickly touch on your first point because I don’t want to get too off-topic but I am well aware of the challenges of team based web design. Unfortunately our position as HTML production people is much like that of the hockey goalie, we are either forced to take all the blame, or put in a position to accept all the praise. The point is, I am not holding you personally responsible for any design decisions that make up the TSN.ca redesign, or implying that you strictly set out to “force” standards on the design; I was simply trying to say that standards does not equal usability. Perhaps my wording was bad, so for that I apologize.

That being said, I have dealt with a number of high content sites but nothing quite on the scale of updates that TSN has. Nevertheless, there are a number of usability decisions that could have been considered to tackle what clearly is going to be your biggest issue: content overload / content segregation:

One: mediums. TNS.ca is clearly dealing with two major mediums, web and television; yet with the current design there is no clear separation between what is “web” content, and what is “TV” content. You (your team) have Schedule on the right, Spotlight on the left, TSN Shows in the middle, basically TV information all over the place. I personally would consider moving all that information to the same “column” so any user can clearly identify what’s “TV” and what’s “web” and quickly focus on one or the other, depending on what they are there for.

Two: separation. With the exception of the right, the separation between “areas” isn’t well defined in some places making flow a fairly big issue; especially where the top stories seem to bleed into the Spotlight on TSN section.

One of the reasons I pointed you over to Amnesty was so you could take note of some of their separation techniques. The headers are all the same style, size, and (when not a link) color. There is a clear and consistent break (the horizontal rule) between major areas. They are reinforcing the break with repetition when possible, by keeping the links at the bottom of each area. Finally, they provide consistent spacing through-out. Although your point about Amnesty being limited in scope is true, they still have a lot going on with the front page and it’s separated fairly clearly. If you take a look at http://news.bbc.co.uk/ , you will see that they follow a lot of the same design philosophies as Amnesty, but with considerably more scope.

In regards to TSN, I don’t think you even have to take as far as Amnesty. TSN’s color scheme and defined style already have inherent solutions to your separation problems. I think, if you confined the use of red to only your headers, provided they kept a consistent style to them, then you would immediately see an improvement in your segregation. Another thing is the use of the TSN bolded arrow “>>”, which can be used to separate the “major” updates from some of the less important ones. Where currently the use of the >> doesn’t really do much of anything but take up space (it’s simply too over-used to have much effect).

Three: categories. TSN is obviously dealing with wide variety of sports categories and currently there is no clear way to quickly find a “category” of sports news on the front page. While there is no simply black and white solution for this problem strictly because TSN is dealing with such a wide variety of sports, there are a few possibilities which you might consider. The first would be building on the colored box idea you have on the right side by choosing specific subtle background colors for specific sports. Now you might consider using certain colors for just the major leagues, or perhaps even the major sports, but I think you might find that trying to find a good balance of colors will be difficult. The plus side to separate background colors though, is that you could have specific link colors for the sports as well, giving you further segregation. Another option, and perhaps the better of the two, would be to use icons to identify the sports. This way you can still keep consistent colors for headers and links (by only using a few main background colors) and still be able to have your users find the sports they are interested in. Again though, this could be tricky as you certainly don’t want to have the site littered with icons as they will quickly loose their effect. On the up side, I would guess that TSN already has a consistent base of icons from their Olympics coverage.

Lastly, there seems to be some confusion about my original post concerning the navigation. I have no problems with the “mouseover / flyout” menu, it is a good addition (and better than the dropdown boxes of before), but I was trying to say that the darker grey on grey colors for those flyout menus are even more hard to read than the lighter grey on grey of the top level navigation.

Keep in mind these are just my opinions and thoughts on the design, and some possible solutions. I am no way implying these are the “right” solutions for your time, budget, or design goals; only things to consider.

Anyways, I won’t mess up your blog anymore. You have my email if you really wanted my opinion 🙂

Hello friend! Nice redesign! What are you going to do with all those characters you’ve now saved?! 😉 My bro-in-law sent me your original post (he’s a fan) and thought i’d like to read it (which i did). See you at Coits! Hullo to the Mrs.

Hey Brian G. I think the new site is awsome! Nice use of the new webs standards. I’ve just gotten into web design and can appreciate how difficult this switch must be for you guys (going from tables to divs). I’m trying to do that right now with my first project: http://www.freake.net/georges/ Anyways, keep up the good work. Mike Freake

Comments are closed.