For some time I have been working on a significant redesign for www.c2f.com, my company's flagship site. My work is finally realized on the web, as the redesign was made live last week. Much of the fun layout and graphic interface elements cannot be seen from the outside, as our site has a secure login side to it. Click here to see some of the interface elements I created for the project.
This web site release is significant for me because it is one of my best attempts at using all my CSS knowledge to create an advanced layout with multiple columns and both relatively and absolutely positioned content inside multiple containers. The structure and presentation are almost fully separated. Only a couple extra containers were applied to overcome modern browsers' CSS shortcomings. When stylesheets are disabled in a browser such as Firefox, everything still displays in a sensible order with proper structure. All images are CSS backgrounds, so the entire appearance and color scheme of the site can be changed simply by linking a different CSS file. This was long desired functionality so that the site can change with the seasons or different promotional themes.
I also worked around a great deal of ASP/Visual Basic and became familiar with the language's basic syntax and functionality. This was a useful experience. I have quite a bit of experience in PHP now, and it was not difficult to translate this experience into an understanding of the ASP code. I still much prefer open source PHP. I like how friendly, logical and powerful the language is.
Browser "Fun": After working out a few bugs, the site is fully functional and works great in the latest versions of Firefox and IE. I have also been informed it looks good in Mac's Safari. Of course I had to uglify my code ever so slightly to get the layouts to work in IE6. Writing CSS that works in Firefox is virtually a breeze, since the browser has done a very good job at standards compliance since its inception. There is, however, one strange issue where many pages overflow their containers in Firefox 1.0.7 (one of the first releases of Firefox, before automatic updates were introduced), but this bug has since been fixed in verson 1.5. Interestingly enough, the bug can also be "fixed" by pressing the refresh button on each infracting page in version 1.0.7. There is a known CSS issue in Netscape 7.1 that I will fix in the next couple days. I haven't been testing in Netscape because I was under the impression from something I read that its development had been discontinued, and customers were being referred to Firefox. I just learned today that my 3-column layout has a couple problems in Netscape 7.1, a somewhat widely distributed version. So here I go again at accommodating annoyingly old and buggy software. Netscape has been notoriously the worst of all browsers at keeping up with standards. Interestingly enough, whatever bug that creates this weird container behavior has been fixed in Netscape 8.1, the latest release to date.
My boss and I made a decision early on to expand the new site to fit in a 1024x768 screen resolution, rather than the archaic and severely limiting 800x600. So, instead of the content being 775 pixels wide, it is now 900. We have had a couple calls from customers who are having to scroll sideways to see all the content, but we are "fixing" their computers and having them change their screen resolution to 1024x768.