I jokingly made a suggestion to something who had just completed the conversion of a thumb-preview design to table-less. Namely, that he try to find a way of placing some text links, as a bit of SE bait, high in his HTML, but have them appear low on the page as he would obviously want for such a site.

And it actually can be done without too much difficulty, although oddly it is trickier to achieve that effect with a single-column design, than with two- or three-column layouts. But it involves the use of absolute positioning.

At first glance, absolute positioning is a designer’s dream. You can place all the components of a page with pixel-perfect precision. Providing you know exactly how big each block is, and the use of text if at all, is limited, absolute positioning works well. But TGP’s may get an extra-long description which wraps onto the next line and as soon as something like that happens, that perfect design can be spoiled. Worse, Firefox users, even when you have set what you might believe - pts for example - is an absolute font size, can wreck such a design just by rolling their mouse wheel to make the text on your page bigger.

So what we have here is a page which, instead of fearing that possibility, exploits it. At the same time, it is a hybrid thumb-preview plus text layout which attempts to be reasonably search-engine friendly. In deference to a suggestion from another visitor, this page is coded in HTML 4.01 Strict.

The first thing to notice is that if you hold down your control key while rolling the wheel on your mouse, you can make the text bigger or smaller. It doesn’t degrade as well if you decrease the font-size in Explorer, because a single click has twice the effect it would in Firefox. However it deals with larger fonts equally well in both. What might also catch your eye is that the thumbnails themselves also get larger or smaller. Not only do the horizontal dimensions change, but text and images remain aligned vertically too (until very small sizes force word-wrapping).

The main purpose of making this layout in this way was to enable flexible sizing in Explorer the way that Firefox allows, because it isn’t only a way surfers can mess up your pages. Used positively, it is a way to make your pages more user-friendly for a wider variety of monitor sizes and screen resolutions. Admittedly you can only allow image resizing if you have good quality images, and even then some distortion creeps in as the size moves too far from the original. But the payoff may be worth it against someone seeing only postage stamp sized thumbs at high resolutions.

You are welcome to hack the source about and for convenience I have left the styles in the HTML document. In action, you would save the styles into their own file and link to it as I have indicated.

Okay, to recap. What we have here is an attempt to make a thumb-preview page which is more search-engine friendly than usual, and a page which accomodates users’ font-size preferences. And bear in mind, to make this layout work in fixed sizes, it is only necessary to switch to pixel (px) dimensions to suit your own tastes, thumb sizes, etc.

Search Engine Friendly

I have annotated the usual meta tags - title, description and keywords - plus h1, h2, and h3 tags. When you are selecting your keyword phrases, bear in mind that almost one search in three is done on 2-word phrases. Another quarter of all search use three words. You might try for two such phrases in your title, adding two more in your description. Unless you are creative enough to write something new, it is reasonable to combine both your title and description for your h1 tag. Mix the keyword phrases up some for the h2 and h3 tags. And of course try to find a happy medium between fiercely competitive keyword combinations and ones which will rarely be used.

This layout - at least for a page with lots of images and links - is quite search engine friendly. Unless you do add a promo at the top (and even then it could be a text-rich promo), the HTML goes straight into h1 and h2 tags and then the text links to galleries. This is a very good thing because some search engines only read the first few hundred words of a page. BTW if they don’t find your keywords in the early part of your content, you could at worst be penalized for attempting keyword spamming.

I have suggested that for image alt tags you use the gallery description. Link title tags are a little more tricky, because they should not duplicate the alt tags or the text links. If you have sub-categories on your TGP, use them for link-titles, otherwise I would be inclined to leave link-title tags out. The general consensus appears to be that alt and link-title tags do not count much these days towards SE placement, so if they cannot be handled automatically - without the risk of spamming - they are probably best ignored. Most trade scripts allow you to include descriptions these days: you can choose between displaying them or, with your own keywords mixed in, use them as link-title tags in your toplist.

You should of course increase your site depth by adding archives, faqs, link pages, reviews, a site-map and anything else which is relevant and you have time for. And if you really have the patience, go through your gallery descriptions and make sure they are generously sprinkled through with your keyword phrases.

The CSS

As it should be with the presentation code removed, the HTML for this page is very simple and I don’t believe it needs any explanation. The CSS is also straightforward but some comments are in order

body {
	background: #FC0;
	font: 0.8em/1.8em Verdana, Geneva, sans-serif;
	}
#outer {
	margin: 0 auto;
	width: 70em;
	background: #FCE5FC;
	border-right: 0.3em solid #F6F;
	border-left: 0.3em solid #F6F;
	}
#header {
	background: url(files/article02301.gif) center 30px no-repeat;
	}		
#header h1 {
	font-size: 0.8em;
	font-weight: bold;
	text-align: center;
	height: 13em;
	min-height: 140px; /* min- and max-height do not work for IE6 */
	max-height: 155px;
	}

Before most of us ever heard of CSS, we were used to quoting image sizes in pixels. Perhaps because of that, but also because it is the best way of ensuring browser-independent identical sizing, we most commonly express dimensions for CSS in pixels (px). However, the purists don’t like that when it comes to font sizes and I agree with them. If you select an absolute font size - say 14px or 11pt - it may look great on your screen, but on a smaller one or a much bigger one? By declaring a relative font size - in this case em although % works as well - you are only modifying the font which your visitor is using by default (0.8em = 80%). The strength of this layout (and it is only a layout, not a design exercise), is that the whole page changes to suit. An “em” BTW is an old-school printing term for the space occupied by the capital letter “M”. Here the line which begins font: 0.8em/1.8em means that the page’s default font size will be 80% of the surfer’s default size and that the line height will be 1.8 times the height which would normally be applied to that size of font (I am a great believer in the liberal use of white space).

To not divert the search engines with a logo, it is inserted as a background image (note that when calling an image you NEVER put quote marks around the URL). By default a background image will begin at the top left and repeat, but you can position it anywhere you like and instruct it to show only once. Top, left, center, right, bottom - as well as pixels as used here - are all valid descriptors. This is the only place on the page I have reverted, partly, to the use of pixels, because the one thing you cannot do with a background image is declare its size. And if you cannot declare its size, you cannot change it. Which is also why - at least for those browsers which recognize them - I have used min- and max-height to restrain the font-size related expansion of the header.

.right {
	display: inline; /* required for Explorers double-margin bug */
	width: 43.8em;
	float: right;
	line-height: 1px; /* prevents extra vertical spacing in Firefox */

Anyone who has been reading other articles here is going to be familiar with float. For those who are not, if you want two or more columns to appear side by side, you “float” them. Explorer however has an odd bug when you combine margins with floats: it doubles their size. Fortunately, the display: inline; statement takes care of that. The other “feature” dealt with in this part of the CSS is that when you flow a bunch of images into a div as we have done here, Firefox inserts a couple of extra pixels vertical spacing between the rows. Reducing the line-height to a very small dimension is the answer to that.

The only other item of note in this CSS is the use of clear: both; in the styling of every div which follows a multi-column section. Any of three things may happen if you leave that out: the first that the block may try to climb up the screen if the columns above have any space between them; the block may place itself at the end of the shortest block above or alongside the rightmost block; and if there is a background, as here, it may not extend all the way down the screen.

Oh sizing. If you want to convert pixels to em’s, the calculation is easy. More or less. Our default setting of 0.8em works out on my monitor as 13px, so if I want to translate a width of say 260px (pixels) into em’s, I simply divide by 13. Thus the images which in more traditional terms are originally 180×135 pixels, became 13.85×10.38em’s.

Verification

Both to avoid problems for you and your visitors and to maximize search-engine friendliness, you should verify your code. One unfortunate consequence of using a Strict doctype (see an earlier article here for explanations of doctypes) is that target=”_blank”, so beloved of TGP designers for cutting out duplicate code, is not allowed. There are three possible solutions. The first would be javascript, but not everyone has javascript enabled. The second would be to create a custom doctype, which browsers may or may not read. So I suggest that you get your code validated and once happy all is well, add the offending instruction to your page. That is not an elegant solution, but it is the most practical.

Try this at home!

Reading through this article to see if it needed revision, it occurred to me that there might be a way to achieve the commonly desired object of having text higher in the HTML but thumbs showing first on-screen, without needing to resort to absolute positioning and its potential headaches.

You would do something like this:

<div id="holder">
	<div id="text">link link link</div>
	<div id="thumbs">img img img</div>
</div>

All quite normal, but the trick is to make the thumb block float left, while at the same time declaring its width to be the same as that of the holder. Float the text block right and it would be forced to appear below the thumbs…