Gaming Nexus's move to new technologies and design


posted 9/19/2005 by John Yan
other articles by John Yan
One Page Platforms:
I really enjoy test driven development where I create tests for my objects and how they should work and then write the code to implement the objects. Using NUNIT, I have a very good testing framework that ensures that if I do change the code it won’t break what’s working previously. Say I want to rewrite portions of the code to improve the speed after the site has been up for a few months. With a previously passing NUNIT test on the objects, I can refactor the code with confidence in that it will work exactly as it did when I went into production but with improvements.

Moving from ASP to .NET will increase the speed of the site because .NET works off compiled code for the most part. Like anything you can bloat your code enough to make the site slower than a scripted ASP page. Nevertheless, moving to .NET also made it easier to code and debug. And when I decide to add enhancements to the site, working with an object oriented model will make inputting enhancements easier and quicker.

You can see the difference between the old design and color scheme compared to the new one we have now. One thing I’m very proud of is the fact that we don’t have any ads on the site. Therefore, I didn’t take into consideration of any ad placement areas. The site and the bandwidth are paid out of our own pockets and we’re going to keep it that way as long as possible. It’s been like that for eight years through various incarnations of this site and I think we’ll stay that way for a very long time. Besides, if I put ads on Gaming Nexus, I’d probably block it out myself with Firefox’s adblock extension.

Our old site design relied heavily on tables to create the layout. Tables, while easy to create, are slow and need to be rendered completely before anything shows up on your browser. So for modem users, it would take a while to load up and you will only see blank squares until the tables were rendered. The new approach was to make it a table-less design completely using DIVS and SPANS. Take a look at the source code. You won’t see one single table in there in the main content area. There might be tables from some of the open source objects I’ve used but for the most part, the main parts of the site are all DIV and SPAN tags. To get the site to layout correctly, we rely heavily on CSS. Sites like ESPN, MSN, and others have moved to this approach and you can get a great feel of how powerful this can be if you visit CSS ZEN Garden. Besides the increase in speed, less bandwidth is used as CSS is cached on your machine and there’s less code to create a page without a table. And if I decide to make a design change, all I would need is to fiddle with the CSS. No longer will I have to mess with tables with nested tables or row spans or column spans. Tables are still useful for showing tabular data and we still use tables for the article search results since the DataGrid control we use in .NET renders out the data in a table but for a site layout, I think this approach is much more extensible and robust.

There are a few other areas where we rely on CSS to do our work. Looking at the borders around the news items and the article, you can see two rounded corners on opposite corners of some text areas. Normally, this is done by cutting out a rounded corner in Photoshop and then stuck on the corners of the text area. What may surprise you though is the rounded corners are done without any images and done with just a javascript file and CSS. I picked up this cool little code from Nifty Corners.
Page 2 of 4