Tuesday, June 24, 2008

Show active links with CSS and 'includes'

A common practice in web design is to use 'includes' for repeating page elements - such as a navigation bar or a sidebar. I am sure all web application frameworks provide some way of using includes. What I could not figure out was a simple way of highlighting the active link in that include - short of scripting, or not using includes at all.

But then again - I hadn't googled it - and here is a simple, even though not the most elegant way of highlighting the active link: Called the Body ID/Class method.

http://www.websiteoptimization.com/speed/tweak/current/

The idea is to add a separate class to each <body> tag and use a corresponding class or id for the link to that page. For example if I add a class 'home' to the <body> tag on my home page, and an id 'home' to the <a> that links to the page in my navigation include,

I just need to add this CSS rule:

body.home a#home{style declaration}

I agree the addition of an extra class to the body tag may be a bit cumbersome - but if you can maintain separate title tags for all pages - you can also do that for your body tags - just follow some kind of standard naming convention.

The benefits to code brevity and code management are immense.

Image Resizing for Web Use

This probably must be the simplest thing to do for most web designers - but yet so many get it wrong.

Or perhaps, it's incorrect to use the term 'web designers': I think what I should say instead is, because everyone thinks this must be simple to do, even non-designers attempt it and get it wrong in the process.

There are two ways in which I have seen this done wrong:

1] HTML resize of images.

Take an image and enter the modified dimensions in the img tag.

So I would say <img src="" height="50" width="50"/> for proportional resize of a square image. [If you enter only one dimension, the image gets resized proportionally anyway].

The problem with this approach is a) The image is not actually being downsampled and you are making your end user download a much larger quantity of data than what's needed b) Most browsers render this resized image incorrectly (except the extremely smart Safari in my experience). Some examples: The right has been resized in a photo editing program (actually the nifty Windows Live Writer did it by itself).

matrix_12 matrix_12

http://blog.burrp.com/2007/09/03/the-green-blue-bday-bash/

Right click on any image and select 'View Image' you will see that the original images are much larger than as they are shown in the content.

2] Indexed color resize of images.

Several of us actually manage to fire up Photoshop to do a resize, but then end up with really ugly resized versions. 

The problem here is that a lot of resizing gets done on logos which are in the .gif format. That means that it has only a specified number of colors allowed (called Indexed color), what needs to be done is to change the mode of the image to RGB before resizing it, subsequent to which it can be saved in the .gif format again.

L-R 1] Original, 2] HTML resize, 3] Photoshop resize in Indexed mode, 4] Photoshop resize in RGB and then saved to index.

  logo_mar_sm_index logo_mar_sm_RGB

Hope this is useful.