[BNM] Arguments for and against using graphical menu links of textual menu links

[Jason Bailey]

--- On Fri, 17/10/08, David Andrew <david.andrew at gmail.com> wrote:
> <a class="button_bgd" title="Link to the
> homepage">HOME</a>
> 
> compared to
> 
> <a href="homepage.html" title="Link to
> the homepage" ><img
> src="homepage_graphic_button.jpg"
> width="200" height="40"
> alt="homepage button" /></a>
> 

I'm not really sure of the best answer to text vs. images. I would have set text but then I saw the recent posts from someone who was working on the ?Expression? editor; the images for the tool buttons were great.

The example above looks like it's hinting at images in the CSS e.g.
...
background-image: url(buttonBackground.gif);
...

I'm not sure if I've got this right; CSS is for style and the content doesn't go in the CSS?

To me, navigation (a home button etc) is not style it's part of the content (part of the behaviour?). If you're putting the image for a button (or any navigation) into the CSS then aren't you putting content into the CSS? 

I ask this as some browsers (Firefox on XP) have some really nice accessibility features. One of which is to alter the colours of webpages; effectively overriding the CSS of a site.  Designers, obviously, want their work to be seen as intended but I think you have to allow for some people who will want to override the style (is this graceful degradation?). Putting button images into CSS is obviously a great idea as this means re-skinning/re-theming a site is much simpler.

The effect is really to reduce the brightness/glare (produce a high contrast page) from the screen but the side-effect is that it applies custom CSS; which overrides the designer's CSS. The one effect is that images in the CSS disappear. This is fine most of the time except where images for navigation are stored in the CSS.

To replicate this effect, set XP (vista etc) to a high contrast style.
-Right click on the desktop
-Go to Properties
-Click appearance tab
-Select Colour Scheme to high contrast (black background)

Then in Firefox, go into tools>>options>>colours

-Set the text to white and the background to black. 
-Untick the option to "allow pages to choose their own colours".

I was about to say.... Then put a few items in your amazon.co.uk shopping basket and try and look in the basket. Actually, I think they've improved this as I can see the shopping basket now. Instead, if you know of a site that uses a recent version of tinymce; try that out. You should see lots of empty button shapes.

Sorry for rattling on.

Jas


Send instant messages to your online friends http://uk.messenger.yahoo.com