Technical Professional Development – Part III: The Product

I have completed the primary work for my TDP, and it is now viewable live and in color at TransBat.Com The site will sport a “pink” color scheme till November 1^st to help promote breast cancer awareness. While I had hoped to have this project completed earlier, I am very pleased with its results.

This endeavor was a challenge to my traditional way of creating web sites. It forced me to recode my entire content from scratch and without thinking about any design aspect. In the past, I would spend hours, if not days hard coding a structure in HTML, perfecting/designing all the graphics, and then adjusting my existing content's code into the resulting design as best I could. Not only is this process tedious, it forced me to constantly remake graphical and coding adjustments that would destroy what had once looked pristine. For those who aren't as familiar with the web design process, suffice it to say that my old method of coding was akin to trying to shove a square peg into a round hole.

With Cascading Style Sheets (CSS) now doing the design work, creating new graphics was significantly more enjoyable, and layout issues were simply a matter of adding, modifying, or removing a simple style sheet rule. Once you get behind the principles of CSS, its amazing what you can do!

Let me recap in a nutshell what I did for this project:

• Read the book: Head First HTML & CSS

• Recoded my entire site's content, and the knowledge portals' content from scratch using standard's compliant XHTML 1.0.

• Sketched a rough draft on paper of what I wanted my knowledge portals and my main site to look like.

• Created two rough style sheets (one for my main site, the other for the knowledge portals) to shape my content the appropriate way.

• Created new graphics for my web sites.

• Created two final style sheets that included my new graphics, giving the entire site a much more polished, professional, and fun layout.

• Created two additional style sheet templates and two small sets of graphic for my main site that would allow me to demonstrate how a simple change of a style sheet could dramatically alter the look of my site consistently throughout the site.

• Tested the final product in multiple browser platforms to ensure consistency (within the confines of how browsers determine and interpret CSS).

Since most of this jargon won't mean much unless you've spent many hours coding and designing websites, here's a simple comparison of the final product:

Edit: I have fixed the few incorrect links below, and all should now be properly viewable. Sorry for any confusion/inconvenience! - Bryan

Main Site New Version: http://www.transbat.com/
Previous Version: http://www.transbat.com/v6/ and http://www.transbat.com/v6/main.shtml

Knowledge Portals New Site: http://education.transbat.com/ and http://podcast.transbat.com/
Previous Versions: http://education.transbat.com/v1/ and http://podcast.transbat.com/v1/

I have also tested out my how my new sites behave in the following major web browsers: Mozilla Firefox 1.5.0.7 (and now 2.0.0), Internet Explorer 6.0, Safari, and Camino. I am happy to report that other than a small rendering bug with IE 6.0, my site appears identical in almost all aspects...the first time that has EVER happen. Needless to say, I'm pleased with the results, and I welcome any comments to suggestions on the project.

Edit: This post was originally posted on October 23rd, 2006 at approximately 9:15pm. It was reposted on October 31st, 2006 around 11:15pm, when I noticed the original post was no longer showing. It was also updated to reflect testing in Firefox version 2.0.