Designing Galleries for the Resolutions


"If only I knew then, what I know now." I don't think that there is any other industry where such an expression is so apt, than in Adult Internet. A very good example of this happened to me just the other day...

I have been in the business for a little over a year now, and until just recently, had been doing it on an old Compaq Desk Pro 386 that had been built for my girlfriend to be used for her office documents, etc. It sure wasn't built with being an adult-webmaster in mind Consequently, I had never been able to use any screen resolution other than 800x600, so I had no idea what a huge difference it makes when a site is viewed in different screen settings.

When I finally got a new computer last month, I was given a very rude awakening at just how bad my sites looked in when viewing in my newfound 1024x768 splendor. Completely in shock at this new revelation, I started to re-read all of the basic html stuff I had read when I first started *insert cliché here*, and wow it all made sense this time. I had read so many times to check your site in all resolutions and with as many different browser types as possible, but due to my inability to view the virtual world in any other resolution than 800x600, I never really understood what the heck they were talking about.

Point is they were all right! However, for you newer webmasters that may not have the ability to view your work in different resolutions, I have come up with a few Tips that will keep you safe, even if you can't view it yourself to confirm. My examples here will be Thumbnail Galleries, but these rules apply to any other type of site, as well. Ultimately it is best if you can, and do, check. If you cannot check your work, then just keep these basic principals in mind.

1. The key is the pixel width that you have to work with. A fixed table width at 740 pixels will take up approximately 95% of a maximized browser set to 800x600 resolution. The majority of people do surf with a maximized browser, so this is a safe point of reference. Anything larger than 740 wide, and you will see a bottom scroll bar appear in the same conditions. When the browser is set to 1024x768 screen resolution it has an effect similar to viewing a movie in wide screen vs. regular. So, the table larger than 740 wide would still look ok, because there is more room on the monitor. So, the safe bet is to make sure that the total width of your images (thumbnails) does not exceed 740 pixels in width. For example 5 thumbs at 150 pixels wide each would be just enough to cause that bottom scrollbar to show up, so try 5 thumbs at 140 wide or lower, or 4 thumbs at 150 wide, so long as the end result is the same... never above 740 wide.

2. Use percent variables for your table width attributes. Doing this allows your work to expand with the larger viewing area that a surfer using 1024x768 resolution has. It also will allow a table to be made only as small as the total width of all images, in the event that the surfer's browser is not maximized. So, using thumbnail width and non-fixed table widths, effectively you control how narrow and how wide your gallery will go, while also allowing your gallery to grow when needed, and filling the screen at all resolutions. When a fixed table of 740 wide is viewed in larger screen resolutions, a lot of blank space will appear on the sides. And heaven forbid you forgot to center that table. The main use of fixed table widths is to control a table, and make it not go smaller than a desired size, so as not to disrupt text. The thumbnail sizes can do this job in lieu of the fixed width. Generally sticking with the Arial, Verdana, and Tahoma families is the safest bet.

3. Use larger thumbs. A thumbnail that is 125 high by 100 wide will look big to a surfer that is using 800x600 resolution, but to the surfer using any higher resolution it will look just right. Make sure you don't go smaller than 100 pixels on the shortest dimension. Anything smaller and the 1024 surfers won't be able to see it as well. There are some very effective image editors out there that can keep file sizes down on large thumbs, otherwise keep this in mind when using larger thumbs. I can usually keep my thumbs between 5k and 10k, depending on how much color is in the original, and I tend to favor the size 150 high x 125 wide.

4. Also, keep in mind that text will look completely different, as well. This doesn't necessarily mean to just make it larger, but the actual font plays a big role, too. Generally sticking with the Arial, Verdana, and Tahoma families is the safest bet. They are very easy to read, and you can get away with smaller text that is every bit as legible in 1024x768 as it is in 800x600 resolution. True these fonts are probably the most boring of your choices, but legibility is of utmost concern when trying to get your message across, and we all know that text sells.

The main benefit of doing it this way is that the surfer that uses 1024x768 resolution will get a full view of what you have to offer and your gallery won't look like it's in a corset to him. The last time I checked my stats, roughly 40% of my visitors had seen my site using 1024x768 resolution, and this number will only grow as technology advances and prices come down. Don't leave the person that just bought a brand new computer *hint: he has some cash* feel like you are ignoring him by not adjusting to his newfound freedom in a larger resolution.

If you have the capability to check in both resolutions, then by all means I feel it is imperative that you do. You might end up in just as much shock as I was. At the time of writing this, I still have a few sites left to fix. Boy, if I only knew then, what I know now: