When I first began this project to create my blog, I didn’t have a real direction to know if there was any particular feature/design challenges that I was hoping to learn, or implement. It became clear after just a couple of hours in Photoshop that I had a layout that could potentially get some nice reviews… but the longer I played with the layout, the more transparent things became…
I’ve used alpha layer transparency for some time now, especially with content images, or icons so that regardless of style changes, the background would show through appropriately, and not have a jagged white edge like the GIF images of the past. So this had become a large part of my implementations on many sites, however, I had yet to really test out the alpha layer transparency in the PNG images, and see how far I could push the envelope with it.So after a few hours of putting the layout together, it was clear to me that everything on the site was going to reflect some sort of transparency. This really began with the background images that were from istockphoto. I spent a little time customizing them, and was very satisfied, and didn’t want to hide a majority of it from users on a normal resolution like 1024×768.In my original Photoshop file, there were still some non-transparent items, but I planned on implementing those sections during the skinning process on Wordpress.
After getting the main body background skinned, the content container, and the menu bar, it had already become apparent that there were going to be issues with the browsers that I’m not used to dealing with. I have been working for the last 2 years very diligently to correct bad coding habits, concentrate on accessible code, and perfecting my layouts cross-browser. Being a programmer, design and proper html/css coding was never my main focus until I felt I had plateaued in my PHP abilities, and decided to concentrate on the design aspects of the projects I worked on. This was always a challenge, and a learning experience to say the least… but I had never had a site actually pushed the limits of a browsers capability to render the content.
To cut to the meat of this, of the current 3 browsers I will test with (Safari for Windows, Firefox, and IE7) on my projects, in this situation, Firefox performs the very worst, with Safari being the browser champ excluding a oddity with jQuery that I have yet to investigate further. The fact that Firefox has the worst rendering of the alpha layer blows my mind, simply for the fact, it was the first browser that got me excited about that feature, and at the time, I hated that it didn’t work in IE6, and was so on the Firefox bandwagon that it was disgusting.
The Browser Buster Results:
Firefox:Firefox has actually had the most glaring problem of all the browsers when handling the alpha layer, despite the fact, it was the first browser that I began using the feature for, and cursed Microsoft for not properly handling it at the time.When in Firefox, the layout is perfect, however, if you grab your vertical scrollbar, and quickly scroll up and down on any of the pages, you will see sections of the page/site that aren’t moving at the same speed as the other elements on page, so the layout becomes quite choppy when scrolling. Using the wheel on your mouse will also duplicate this problem. This seems like a horrible rendering of the alpha layer when spread across any sizable layout piece.
Internet Explorer 7:Surprisingly enough, Internet Explorer handles both the layout and alpha layer transparency very well. If I were an IE user, I would have been very satisfied with the results developing right in IE7.
Safari 3 Beta:Safari, which I’ve only had installed on my Vista system for about a month now, turns out the be the be all, end all rendering of the front end of this site. The smooth fonts in Safari are enough alone to make the switch, but the scrolling of the alpha layer that is seen in Firefox is not noticed here at all, and it seems the alpha layers that are stacking are all held in place with each other when scrolling, never revealing any choppy scrolling.This seemed funnies to me, since it was my understanding that Firefox and Safari both used the same engine or something like that.
In the odd case someone is using IE6 to view this site, it will not work. If you are still using IE6, please join the 21st century, and download the free IE update to IE7, or download one of the free browsers like Firefox or Safari that will greatly enhance your browsing experience. Many design firms are throwing away compatibility with IE6 in order that they may move their designs to more advanced layouts & techniques that are NOT handled by IE6 worth a flipping damn…
