Tag: Image

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

If 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.)

Print (or save) that photo!

It’s come to my attention that printing from the new Gallery tool on the Offspring page is not as easy as it could be. Paying for Shutterfly prints is an option, of course, but you can also print the images right from the site or save them to your hard drive. Here are some instructions…

1. Click on the picture you want to print, so it appears by itself on the page in the larger size.

2. In the gray area above the picture, on the right side, you’ll see the date, owner, and size information. There’s a menu that allows you to pick other sizes to view, and the “full size” appears below that as an orange link (see picture). Click the orange link next to “full size.”

3. The page will reload displaying the full-size picture, which will most likely be too big to fit in your browser window.

4. To print the picture, you’ll want to open it up in a window by itself. Do this by right-clicking (on a Mac, hold the Ctrl key down and then click) on the picture, and in the menu that appears, choose “View image” or “Open image in new window” something similar. (The exact wording varies depending on your web browser.)

5. Now you can print the photo by choosing “Print” from the browser’s “File” menu (or by clicking the print button, if your browser has one).

6. If you want to save the picture, do everything up through step 4, but instead of choosing “View image” from the menu, choose “Save target as…” or “Save image to disk” or something to that effect.

Quickly now…

Just a quick one, as I don’t have a lot of time to post… but of course, as usual, I had to make time for a detour into the madness of Internet Explorer when I discovered that my CSS line-height positioning was breaking when there was an inline image in the text. Why? Who knows? But the solution involved sticking vspace=”7″ into each offending image tag. Yet another case of hacking a one-off solution into the code to work around an Internet Explorer quirk. Almost as frustrating as IE’s violations of standards is the fact that there’s almost never a one-size-fits-all workaround!

A nifty little tool…

For web geeks like me whose design ambitions occasionally outpace our abilities, it’s always fun to come across tools like this:

Color Palette Generator

Just give it the URL of any image anywhere on the web (such as, for example on your own site) and it generates color palettes for you to use in your design, based on the colors in the image.

Look for yet another new Room 34 site redesign in the near (or not-so-near) future using this tool!