TGP Layout & Design: 1

Stephen Yagielowicz
There are so many considerations that must be evaluated at the planning stages of building a Thumbnail Gallery Post (TGP) – at least if you hope to grow beyond the "newbie" stage with it – that I thought I would share some of the thinking I've been doing as I plan my own TGP for a New Year's launch. Let's get right into it with a look at fundamental design considerations:

Designer's Dilemmas
Web page designers often suffer from a couple of common syndromes: the first is "showcasitis" – that is, the burning desire to turn every project, no matter how simple, into a showcase of their design skill. While excellence in design is always desirable, the symptoms of this malady include the use of every bell and whistle on every program in the designer's toolbox. While this can often lead to very attractive, graphically intensive presentations, such are better left to pay sites, and not the bandwidth-eating monsters that a popular TGP can become.

The other problem that many designers have is that they tend to "force feed" content to consumers, relying on aesthetics, rather than basic marketing sense, to guide their layout decisions. For example, over-sized logos, and what are essentially half-page ads at the top of a TGP – while often arguably more "attractive" than a simpler design – can have a negative impact on traffic flow, over and above the obvious penalty in extra bandwidth charges that these needless graphics result in.

This traffic penalty isn't only an issue of "surfers losing patience because of long load times and then moving on..." as most TGP surfers expect to wait for a giant page of thumbnails and banners to load; and especially in the case of seasoned Movie Gallery Post (MGP) surfers, they almost always have broadband Internet access. The penalty comes from not giving them a reason to stick around.

While some readers might scoff at this notion, I'll tell you why I say this: after visiting literally hundreds of gallery posts in an effort to see what features "stood out" and specifically what I liked – and disliked – about any given site, I noticed a pattern emerging in my own surfing behavior. Sites that had a minimal amount of "non gallery" content (i.e., logos, text, advertisements, and other 'distractions') enticed me to scroll down and look a little closer at what they had to offer. Why? With less "clutter" at the top of the page, there was more room for thumbnails to be visible on the first page of my screen. More thumbnails meant more chances to hit me with a "button pushing" image, which gives me the impression of "a site with the content I'm looking for" – and one worth sticking around to explore in more detail.

Some might argue that this additional content at the top of the page will "make" surfers scroll – but today's surfer is more savvy than that – he's not going to make an effort to use your web page, he'll simply go and find a "more attractive" site. Heck, there's more than enough of them to choose from. Consider also that I'm surfing with a 1024x768 screen resolution, and that those folks that surf at 800x600 (or lower) will see even more of the distractions – and less of the galleries – so choose your design carefully. Remember: simpler is better.

Another design issue is your choice of thumbnail sizes. No small task, choosing the best balance between productivity and cost effectiveness will require a degree of thought – and compromise. Let's look at this in more detail: While there are certain "standard" thumbnail sizes, such as 88x88, a "standard" approach isn't always best. The small 88x88 thumb is popular because it's more "bandwidth friendly" (and thus more cost effective to use) than its larger counterparts – and often available as "pre made" thumbs from hosted gallery and other content providers – a labor-saving bonus that further adds to its cost effectiveness.

Small thumbs, which depending on their quality, including the degree of image compression used when creating them, lack the "punch" of a larger sized thumbnail. This "punch" translates into greater productivity, as more attractive images tend to get clicked more often – but this increase in click-through ratio comes at an (often greatly) increased level of bandwidth consumption and page load time, which may not be offset by a resulting increase in revenues that would justify the expense.

Although a thumbnail size of 90x120 makes a nice compromise between the larger and smaller sizes, a quick glance at one of my favorite TGPs reveals a more generous size of 180x135 while another favorite site comes in at 120x95. Overall, my preference for a larger thumb is based on a desire to clearly see what I "should" be getting by clicking – as well as a need to quickly scan a page for items of interest. The failing eyesight of our quickly aging population – which includes a large percentage of your paying customers – should also be considered now, since bigger thumbs are much easier to see.

Another factor to consider when choosing a thumbnail size is the ease at which you will be able to "change your mind" later on, as the prospect of re-thumbing tens of thousands of galleries because you want a new design is not a particularly attractive one...

Finally, the size of your thumbnails will in part determine the layout of your TGP. The worst mistake a web page designer can make is to create a site that forces horizontal scroll bars on the user's browser; and with many folks still surfing at 800x600, this means a safe design width of 768 pixels or less is strongly advised. A quick calculation will determine the number of columns your TGP design can have, based upon the width of the thumbnails, plus a little "breathing room" between them. The number of rows then is purely a matter of how many galleries you wish to display, and how much bandwidth you wish to burn.

Now that we've considered some of the factors involved in developing a workable TGP design, we're ready to look at several of the issues surrounding the layout of that design. Stay tuned!