The New Face of Yahoo! Games

Yahoo! Games has undergone a major refresh that just got pushed live. This update is the first major project at Yahoo! that I’ve been a significant part of, and now it’s out there in the wild! :)

This revamp surfaces far more content than our previous design. On the old site, we had static lists of “top games” by category. Games that made it into these lists had thousands of players at any given times, and games that didn’t get put on the front page basically died. There was a list of three games labelled “featured games,” which got more clicks than anything else on the page, and the big flashy promotional image at the top got almost none.

The new design features a “switcher” at the top, and through the magic of layered content, we can now surface from 60-120 games, without ever showing the user more than a couple at a time. Also, rather than just showing a boring list with the number of users playing each game, we now feature an icon, a bit of text, and a call to action. The switcher automagically stops cycling if your mouse is over one of the cards, since most people read with their mouse pointer. (Props for the switcher functionality go to my cube-neighbor and coworker Curtis.)

The “All Games List” was our second most popular page on the site, after the homepage. (A big part of this reason is that it was the only way to get to many of the games.) This list has undergone a major revision. Instead of a huge table that requires you to refresh the whole page every time you want to resort or view the next batch of games in the list, it’s now a much slicker-looking, much more responsive table that dynamically sorts and pages without an HTTP request each time. To do this, we’re loading our whole games catalog in a JSON object. Then, the JSON is loaded into an array, which can be easily sorted. Finally, the array data is plugged into the innerHTML of the table TDs. Extra rows are then removed, and new rows are created only if they’re needed.

I went through a lot of different methods to get this thing working reliably. In particular, using the DOM Table methods (createRow, createCell, etc.) are absurdly slow in MSIE, and fairly sluggish on Firefox as well. (Odd, since that’s how they tell you to do it.) innerHTML is generally faster than DOM methods, but in MSIE, the innerHTML of a table is a read-only property. I could have used innerHTML to build the entire table, but then I would have had to re-attach my event listeners, and it became a logistical nightmare. So, I’m using a combination of standard DOM methods (createElement instead of createRow, etc.) and innerHTML to get a reliable experience across multiple browsers. I only create new rows and cells when there aren’t enough already on the page, and pop the proper contents into each TD’s innerHTML.

This finally gets our front page into the 21st century, with LSM, CSS, useful Javascript, and so on. We owe an aweful lot to the Yahoo! User Interface team for building some of the most useful and versatile Javascript and CSS utilities that can be found anywhere. Thanks!

Leave a Reply

Comments are moderated like crazy using a variety of plugins. There is a very high likelihood that your comment won't show up right away, especially if you have never commented here before, but it was not deleted.

Please be patient, and do not post your comment more than once. It will show up once it is approved.

You must be logged in to post a comment.