It’s doubtful any previous visitor would notice the recent complete overhaul of this site’s layout, and that’s kind of the point. For years (even back to the dawn of S&L), I’ve been using a framed layout that, while seamless, still required separate pages and an index frame to setup. Since switching to PHP in 2006, I used a script on every page that checked the HTTP referrer to ensure that a page went into frames if referred from an outside site (or no site). I also had a backup JavaScript that would check if the top-level document location was the same as the current document location; and if so, put it into frames. These framing hacks work pretty well for the most part, but can present some occasional odd bugs and intrinsic hurdles, such as infinite framing and query passing.
A month or so ago, I decided to try out an alternate layout using CSS fixed positioning that would nonetheless look and function the same as the frames but without all the hacks. Creating the fixed layout was rather straightforward and effective in Firefox. The only initial issue I had with it was the reloading of the navigation and Flash logo on every page. This requires additional load times and some choppiness as the logo animation restarts. Unfortunately, this factor was one of the key reasons I had been sticking with frames for so long. Many would question my continued use of fixed layouts even, but my own statistics have shown that the likeliness of visitors clicking a link in a navigation that’s persistently in view is greatly increased. Even if they’re just looking around briefly, chances are something will catch their eye, which is better than them just leaving altogether.
I expected the worst as I went to test the new CSS layout in IE6. I wasn’t disappointed: the page layout was completely dysfunctional. IE6 simply has no support for fixed positioning. However, through a number of hacks, I was able to get something that acts almost the same. There are actually two stages of hacks for IE6. In the first stage, absolute positioning (which works fine in IE6) is substituted for fixed positioning and a floating nav is enabled. Once the page finishes loading, the height and overflow of the <body> and <html> are set to 100% and hidden. Then the main frame’s width and height are set to exactly the available window dimensions, causing the overflow to require scrolling. If this all sounds rather tedious and precarious, that’s because it is. I’m hoping that the adoption of IE7+ gets to a point soon that I can drop the crappy IE6 hacks. However, the fact that many still run XP (not so bad) and XP comes pre-installed with IE6 (goddamn you, Microsoft) means that IE6 will likely require support for several more years.
I thought the nightmare was over, but then I went to test IE7. IE7 supposedly supports fixed positioning BUT only in standards-compliant mode, something I’d been putting off accepting for years since Microsoft’s own standards were the dominant force. I knew I was opening Pandora’s Box by switching on standards-compliance, but it was the only way to get IE7 to not look as bad as IE6 (without the hacks). Luckily, Firefox’s only major adverse reaction was to dimensions given without a unit (i.e. 0 instead of 0px). IE had a bizarre issue with centering table contents if the table was centered, fixed with table {text-align: left;}. All browsers had a problem with <dd> tags that I’d used forever to do quick paragraph indents. I’m still unsure how I want to resolve this other than just removing the tags. I could do a special class with indents, but what a hassle (plus W3C insists that block formatting is better anyways). Overall, my impression of standards mode is that it’s more quirky than quirks mode.
It’s unlikely I’ll switch back to frames, though. The industry is moving more and more towards CSS and the support for fixed positioning will only get better. Also, there are some neat tricks you can do when you have script access to the entire page. You can see one of these tricks when viewing any large image. If an image is larger than the main frame, it can be maximized to the whole window without reloading the page. (Plus, the maximizing is animated thanks to the YUI library I’ve been playing with.) Also, I’ve been noticing some vastly increased Google hits since making the switch. For the Kangaroo paper alone, it went from 0-2 hits per day to 10-40 hits per day. Unfortunately, half of those hits are from weirdos looking for kangaroo sex. 😕
RIP Frames
2000-2008
