Links: Creating a large target area to hit.

[CJM]

I need a vertical menu with maybe 10 links on it. The menu will run the full
length of the screen, and will consist of 10 large boxes with large-ish text
for the links.

These links need to be large and responsive (idiot-proof) so that the
IT-phobic users can navigate quickly. Note on Context: the page is on an
intranet system, and these links are for guys working on the shop-floor in a
factoring. The monitor and keyboard have [dirty] protective covers hence the
large links.

I was just wondering what the best solution is.

I have three options outlined so far:

1) Large text links - simple, standards-compliant, and fairly effective.
2) Images as links - still simple, higher bandwidth required (not really an
issue on intranet), and makes use of full button area
3) Some kind of javascript thingy - not sure how to do this but pretty sure
it can be done. More complex, requires Javascript to be enabled, but makes
good use of area, and lo-bandwidth

Now I know that any of these options would do for my current problem, but
I'm curious as to if there are any more sophisticated ways that I dont know
about. I'm thinking in terms of cross-browser, non-js, accessible solutions.

I do other work for voluntary orgs, so you can imagine that big, can't-miss
buttons will frequently come in handy, for both technophobics and people
with visual impairements.

Any better ideas?

CJM

[Jonathan Snook]

"CJM" <cj*****@yahoo.co.uk> wrote in message
news:bl************@ID-209813.news.uni-berlin.de...

I need a vertical menu with maybe 10 links on it. The menu will run the full length of the screen, and will consist of 10 large boxes with large-ish text for the links.
[snip]
Now I know that any of these options would do for my current problem, but
I'm curious as to if there are any more sophisticated ways that I dont know about. I'm thinking in terms of cross-browser, non-js, accessible

solutions.

Using CSS, the following may do the trick:
<style type="text/css">
a {display:block; width:200px; height:200px;}
</style>

By redefining the A tag as block, you still get the size that you want while
maintaining the hit area as well. Now, you'll want to make this a class or
use inheritance so that all links on the page aren't like this.

Jonathan
--
http://www.snook.ca/

[CJM]

I haven't tried it yet, but it looks promising.

Thanks Jonathan

"Jonathan Snook" <go***************@snook.ca> wrote in message
news:gh*******************@news04.bloor.is.net.cab le.rogers.com...

"CJM" <cj*****@yahoo.co.uk> wrote in message
news:bl************@ID-209813.news.uni-berlin.de...

I need a vertical menu with maybe 10 links on it. The menu will run the full

length of the screen, and will consist of 10 large boxes with large-ish

text

for the links.
[snip]
Now I know that any of these options would do for my current problem, but I'm curious as to if there are any more sophisticated ways that I dont

know

about. I'm thinking in terms of cross-browser, non-js, accessible

solutions.

Using CSS, the following may do the trick:
<style type="text/css">
a {display:block; width:200px; height:200px;}
</style>

By redefining the A tag as block, you still get the size that you want

while maintaining the hit area as well. Now, you'll want to make this a class or
use inheritance so that all links on the page aren't like this.

Jonathan
--
http://www.snook.ca/