I hate the way that photo sharing sites are laid out. I have a big screen, I want to see a big motherfuckin' picture - not acres of whitespace. 500x375 is not high-resolution, Yahoo*. If I had a small screen, I'd still want to see a big motherfuckin' picture and the caption and not have to scroll all over the screen to see it, Photobucket. You should also enable random-access navigation from the photo display page, not just from the thumbnails page, Apple.

But now it seems that Editorial now wants to run a picture page with a significant online component. So I talk a lot of trash but now it's my turn to step up and show y'all how it's done.

This is how it's done:

Notice how the thumbnails page scales with the size of your screen. Big screen, lots of thumbnails; small screen, fewer thumbnails. I do not try to jam five thumbnails across in a table because that would not work for many people. Notice how the photo takes up as much of the screen as you will give it. You cannot assume that people will have large screens, nor should you assume that people will have small screens. This design does not seriously break down until below 800x600. All the thumbnails are displayed on the left side of the screen, so you do not have to return to the thumbnails page to explore our photos. The title, photographer, and caption are clearly visible onscreen at all times. Most of the graphical elements are grayscale against a black background so that the photograph really pops. We do not have any dancing bears labeled with every state of the union offering you great mortgage rates. Every photograph has a unique and descriptive URL. It offers a photofeed/photocast compatible RSS feed [which will be better promoted]. The buttons at the bottom of the screen do not do anything, giving our users the opportunity to wonder what the Hell is going on [because it isn't done yet].

<geeky>
I put together this design in Firefox in one day. It took me another full day to get it to look the same in IE as it does in Firefox and Safari. Now I understand why photo sites are not laid out this way.

For starters, no browser will scale images to 'the largest size possible while still maintaining aspect ratio.' This seems like an oversight to me. As a consequence, the large photo is wrapped in a very small Flash stub that loads the image and scales it appropriately.

But more importantly, if you want a box to go from the top of the screen to the bottom, IE will not let you do

[box]#thumbs {
    bottom: 128px;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 256px;
}[/box]

because it is wack-ass and does not understand that top:/bottom: is a valid substitute for top:/height: and thus totally ignores the bottom: [and also, coincidentally, throws away the overflow: as well]. Thankfully, its wack-ass CSS engine will let you specify a Javascript expression for the value of a CSS attribute:

[box]#thumbs {
    bottom: 128px;
    height: expression('' + (document.body.clientHeight - 128) + 'px');
    overflow: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 256px;
}[/box]

What the fuck is that?! Now- I have to admit that there is some perverse part of my id that expression() appeals to, but that doesn't mean that I should have had to use it.
</geeky>

At any rate- my humble contribution to online photo sharing.

- Z

_______________

• Yes, (e:ajay) - Flickr has some very cool features. I like the one where you can draw a box around the dude's johnson and totally make juvenile comments about it. If I ever took photos I would put them on Flickr just so I could do that. No I am not joking.