I promised that I’d explain more about why I came up with the new layout and a couple of the new features, so here goes:

Read the rest of this entry »

As part of my daily ritual, I frequent various webmaster discussion boards, forums and blogs. One of the hot topics as of late has been the disclosure of Internet advertising to search engines (i.e. Google), with the assumption that said disclosure will lead to the discounting of advertiser links as a potential ranking factor. Opinion on this subject can easily be described as “polarized”; people either seem to be completely for the idea or against the idea, and there is absolutely no middle ground.

One of the naysayers’ primary arguments is that disclosure of advertiser links does nothing whatsoever to help the users and is done for search engines only, which flies in the face of what search engines want us as web designers to do; build for search engines and not for users. However, there is at least a partial solution to this perceived problem that is easy to implement using CSS and a little ingenuity. I call it Full Link Disclosure.

Read the rest of this entry »

A few people have asked me how I pulled off the reflected gradient on the background of this site (see the gradient just below the menu and just above the footer). It’s a relatively simple trick that only requires two divs, is standards compliant, and works with all the major browsers (even Internet Explorer 6…oh, it’s true, it’s true.)

The first thing you need to do is to go into Photoshop and create a pair of linear gradients for yourself. Here’s a quick tutorial on how to create a gradient if you don’t already know. Personally, I create my first gradient and then go into Edit–>Transform–>Flip Vertical to create my other one. But however you do it is up to you, as long as it works.

If you want two gradient backgrounds to work with, use the two from this site to start with:

Next, create the CSS for your two divs (ideally, with an external stylesheet but they can be internally created as well). I like to name my two divs #top-gradient and #bottom-gradient for semantic reasons, but again, this is entirely up to you. If you find something else easier to remember and work with, by all means feel free to use it.

Here’s the CSS code for #top-gradient and #bottom-gradient:

#top-gradient {
background: URL(images/body-top-background.jpg) top center repeat-x #95CBFD;
color: inherit; /* this avoids a CSS warning later on. Whenever a background image or color is defined, a corresponding foreground color should be defined, even if it's inherited as it is in this case. */
}
#bottom-gradient {
background: URL(images/body-bottom-background.jpg) bottom center repeat-x; /* do not define a background color for this gradient as an alternative, or you'll wipe out the top gradient. EXTREMELY IMPORTANT. */
color: inherit;
}

Finally, create your divs somewhere in your HTML body as close to the body tags as is necessary. Make sure the top-gradient (or the one with the background color) is created first, or you won’t get the reflected effect. Order is important in this case.

<div id="top-gradient">
<div id="bottom-gradient">
...
All your other code goes here.
...
</div>
</div>

That’s it. A scalable reflected background gradient that’s quick, neat, clean and easy to do. The only thing you’ll have to watch for is that your foreground content spans at least the height of both backgrounds combined, but if you use this trick for page backgrounds it shouldn’t be an issue.

This trick can be used for both liquid/resizeable layouts (see this page for an example) or in layouts of a fixed width, as I have done once before with Lighten Up, Ontario! As long as your layout doesn’t stretch the full width of the screen, this trick will work.

If you use this trick, can you post the link here so that I can see it? I just want to know how many people found this tutorial of use.