After working on a recent website we had inherited, I began to ponder on using the right tool for the job, and whether a technique or technology has been used because it’s correct, or because it’s clever.
A case in point is pixel sheets. Having been used by Amazon amongst others for quite a while, they are a fantastic way to save on HTTP requests and speed up the loading of your site. However, they can be a little difficult to maintain. For some strange reason these had been used on the site in question for navigation buttons and their text, as well as the text rollover effects. It took me a few moments to comprehend what the thinking behind that was. The rollover effects in question could be easily achieved by using CSS effects, and the text would be difficult to change. This was a totally inappropriate use of the method, and would have created more work for any designer unfortunate to have the job to change it.
The next strange encounter came in the form of the LIs that contained the aforementioned menu items. They had been assigned a float. This had me puzzled, and I delved deeper, assuming that the developer had encountered some unknown issue beyond IE 7 and below’s inability to handle inline-block elements without a simple CSS fix. It seemed that the designer was not aware of this fix and had used a very strange method to work around it. Considering the other issues surrounding IE and nested floats, it wasn’t the wisest of ideas. In case you ever come across it, add this to your CSS:
It will save you a big headache.
The final gripe I have is a usability issue, more than anything. When the user hovers their cursor over a link or something that can be interacted with, please please please add the CSS cursor:pointer. It’s a simple thing but it makes a world of difference to the user in reassuring them that the item in question, be it a link or an interactive object, is meant to be clicked on.