PGA
My initial plan was to continue working with our Turner Sports Interactive team squashing bugs, optimizing code, and tweaking elements to bring our new site into full standards compliance before publicly linking to the project. But then the reality of the situation set in, new content and events came up, and we had to move forward before polishing the dull spots. Now that I've effectively covered my rear, here's the new home of the PGA.
Currently we're in full Masters (excuse the pun) swing, preparing for live scoring leaderboards, player stats, tournament news, and...inevitably...lots of Tiger photos.
My part of the site involved creating all the xhtml templates, styles sheets, some production graphics work, and testing the site for compatibility on multiple operating systems and browsers. Right now, the site is very close to validating as XHTML 1.0 Transitional, with the exception of some meta tags and other head elements that, for now, will have to wait (they are published by a content management system, and would require a patch to the software to alter the tags for XHTML - and interesting experience unto itself). But thanks to a forward-looking team of people involved, we are fixing the issues - one small battle at a time. Overall, the site features no deprecated markup, a single style sheet, and renders nearly identical in all compliant browsers, which is a lot more than can be said for a number of sites.
Months back, our intention was to create a purely table-less site with all the presentation handled by the style sheet. But because of a multitude of design requirements, tables simply had to be used to structure the skeleton of each page. But instead of nesting tables inside of parent tables, positioned divs were used wherever possible to lighten the page load and provide cleaner markup.
The site, from a CSS development standpoint, was an interesting one to architect. In other client work, I've always "drilled down" the page and subdivided sections into block elements, each with proprietary attributes. This method works well in a tight, simple, modular structure, but PGA turned out to be a very different animal. Because of a multitude of style guidelines and unique page requirements, the best method for handling the presentation was à la carte.
For example -- instead of creating headers (h1) with unique margin, padding, font-size, and color attributes, I broke the attributes out into individual classes - like ingredients in a recipe - that could be combined however which way to create the desired effect.
I created a sampling of padding classes based on roman numerals, as in: padi { padding:1px;}, padileft {padding-left:1px;}, padxbot {padding-bottom:10px;}. We also had a strict color palette to adhere to, so text classes were created for each color: grayi {color:#333;}, grayii {color:#666;}, etc. Then when you wanted to style a block of copy, you could use <p class="padi grayii">. At first I was concerned the method would create too much style sheet bloat, but it actually turned out smaller than if I had tried to over-specify every element, on every page, throughout the entire site.
Granted, I have plenty of deprecated garbage to clean out of the style sheet, and lots of places where the code needs further tweaking, but for now we met our launch deadline, and the response has been overwhelmingly positive. We will also be implementing detection for non-compliant browsers (*cough* Netscape 4.7 *cough*) and redirecting the users to a simple page offering browser upgrade links. Our initial plan was for a more graceful degradation of content for older browsers, but the layout requirements were too steep to effectively move downward and maintain an optimal user experience.
Outside of all the code, there are a number of micro-site design ideas we have in the planning stages, so our work is hardly over. It has only just begun. And best of all, my dad finally understands what I do.
Update: My friend Robert has updated his weblog with his thoughts about the project.
