New site design (partially) implemented

My guilt over slighting those regrettably still stuck using Internet Explorer 6 finally got the best of me, and I decided to do a new site design that doesn’t completely break down in that (outdated) browser.

Well, that’s not really the reason I did it. I wanted to take a new approach that allows for more customization of the presentation in different sections of the site. But I made it IE6-friendly while I was at it. The new design is based on another color scheme called “Salamander” that I found at Kuler. (Sorry, I’d link right to the specific color palette but, guess what, it’s Flash. Boo.)

It’s not finished yet, but I wanted to put the necessary pressure on myself to keep working on it until it’s completely done. So now that it’s far enough along to be presentable to the public, I’m rolling it out.

Most of the cool site-specific graphical headers are still missing, so it’s falling back to a generic presentation with a nice garish green band at the top. Certain other fine details are also still missing in the CSS, but I’m getting there.

Eventually there will be more dramatic changes to the page structure: the home page will be more of a “portal” than just a dump of the most recent blog posts; different sections of the site will have different content in the sidebar, etc. But this is a start.

Sidebar enhancements

Sidebar screenshotYou may have noticed after the current site redesign that the sidebar panels now sport toggle buttons that allow you to open and close them with slick Scriptaculous sliding effects.

I’ve taken this a step further by using cookies to store your panels’ status, keeping the same panels opened or closed as you go from page to page (and between browser sessions… but since it’s client-side, it doesn’t follow you to different computers).

The next step will be to add handles, allowing you to change the order of the panels as well. Stay tuned! (Or not.)

For the geeks among you, I’ve facilitated all of this additional functionality by writing some object-oriented PHP for handling the panels. It’s much cleaner and less prone to error.

Are you a web geek? Can a 404 error page excite you?

404 error signIf the former is true, it proves the latter. I’ll confess “yes” to both.

Today at work I was doing some miscellaneous web-related research (aimless surfing? no, no, never), and I came across a page of creative 404 error pages that inspired me to finally do something interesting with my own 404 error message.

Having lived in Atlanta (area code 404), I initially set out to do something that played off that. (I know, very original. I just wanted to make sure not to settle for “Tha 404.”) But it wasn’t long before my roadgeek tendencies kicked in and I thought of something even better.

Here’s my 404 page. (The image at right is a spoiler, of course.)

The sign image is (mostly) my own creation in Photoshop: I swiped the shield images for I-16 and Georgia 404 as SVGs from their respective Wikipedia pages, and the font is courtesy of another roadgeek. Whenever I start to question myself, I am reassured that there are others out there even sicker than I am.

Incidentally, there really is a Georgia 404, although the only place you’ll see a sign for it is on a small spur route near Savannah. Georgia’s Department of Transportation has a funny little quirk in that it has given all freeway-grade roads a state highway designation in the 400 range. (I suppose the “4” indicates 4 or more lanes.) As far as I know (and as this PDF from the GDOT website seems to confirm), there’s only one road in the system for which this is the main designation, however: Georgia 400, which is a main commuter artery running north (well, northish) from Buckhead out to the north-central suburbs and beyond into Deliverance country, since both I-75 and I-85 veer off diagonally out of the city (into the northwest and northeast suburbs and beyond into Deliverance country).

All of the other freeways in the state have a “4xx” designation too, but there are generally no signs indicating such, because they all also have a familiar designation, usually an Interstate number.

As it happens, Georgia 404 is better known as I-16 (hence the double shields on my sign image), which, interestingly enough, is not really “interstate” even though it’s an “Interstate”; it starts in Macon and ends in Savannah.

The incredible ever-changing page background

Here’s more stuff that web designers might find interesting and everyone else will find either irrelevant or won’t even notice.

I kind of liked the abstract image I had as the background of the pages in this new site design (which, if you’re interested, can still be found on my IE6 users’ “welcome” page), but I was never completely satisfied with how it was just shoved into the upper left corner of the window. So I took a horizontal cross-section from a very colorful portion of that design, stretched it out into blurry vertical stripes, and made it the new background.

But, you may notice, there’s a bit more to the background than that. Once again it’s the magic of PNG alpha channel transparency at work.

The background of this page is actually the product of 3 separate images (a JPEG at the “back” and two transparent PNGs over it) overlaid on top of each other. In the bottom layer is the aforementioned blurry multi-colored vertical stripe image (JPEG). It’s 1600 pixels wide by 20 pixels high, tiled.

Next above that is my “Close to the Edge” image, a gradient from the teal of my color palette (at the bottom) to transparent (at the top). For a while I toyed with simply using this as a teal-to-black gradient, and I have to say it looked quite nice, but there’s not enough else going on visually with the design of the page, so a solid black band at the top of the page came off a bit boring. So, the gradient as an overlay on the stripes. This image is 50 pixels wide by 600 pixels high, and it’s fixed to the bottom of the window and tiled horizontally.

Above that is the (probably overused) “NTSC scanline effect” image, which produces the horizontal stripes. Unnecessary and as I said, probably overused, but it’s still kind of cool looking. Or would have been in 1998 at least. Call me old fashioned, if you think 1998 is old. (OK, in the web world, it’s ancient history.) This is a 20×20 image, also tiled.

So, how does this all fit together? Well, the way I do it is by applying the JPEG to the <body> tag, which is immediately followed by a pair of nested <div> tags that fill the window and exist for the sole purpose of overlaying the other background layers. Then inside of that, the rest of the page’s HTML appears as normally.

Looking at it precisely, the CSS file contains the following:

body {
  background: #000 url(“images/body_bg_stripes.jpg”) top left repeat fixed;
  margin: 0;
  padding: 0;
}
#body_overlay {
  background: url(“images/body_overlay_bg_ctte.png”) bottom left repeat-x fixed;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#body_overlay_2 {
  background: url(“images/scanlines_25_black.png”) top left repeat fixed;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

And the HTML for the pages follows this basic structure (with lots of stuff cut out in this example, of course):

<html>
…HEAD TAGS HERE…
<body>
<div id=”body_overlay”>
<div id=”body_overlay_2″>
…PAGE BODY HERE…
</div>
</div>
</body>
</html>

What’s really cool about this is that it results in a background pattern that, as a single image, would need to be at least 1600 pixels by 600 pixels (in other words, very large in both dimensions and file size), and even then it would not be able to achieve exactly what you see here because the gradient is fixed against the bottom of the window. In fact there’s absolutely no way to produce the background of this page without transparent PNGs. The 1600×600 image would easily be a few hundred kilobytes at a fairly low-quality compression level — far too big to justify, especially since it would still end up looking like crap. But as it is, the three images are 6857, 135, and 714 bytes respectively — less than 8 kilobytes combined. Sweet! (OK, it’s pathetic that I think something like this is “sweet,” but there it is.)

Still wish you were using Internet Explorer 6?

If you’ve never visited this site using Internet Explorer 6, you probably are unaware that up until now doing so would load a big ugly alert box explaining how foolish you were being to do so — being that I am an arrogant Mac and Firefox user, not to mention that IE6 is dangerously insecure (besides not supporting alpha channel transparency in PNG images, which are the building blocks of this site’s design).

Today I had the chance for the first time to see just how horrible the new design looks in IE6, and as much as I don’t want to support that browser, I also couldn’t handle thrusting visitors into the hideous mess of this site in IE6 without at least giving them a taste of what it’s supposed to look like first. To that end, I’ve created a more friendly “welcome” page for IE6 users, giving them one last chance to upgrade before proceeding, and in the process showing them a hint of the site’s actual design as it’s intended to appear.

But of course, since you’re not using IE6 (are you?), you have no idea what that page looks like. So, I thought I’d show it off a bit. Here it is. Enjoy. Or not. Actually, it’s not really intended to be enjoyed, so don’t. (I’m really only posting this link so I can test the HTTP_REFERER link functionality I embedded in it. [And yes, I know the correct spelling is “referrer.” Tell that to whoever created the names of the HTTP host headers. I mean whomever. So there.])