Re: [WSG] Accessible, lightweight JavaScript menu - which ones do people like?

[Ken McCormack]

I programmed my own menu a few years ago, have always used this as it 
does latency and breadcrumbs - only one level though (its easy to add 
sub levels) e.g http://www.continuumusic.com.au


It just renders link tags which can be styled using CSS for hover etc.  
I can document this if anyone is interested - although I'm not sure 
which browsers it covers today -


You define a document tree in javascript and this will then generate 
drop down menus and breadcrumbs, from the same document tree.


Re search engine friendliness - as per my earlier post, I think flyout 
links should not be visible to search engines, and your site should be 
100% navigable with javascript switched off (your top button has to be a 
link in other words).   Script rendered links aren't readable by search 
engines, at least as far as I'm aware : )


Ken



Kay Smoljak wrote:
Just looking through the thread on pure CSS menus... I understand why 
some people say that CSS is not designed for, and therefore should be 
not be used for, behaviour. I've been using Suckerfish menus for the 
past couple of years, because they are simple, search engine friendly 
and lightweight.


So to balance out that thread, which is very theoretical and 
philosophical, let's have some practical examples.
What do people recommend for standards compliant, search engine 
friendly, accessible JavaScript drop-down menu systems? Obviously the 
more lightweight the better.


P.S. I know that many people don't like the use of drop-downs at all. 
However, some people (and some clients) do like them, so let's 
concentrate on getting some good solid examples together.


My input: I have used "Revenge of the menubar" from 
http://www.brainjar.com/dhtml/menubar/ previously with good results. 
The "click to activate dropdown" part takes some getting used to for 
people used to the "instant flyaway" dropdowns, but is actually a good 
approach, I think.


--
Kay Smoljak
standards: kay.zombiecoder.com 

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*** 






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS menus and Pagerank

[Ken McCormack]

I like the pure CSS menu idea a lot - but my approach has always been to 
generate flyout menus using script only


Not sure if this still holds true, but my reason for doing this 
originally was that Google PageRank works best mathematically if your 
link structure is a hierarchy, rather than an interconnected grid -


I figure that coding sub menu links into every HTML page creates 
one-tier grid, rather than a two-tier hierarchy.


My thought is that if you're seeing a non-script enabled user, you're 
visitor is most likely to be (a) Googlebot (b) Screen reader or text 
only browser.


For either one of those, a hierarchical text approach works best -

For script enabled browsers, rendering flyout menus using JavaScript 
overlays the strict hierarchy to produce a more navigable grid - but 
doesn't show Googlebot a mass of non-hierarchical content.


Ken






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Accessible, lightweight JavaScript menu - which ones do people like?

[Thierry Koblentz]

Kay Smoljak wrote:
> not be used for, behaviour. I've been using Suckerfish menus for the
> past couple of years, because they are simple, search engine friendly
> and lightweight.

Scripted solutions can be search engine friendly too.

> My input: I have used "Revenge of the menubar" from
> http://www.brainjar.com/dhtml/menubar/ previously with good results.
> The "click to activate dropdown" part takes some getting used to for
> people used to the "instant flyaway" dropdowns, but is actually a
> good approach, I think.

It has the same usability issue that the one Al did a little demo for.
Also, "look" and "behavior" are not the only things an author should care
for. What about the *markup*?
The use of semantic markup, with the least amount of attributes (id, class
...) is - IMO - the most important thing to look for in a menu.

---
Regards,
Thierry | www.TJKDesign.com



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Accessible, lightweight JavaScript menu - which ones do people like?

[Al Sparber]

From: "Andrew Krespanis" <[EMAIL PROTECTED]>


I only use  James Edwards' Ultimate Dropdown Menu - http://udm4.com/
It's not the lightest JS menu, but I do believe it's the most
accessible and has a very good feature set with extensive
documentation.
Any of my clients who have needed a drop-down nav have gotten UDM 
and

have always been happy. Well worth the price.



I hear the same things often. Although it's not my style of code and 
the weight is not something we would approve of, it's a very good 
menu. Licensing issues for a web designer could get expensive, but the 
docs look very thorough. I won't discuss our commercial menu tools for 
obvious reasons, but will say that we are known for quality code and 
offer unlimited free support via nntp, email, and telphone. I will, 
however, plug our free CSS Express Menu as it addresses many of the 
shortcomings in the Suckerfish approach. It also works in IE5 Mac and 
allows up to 10 instances of the menu on a page. I'd hate to see 
people capitalize on that, but it is available :-)


http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm

Note that one of the Suckerfish shortcomings we address, we do so by 
forbidding people from doing sub-menus that pop out to the right of 
the root :-)


--
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling 
mountain road at 90 miles per hour secure in the knowledge that 
repairs are scheduled for next Tuesday".








***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Accessible, lightweight JavaScript menu - which ones do people like?

[Andrew Krespanis]

On 10/7/06, Kay Smoljak <[EMAIL PROTECTED]> wrote:

So to balance out that thread, which is very theoretical and philosophical,
let's have some practical examples.
What do people recommend for standards compliant, search engine friendly,
accessible JavaScript drop-down menu systems? Obviously the more lightweight
the better.



I only use  James Edwards' Ultimate Dropdown Menu - http://udm4.com/
It's not the lightest JS menu, but I do believe it's the most
accessible and has a very good feature set with extensive
documentation.
Any of my clients who have needed a drop-down nav have gotten UDM and
have always been happy. Well worth the price.


hth,
Andrew
--
http://leftjustified.net/
I got your Web2.0 right here...


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] OS9 browsers (was) *Pure* CSS drop down menu

[Thierry Koblentz]

Nick Gleitzman wrote:

>> Did iCab ship with the OS (honnest question, I don't know)? And is it
>> considered an A-grade browser?
 
> No. OS7/8 shipped with Netscape as the default browser until Bill
> Gates threw some money at Apple to help keep them afloat, at which
> time, and as part of the deal, IE was then also supplied with the OS.
> I *think* it was around the time OS9 was introduced.

Thanks. That's what I thought.
 
> A-grade? Not sure what that means... But I do recall that when IE5/Mac
> was released, it was the browser that (then) had the best Standards
> support going - not that 'Standards' existed then, except to a very
> small minority...

It's a Yahoo thing:
http://developer.yahoo.com/yui/articles/gbs/gbs.html

---
Regards,
Thierry | www.TJKDesign.com


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

[WSG] Accessible, lightweight JavaScript menu - which ones do people like?

[Kay Smoljak]

Just looking through the thread on pure CSS menus... I understand why some people say that CSS is not designed for, and therefore should be not be used for, behaviour. I've been using Suckerfish menus for the past couple of years, because they are simple, search engine friendly and lightweight. 
So to balance out that thread, which is very theoretical and philosophical, let's have some practical examples.What do people recommend for standards compliant, search engine friendly, accessible _javascript_ drop-down menu systems? Obviously the more lightweight the better.
P.S. I know that many people don't like the use of drop-downs at all. However, some people (and some clients) do like them, so let's concentrate on getting some good solid examples together.My input: I have used "Revenge of the menubar" from 
http://www.brainjar.com/dhtml/menubar/ previously with good results. The "click to activate dropdown" part takes some getting used to for people used to the "instant flyaway" dropdowns, but is actually a good approach, I think. 
-- Kay Smoljakstandards: kay.zombiecoder.com

***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: [EMAIL PROTECTED]***

[WSG] OS9 browsers (was) *Pure* CSS drop down menu

[Nick Gleitzman]

Thierry Koblentz wrote:



In my book, that goes against accessibility. It has nothing to do
with your example of DVD and TV from the 60's, it has to do with
real people who are stuck with OS 9. For them, ie 5 is the best
(only) browser.
Let's refer to them as the technology "impaired"...



Don't know, my guess is that a browser that is not even supported by
its vendor any longer is not really on the main Radar. The Argument
that IE is the only OS9 browser is not true, iCab 3 runs nicely on OS9
and passes Acid2.


Did iCab ship with the OS (honnest question, I don't know)? And is it
considered an A-grade browser?


No. OS7/8 shipped with Netscape as the default browser until Bill Gates 
threw some money at Apple to help keep them afloat, at which time, and 
as part of the deal, IE was then also supplied with the OS. I *think* 
it was around the time OS9 was introduced.


A-grade? Not sure what that means... But I do recall that when IE5/Mac 
was released, it was the browser that (then) had the best Standards 
support going - not that 'Standards' existed then, except to a very 
small minority...


Real-world reality check: I've never had a client yet who even knew 
that iCab existed. In my experience, the vast majority of the public 
(who we build sites for, after all) use the default browser that comes 
with the OS, and are not aware (or interested) that alternatives even 
exist.


I think it's important to remember that the developers who subscribe to 
this list live in a somewhat rarified atmosphere, compared to Mr & Mrs 
Joe Public. The detailed and sometimes esoteric discussions that we 
have here have little or no bearing on the average web surfer's 
perception of the medium. All they know is that a site 'works', or it 
doesn't. Our perception of the Web, and what can and can't be done, is 
totally unknown to them. And they don't care...


'...not on the main Radar...' Certainly it's in a minority, but there's 
plenty of people (school students, e.g.) who *are* stuck with OS9/IE5 
because they have no choice. I don't think we should ignore them just 
because their software is out of date. Isn't part of the Standards 
ethic to deliver content to all visitors, regardless of browsing 
device?


It's easy enough to hide your CSS (for layout) from IE5/Mac, and 
deliver only typographically styled content. It may not look as pretty, 
but it's accessible...


N
___
Omnivision. Websight.
http://www.omnivision.com.au/



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] *Pure* CSS drop down menu

[Joshua Briley - Para-Diddle Design]

I hoped to gain a bit of insite from this thread, but things are getting a
bit thick.  Are all of these threads debate oriented?  This is my first
exposure to the group.


Joshua K. Briley
President
Para-Diddle Design, LLC
2196 Biron St. Mandeville, LA 70448
504-232-8250
www.para-diddledesign.com
[EMAIL PROTECTED]

-Original Message-
From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED]
On Behalf Of Christian Heilmann
Sent: Friday, October 06, 2006 6:26 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] *Pure* CSS drop down menu

> what was that about? Do you preach to everyone? I was casually 
> agreeing with your views on usability etc (whilst trying hard not to 
> mention your attitude towards other posters) ... and you give me a 
> lecture? You even cut my paragraphs in half to allow you to treat my 
> words out of context and respond with another lecture ... please do not do
that.

Oh sorry about that. Your email came across as a lecture to me, too - as in
"prove it now". typical misunderstanding when it comes to not hearing/seeing
the other person.

This thread is done for me.

regards,
Chris


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Christian Heilmann]

what was that about? Do you preach to everyone? I was casually agreeing
with your views on usability etc (whilst trying hard not to mention your
attitude towards other posters) ... and you give me a lecture? You even
cut my paragraphs in half to allow you to treat my words out of context
and respond with another lecture ... please do not do that.


Oh sorry about that. Your email came across as a lecture to me, too -
as in "prove it now". typical misunderstanding when it comes to not
hearing/seeing the other person.

This thread is done for me.

regards,
Chris


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Thierry Koblentz]

Christian Heilmann wrote:
>> Why IE Mac didn't make the list? All these Yahoo menus I tried
>> trigger script errors before returning a *blank* page?

> These are demo pages, not implementations.

I thought these demos were supposed to help developers find out how the
menus render in real life?
Don't get me wrong, I think this Yahoo library stuff is very good. But IMHO,
it is not better to push for these "widgets" than pushing for CSS menus.
Both come with issues; the big advantage with the latter is that because
they have been around for a while developers are more aware of their caveats
:)

>> In my book, that goes against accessibility. It has nothing to do
>> with your example of DVD and TV from the 60's, it has to do with
>> real people who are stuck with OS 9. For them, ie 5 is the best
>> (only) browser.
>> Let's refer to them as the technology "impaired"...

> Don't know, my guess is that a browser that is not even supported by
> its vendor any longer is not really on the main Radar. The Argument
> that IE is the only OS9 browser is not true, iCab 3 runs nicely on OS9
> and passes Acid2.

Did iCab ship with the OS (honnest question, I don't know)? And is it
considered an A-grade browser?

---
Regards,
Thierry | www.TJKDesign.com



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Al Sparber]

On 6 Oct 2006, at 22:46, Al Sparber wrote:


You seem to have lost me. Can you elaborate?
Take the full example:
http://developer.yahoo.com/yui/examples/menu/leftnavfromjs.html


Sure. Here is an example that shows exactly what I meant:
http://www.projectseven.com/csslab/testing/yahoomenu/yahoo.html


And it is an old issue. In Feb 1999 Bruce Tognazzini mentions a 
cone- shaped window for the mouse path developed for Apple in his 
answer to  Question 6 (sorry, no purple numbers).


http://www.asktog.com/columns/022DesignedToGiveFitts.html

Are people really re-discovering this?


It would seem that way. We tend to address the limitation by including 
timers (Tog's "half-second delay") because it's the only solution for 
a browser-rendered menu. It gets the job done :-) 





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[John 'Max' Maxwell]

Dear lord Christian,

what was that about? Do you preach to everyone? I was casually agreeing 
with your views on usability etc (whilst trying hard not to mention your 
attitude towards other posters) ... and you give me a lecture? You even 
cut my paragraphs in half to allow you to treat my words out of context 
and respond with another lecture ... please do not do that.


There are some good open discussions on here but a few too many people 
that like to here themselves preach and some very poor awareness of 
common courtesy ... alas another forum ruined by a minority.


"I'd like to tell the council that I am not paying for not getting any
service, yet I have to. Every shop owner would like people to not
complain but just come, buy and leave, but that never happens either.
You don't build web sites for yourself, you build them for people to
come to them and either buy stuff or tell you how great you are. If
your attitude is that you decide what people are allowed to talk to
you (or which bells and whistles are good for them), you shouldn't
wonder when not many come. This is normally the step when people start
thinking about search engine optimization, cause surely this is why
nobody hangs around or not many people comt to the site."

 ummm - are you telling me how to run a web design business? Are you 
briefing me on how to address a client's needs? If you are - please 
don't. Can you people not help being condescending or are you doing it 
to annoy me?


Max.





Christian Heilmann wrote:

blah blah 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Graham Higgins]

On 6 Oct 2006, at 23:32, Christian Heilmann wrote:


And it is an old issue. In Feb 1999 Bruce Tognazzini mentions a cone-
shaped window for the mouse path developed for Apple in his answer to
Question 6 (sorry, no purple numbers).

http://www.asktog.com/columns/022DesignedToGiveFitts.html

Are people really re-discovering this?


Well, it happens when you try to do the same things that have been
done before on other platforms.


Ah, sorry. I should have quoted Tog in full. The issue wasn't  
restricted to Apple's OS:



Question 6

What is the bottleneck in hierarchical menus and what technique  
used on the Macintosh, but not on Windows, makes that bottleneck  
less of a problem? Can you think of other techniques that could be  
applied?


The bottleneck is the passage between the first-level menu and the  
second-level menu. Using Windows, users have to slide across just  
right, least they slip down to the next menu at the last moment.


When I specified the Mac hierarchical menu algorthm, I called for a  
V-shaped buffer zone, so that users could make an increasingly- 
greater error as they neared the hierarchical without fear of  
jumping to an unwanted menu. As long as they are moving a few  
pixels over for every one down, on average, the menu stays open.  
Apple hierarchicals are still far less efficient than single level  
menus, but at least they are less challenging than the average  
video game.


The Windows folks instead leave the hierarchical open for around a  
half-second before jumping down. Thus, as in so many of the other  
areas of their OS, they mimic the Mac without getting it right.  
They have decoupled cause and effect by 1/2 second, a long, long  
time in human-computer interaction. If you happen to get to the  
hierarchical within that half-second, the Windows behavior is  
indistinguishable from the Mac. If you don't, the behavior is just  
weird and few users can figure the rule out.



Cheers,

Graham.






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Christian Heilmann]

> do, it is constantly tested on all the A-level browsers, backed up by

Why IE Mac didn't make the list? All these Yahoo menus I tried trigger
script errors before returning a *blank* page?


These are demo pages, not implementations.


In my book, that goes against accessibility. It has nothing to do with your
example of DVD and TV from the 60's, it has to do with real people who are
stuck with OS 9. For them, ie 5 is the best (only) browser.
Let's refer to them as the technology "impaired"...


Don't know, my guess is that a browser that is not even supported by
its vendor any longer is not really on the main Radar. The Argument
that IE is the only OS9 browser is not true, iCab 3 runs nicely on OS9
and passes Acid2.


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Christian Heilmann]

And it is an old issue. In Feb 1999 Bruce Tognazzini mentions a cone-
shaped window for the mouse path developed for Apple in his answer to
Question 6 (sorry, no purple numbers).

http://www.asktog.com/columns/022DesignedToGiveFitts.html

Are people really re-discovering this?


Well, it happens when you try to do the same things that have been
done before on other platforms.


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Christian Heilmann]

> You seem to have lost me. Can you elaborate?
> Take the full example:
> http://developer.yahoo.com/yui/examples/menu/leftnavfromjs.html

Sure. Here is an example that shows exactly what I meant:
http://www.projectseven.com/csslab/testing/yahoomenu/yahoo.html


The flicker can be customised with a timeout. The use case is a bit
off, though: If I go to my Firefox "view" menu and hover over
toolbars, then go down in a straight line I also lose the menu... Good
point about the delay though, I'll see if I can add a demo with a
defined timeout that makes it less flashy.


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Graham Higgins]

On 6 Oct 2006, at 22:46, Al Sparber wrote:


You seem to have lost me. Can you elaborate?
Take the full example:
http://developer.yahoo.com/yui/examples/menu/leftnavfromjs.html


Sure. Here is an example that shows exactly what I meant:
http://www.projectseven.com/csslab/testing/yahoomenu/yahoo.html


And it is an old issue. In Feb 1999 Bruce Tognazzini mentions a cone- 
shaped window for the mouse path developed for Apple in his answer to  
Question 6 (sorry, no purple numbers).


http://www.asktog.com/columns/022DesignedToGiveFitts.html

Are people really re-discovering this?

Cheers,

Graham.






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Thierry Koblentz]

Christian Heilmann wrote:
> do, it is constantly tested on all the A-level browsers, backed up by

Why IE Mac didn't make the list? All these Yahoo menus I tried trigger
script errors before returning a *blank* page?
In my book, that goes against accessibility. It has nothing to do with your
example of DVD and TV from the 60's, it has to do with real people who are
stuck with OS 9. For them, ie 5 is the best (only) browser.
Let's refer to them as the technology "impaired"...

---
Regards,
Thierry | www.TJKDesign.com



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Al Sparber]

You seem to have lost me. Can you elaborate?
Take the full example:
http://developer.yahoo.com/yui/examples/menu/leftnavfromjs.html


Sure. Here is an example that shows exactly what I meant:
http://www.projectseven.com/csslab/testing/yahoomenu/yahoo.html





> http://www.udm4.com/
Those are the ones I was referring to that might benefit from a 
little

user guide for the site visitor :-)


Again, please elaborate, what do you mean by user guide?


The basic UDM menu is OK. When you opt for the full complement of 
keyboard browsing features, it becomes bloated and less intuitive. 
While you have your ideas on web UIs, I have mine and mine tell me 
that ordinary people, surfing the web, are in mouse mode or, at best, 
Tab key/Alt key mode. They are not going to have the foggiest idea 
that arrow keys are enabled. It is very cool, but over the top - in my 
opinion :-)




If browsers were meant to have multi level menus, there'd be a W3C
standard interface element for it - oh wait, there is:
http://www.w3.org/TR/html4/interact/forms.html#h-17.6
http://www.w3.org/TR/html4/images/optgroup_exmpl.gif
Funny it never got implemented that way in browsers...


Tantek actually did implement that in IE5 Mac. But that's a whole 
other story. I truly believe you make much more of this than there 
needs to be.


--
Al 





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Thierry Koblentz]

Christian Heilmann wrote:
> Well, you expect people to keep up with your development and come back
> and upgrade their implementations, as obviously you found flaws in the
> old one.

I was talking about the "look" of my menu. Its functionality didn't change.
I didn't "upgrade" its implementation, I just created a new "skin".

> Web development requirements change constantly and being on the
> bleeding edge means you bleed. The best example of that is lots of
> amazingly cool CSS hacks allowing MSIE6 to be a good browser now
> causing havoc in MSIE7.

I don't agree. If you do things right, there is no reason that things break
later.
People who got caught with IE 7 are mostly the ones who thought that
plugging the presentational layer with "filters" was smarter than using CC
comments.

> You can do what you want, but if you offer it and praise its amazing
> features people believe they can use your solutions without having to
> care about anything, and this is most of the time just not possible.

You can't stop everybody from going with CSS solutions. If people want a CSS
menu, they'll get a CSS menu. So if a solution is decent why keeping it
secret?

>> This was a choice. Is it "worst" than using "display:none" for the
>> only purpose of easing tabbing navigation? ;-)

> No, you just don't use CSS for this purpose as with a menu with multi
> levels and lots of links tabbing is just not a usable way of
> navigating through it. Be consistent - if you want only mouse users to

This is a point of view. Of course it depends on the amount of links to go
through, but it can also take *less time* to tab through two or three sub
menus than loading a whole new page by following the links in the top level
items. Also, if "skip" links exist then there is less issue with such menu.

>> BTW, what about my question about me "resorting on nesting things
>> inside links"? ;-)

> Who claimed that your example does that? I was talking about CSS only
> solutions in general, where keyboard enabling means nesting markup
> invalidly in links (http://cssplay.co.uk/menu/more.html)

Sorry, I thought you're talking about my solution.

>>> There is more to UI than just using web standard technologies, if
>>> you are to mimick rich user interfaces, then also follow their
>>> rules.

>> I'd agree but most of the times with this approach, solutions lack
>> browsers support. I know, I'm bad, I still think we should care for
>> ie 5 (Mac and Win). And that - in its own way - is pushing the
>> envelop ;)

> Not really, it is keeping outdated technology alive - like trying to
> connect a DVD player to a 60ies black and white TV set. If older
> browsers don't support certain functionality, don't offer it to them -
> another thing you can only do in JavaScript (unless you count
> conditional comments as an option):
> http://developer.yahoo.com/yui/articles/gbs/gbs.html

I just pick one, *randomly*:
http://developer.yahoo.com/yui/examples/menu/example08.html
Looks like it comes with usability issues.  Also, it is not that well
thought, at least mine doesn't let the user follow top level links if JS is
enabled...
But please *look* at the markup, how semantic is *that* thing! And how *big*
is that script?

---
Regards,
Thierry | www.TJKDesign.com




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Christian Heilmann]

> As to full fledged great examples of dynamic menus:
>
> http://developer.yahoo.com/yui/menu/
> http://developer.yahoo.com/yui/examples/menu/

They seem to possess the usability flaws earlier discussed in this
thread.


You seem to have lost me. Can you elaborate?
Take the full example:
http://developer.yahoo.com/yui/examples/menu/leftnavfromjs.html


> http://www.udm4.com/
Those are the ones I was referring to that might benefit from a little
user guide for the site visitor :-)


Again, please elaborate, what do you mean by user guide? If you have
to explain a menu, it failed its purpose, IMHO. And yes, user testing
showed me in the past that multi level menus that don't work like the
windows ones are confusing.


To imply that Yahoo - or Yahoo code is a model for anything is a bit
hard for me to fathom :-)


I didn't imply that, I am just very impressed with the work that went
into the menu widget and the final outcome. I'd be as impressed if
Google, Macrobe or any private organisation had done it.

It is tested with assistive technology, it works as you expect it to
do, it is constantly tested on all the A-level browsers, backed up by
a developer community with a quick turnaround mailing list and is
free. At least to me that makes it an interesting product. Especially
as I have a strong opinion about these kind of menus, I was amazed
that there is not much I can say against this one.

Talking more in-depth with James Edwards who did UDM and reading his
explanations about the usability and accessibility research in the
JavaScript Anthology made me realise that there is much more to it
than just funky skins, too.

The only thing it lacks is a lot of pretty implementations and more
detailed example instructions together with simple examples that don't
expect JS to be enabled. That is - I suppose - based on the fact that
it is meant to be for developers who know about the limitations and
how to use JavaScripts sensibly.

If your purpose is to reach people who just want to implement a multi
level menu on their web sites without spending time or showing
interest to learn about the consequences you have to take another
approach.

If browsers were meant to have multi level menus, there'd be a W3C
standard interface element for it - oh wait, there is:
http://www.w3.org/TR/html4/interact/forms.html#h-17.6
http://www.w3.org/TR/html4/images/optgroup_exmpl.gif
Funny it never got implemented that way in browsers...


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Christian Heilmann]

This is Web pages we are talking about - not operating systems. If I
were inclined to believe what you are trying to say, I would most
certainly drop back ten, punt, and transform my web site into
something that looked like this:
http://www.useit.com/


Why do you try to make them work with design patterns taken from
operating systems and applications then? This doesn't make sense to
me. In most cases I have to go through an operating system with all
these menus to get to a site. Then I get a menu that looks the same,
but works differently, how can you explain that when I am someone who
does not know or care about the limitations of the web? You offer me a
richer experience and you fail to deliver it. Like an escalator that
doesn't run but I need to use it as a normal staircase. To me, this is
an exception and shouldn't be the rule - why have an escalator at all
then?

All this talk about pushing the envelope in web design - and what
people do is simulate UI design of other systems that are inherently
richer. If you copy, at least copy to the full extend, otherwise maybe
put your efforts into creating something that works in browsers but
will not work in a normal operating system. I don't know what that
might be, but it sounds more intriguing and pushing the envelope than
trying to mimick application toolbars.

Pie menus, for example, are very underused.


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

[WSG Announce] Web Standards Group London meetup - October 19

[russ - maxdesign]

This is a one-way list for WSG Announcements

Web Standards Group London meetup - October 19

On Thursday October 19th at 7pm, the second London based meeting for the Web
Standards Group will be taking take place at the New Cavendish Street Campus
of the Westminster University near to Goodge Street tube station.

This month is the WSG meetup is going to be all about Microformats and we
have three speakers that ranks among the leading lights in the field of
Microformats. At the event you be guided through what microformats are, why
they are important and how you can implement them in your own projects

Where: Westminster University, New Cavendish Street

Speakers: Jeremy Keith, Mark Norman Francis, Drew McLellan

More here: http://muffinresearch.co.uk/wsg/

Thanks
Russ




**
Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
**

Re: [WSG] *Pure* CSS drop down menu

[Christian Heilmann]

You like it or not, people ask for these types of menus. Mine was over three
years old and I thought it was time to work on a new one using what I
learned these last years. I don't see anything wrong with that...


Well, you expect people to keep up with your development and come back
and upgrade their implementations, as obviously you found flaws in the
old one.
Are they likely to do that or will the old version still show up in
Google and get used?
I get mails all the time about old scripts I created and generally
tell people not to use them or in extreme cases redirect their
location to an explanation page why my solution was great at that time
but is not clever to use now
(http://www.onlinetools.org/tools/easyletter.php).

Web development requirements change constantly and being on the
bleeding edge means you bleed. The best example of that is lots of
amazingly cool CSS hacks allowing MSIE6 to be a good browser now
causing havoc in MSIE7.

You can do what you want, but if you offer it and praise its amazing
features people believe they can use your solutions without having to
care about anything, and this is most of the time just not possible.
Just call them beta, development version or "exercise".


> Hooray! And to reach the last option with a keyboard I need to tab
> trough ALL options of the menu - very usable that. A real keyboard
> navigation for a menu like this would use cursor keys and allow me to
> go up down left and right, spatial navigation as Opera implements it.

This was a choice. Is it "worst" than using "display:none" for the only
purpose of easing tabbing navigation? ;-)


No, you just don't use CSS for this purpose as with a menu with multi
levels and lots of links tabbing is just not a usable way of
navigating through it. Be consistent - if you want only mouse users to
be able to use your menu, test if a mouse is in use and change the
menu when and if that is possible.


BTW, what about my question about me "resorting on nesting things inside
links"? ;-)


Who claimed that your example does that? I was talking about CSS only
solutions in general, where keyboard enabling means nesting markup
invalidly in links (http://cssplay.co.uk/menu/more.html)


> There is more to UI than just using web standard technologies, if you
> are to mimick rich user interfaces, then also follow their rules.

I'd agree but most of the times with this approach, solutions lack browsers
support. I know, I'm bad, I still think we should care for ie 5 (Mac and
Win). And that - in its own way - is pushing the envelop ;)


Not really, it is keeping outdated technology alive - like trying to
connect a DVD player to a 60ies black and white TV set. If older
browsers don't support certain functionality, don't offer it to them -
another thing you can only do in JavaScript (unless you count
conditional comments as an option):
http://developer.yahoo.com/yui/articles/gbs/gbs.html


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Al Sparber]

From: "Christian Heilmann" <[EMAIL PROTECTED]>

As to full fledged great examples of dynamic menus:

http://developer.yahoo.com/yui/menu/
http://developer.yahoo.com/yui/examples/menu/


They seem to possess the usability flaws earlier discussed in this 
thread.





http://www.udm4.com/
Those are the ones I was referring to that might benefit from a little 
user guide for the site visitor :-)


Christian,

This is Web pages we are talking about - not operating systems. If I 
were inclined to believe what you are trying to say, I would most 
certainly drop back ten, punt, and transform my web site into 
something that looked like this:


http://www.useit.com/

To imply that Yahoo - or Yahoo code is a model for anything is a bit 
hard for me to fathom :-) 





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Joshua K . Briley]

The issue of "timers" is fairly elementary _javascript_ and has been at 
work in many menu systems for quite a few years - :-)

Right.  Sorry.  I didn't mean to suggest that they "created" the so-called timers, but they introduced them to the suckerfish-type menus, addressing the usability concerns presented earlier in this discussion.

Joshua K. Briley 
CEO/President 
Para-Diddle Design, LLC 
504-232-8250 
www.para-diddledesign.com 

On Fri, 6 Oct 2006 15:56 , Al Sparber <[EMAIL PROTECTED]> sent:



> One of the issues I've found with CSS drop down menus is that the 
> functions cannot be time sensitive. James Edwards and Cameron Adams 
> have writen some _javascript_ functions in the Sitepoint _javascript_ 
> Anthology

The issue of "timers" is fairly elementary _javascript_ and has been at 
work in many menu systems for quite a few years - :-)

-- 
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling 
mountain road at 90 miles per hour secure in the knowledge that 
repairs are scheduled for next Tuesday".








***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] While we are discussing menus

[Tina Starnes]

OH ! I figured it out all by myself *big grin*
 
I had to make the layer size 1px x 1px
 
Maybe someone else can tell me a better fix - but it fixed it 
:)
 
Thanks!

***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: [EMAIL PROTECTED]***

Re: [WSG] *Pure* CSS drop down menu

[Christian Heilmann]

This is all explained here: http://www.wait-till-i.com/index.php?p=327
but anyways...


I have often been told that pure CSS is a good idea as javascript is
something that can be turned off - is this true?


Yes, JavaScript can be turned off. However, the flipside of that is
that you can test if it is enabled or not - you can even test if the
user hit a key or clicked a mouse to activate the current link, all
things you cannot do in CSS.
In CSS you expect the browser to support all functionality you create
- with JavaScript you can test for it and only apply it when it is
available. If the browser does not support it you start hacking. This
is why a lot of CSS only menus (not TJK's) add extra invalid markup
for MSIE 6 to behave. In essence, you sacrifice clean, quick loading
HTML to make a technology work that is supposed to be lightweight and
easy.


I am very much in the camp of pushing envelopes etc - but in the 'page'
- at the end of the day, maybe navigation is the one area where you need
to stick to what works best across all scenarios.


Navigation is a very important part of a site, you can get people with
a good page, you keep them with a sturdy and easy to grasp navigation.


I think the most important phrase for this kind of thing is 'graceful
degradation'. I personally think you should have a menu that looks
exactly as you want it with all bells and whistles - on the perfect
platform say a std FF browser. Then it should be capable of degrading as
each bell and whistle is removed. As part of this process I guess
trade-offs are made and that is the beauty of every client being
different. Where one may leave off a bell to help out a particular group
of users ... another may ask for a bag of whistles and stuff 'em!


I'd like to tell the council that I am not paying for not getting any
service, yet I have to. Every shop owner would like people to not
complain but just come, buy and leave, but that never happens either.
You don't build web sites for yourself, you build them for people to
come to them and either buy stuff or tell you how great you are. If
your attitude is that you decide what people are allowed to talk to
you (or which bells and whistles are good for them), you shouldn't
wonder when not many come. This is normally the step when people start
thinking about search engine optimization, cause surely this is why
nobody hangs around or not many people comt to the site.

Graceful degredation is always reacting. You build something shiny and
then take things off, fix them, change them and so on. You look
backward. Instead, we should be planning for the future, not the past
and that is called Progressive Enhancement.

The idea is simple: You create a web site with a navigation that is
easy to grasp and has all the necessary elements in it to navigate
around the site.

This does not mean you add all levels and allow the user to jump to
every page in the site with the menu - this is what sitemaps are for.
If you ever had to tab through 50 links you know it is not helping but
simply annoying. Also consider mobile phones and PDAs as potential
user agents.

You make sure this menu works with no images, no JavaScript and no CSS
available. Then you add CSS to make it look better. Then you take
JavaScript to make it behave differently - maybe add an extra class to
the main navigation element when JS is available to apply a different
style.

You use JavaScript after testing that it is available and apply all
the behaviour with it. To ensure ease of maintenance, you don't put
any look and feel in the JavaScript, but you apply classes dynamically
and keep all the "pretty" look in CSS.


So, I am quite clear on what you DON'T like - but what about these great
combination menus with CSS and javascript? Can you point us to some of
your work? I am not really interested in key tab navigation right now -


And this is where you miss out. A dynamic menu has to be keyboard
enabled, not only for the sake of accessibility, but also for plain
usability. I don't know about you, but I am using keyboard
predominantly to navigate around my operating system. If someone
offers me a menu that looks like it belongs in the browser toolbar or
in a rich user interface app, I do expect it to allow me to navigate
around different levels with cursor keys.

Pushing the envelope does not stop with doing things the same way
we've done them when browsers were awful. I love reading RSS feeds
with Google Reader and navigate them with my cursor keys; I also think
it is very convenient to highlight all my mails in Yahoo Mail with
ctrl+a and mark them as read with another keystroke. Do you prefer
clicking checkboxes?


I'd just like to see:

1. How good these 'super-valid' menus can look.
2. What methods are used to achieve them and how they cope with the
'turning off' idea I have mentioned above.


As to full fledged great examples of dynamic menus:

http://developer.yahoo.com/yui/menu/
http://developer.yahoo.com/yui/examples/menu/

h

[WSG] While we are discussing menus

[Tina Starnes]

I have a problem - 
remember I am just starting to grasp the how's of making css control my 
menus.
 
I have a site 
which I am rather proud of the way it is turning out except for one small 
flaw.
 
heres the url for 
demo purposes : http://mkpeace.crsdesignsinc.com
 
Now the problem. 
The drop down menu on this site collides with the layered "tagline" on top of 
the pictures. I have tried every flippin' clear I could - as in researching the 
issue I found that if I use clear on the (from my understanding) layered image 
it will correct the issue.
 
This only happens 
on this particular page - since i have it nested in the div with the pictures 
and the graphic needs to be :relative so that when you resize it or whatever it 
stays in it's place.
 
Please help this 
newbie to actually compliant and css drive sites to figure this 
out.
I am starting to 
get anal about doing everything the RIGHT way but there are times when I simply 
get stuck :(
 
Thanks 
!
 

Tina 
Starnes
Owner CRS Designs
Creators of 
ZenCart Templates with Flair
(909) 
210-8809
 

***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: [EMAIL PROTECTED]***

Re: [WSG] *Pure* CSS drop down menu

[Tom Livingston]

Title: Re: [WSG] *Pure* CSS drop down menu



FWIW, what we have done in the past uses JS timers as mentioned to auto hide the drops when not moused on as well as JS to show/hide layers (the drop menus). Otherwise, if JS is off, the main nav button that would have triggered the drop is clickable, bringing you to a section home/landing with a sub nav of the missed drop menu items.

Hope that makes sense.

HTH 


On 10/6/06 3:58 PM, "Joshua K.Briley" <[EMAIL PROTECTED]> wrote:

I've set up similar CSS drop down menus to the one by TK (however, not IE friendly), but the usability is limited because of the precise mousework required.  I realize this goes against the nature of what you're trying to accomplish, but is there any other alternative solution.  I'd be interested in finding out if server side scripting could accomplish the timing issues.




-- 
Tom Livingston | Senior Multimedia Artist | Media Logic | 
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com





***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: [EMAIL PROTECTED]***

Re: [WSG] *Pure* CSS drop down menu

[Al Sparber]

One of the issues I've found with CSS drop down menus is that the 
functions cannot be time sensitive.  James Edwards and Cameron Adams 
have writen some Javascript functions in the Sitepoint Javascript 
Anthology


The issue of "timers" is fairly elementary JavaScript and has been at 
work in many menu systems for quite a few years - :-)


--
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling 
mountain road at 90 miles per hour secure in the knowledge that 
repairs are scheduled for next Tuesday".









***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] *Pure* CSS drop down menu

[Joshua K . Briley]

Frances,

One of the issues I've found with CSS drop down menus is that the functions cannot be time sensitive.  James Edwards and Cameron Adams have writen some _javascript_ functions in the Sitepoint _javascript_ Anthology that deal with this issue.  This JS allows the user to take a less direct path between navigational elements because there is a timer that keeps each menu item open for a predetermined amount of time.

I've set up similar CSS drop down menus to the one by TK (however, not IE friendly), but the usability is limited because of the precise mousework required.  I realize this goes against the nature of what you're trying to accomplish, but is there any other alternative solution.  I'd be interested in finding out if server side scripting could accomplish the timing issues.

Joshua K. Briley 
CEO/President 
Para-Diddle Design, LLC 
504-232-8250 
www.para-diddledesign.com 

On Fri, 6 Oct 2006 17:18 , Frances Berriman <[EMAIL PROTECTED]> sent:




-Original Message-
From: listdad@webstandardsgroup.org
[listdad@webstandardsgroup.org] On Behalf Of Thierry Koblentz
Sent: 06 October 2006 16:40
To: wsg@webstandardsgroup.org
Subject: [WSG] *Pure* CSS drop down menu

>I'd appreciate any comment that would help me improve this menu:
>http://www.tjkdesign.com/articles/new_drop_down/AB.asp

>I'd also appreciate feedback on browsers support as so far I've only
tested
>in:
>- ie7,
>- ie6,
>- ie5 (Win and Mac),
>- FF 0.8,
>- FF 1.5,
>- Opera 9,
>- Safari 2


It's functional enough from what I can tell (been playing with it in
FF), but not terribly user-friendly. 

I wouldn't use it. It requires some serious dexterity and hand-eye
co-ordination at times (as is common with pure-CSS methods). 

For example, click on Airlines: S-T or U-Z and try and go to one of the
sub-sections. You have to make sure you go straight down with your
mouse a few notches and then left (or curve). If you try and do a
straight diagonal line to the nearest button, more often than not, you
lose it!


__
This email has been scanned by the MessageLabs Email Security System.
For more information please visit http://www.messagelabs.com/email 
__


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Thierry Koblentz]

Christian Heilmann wrote:
> These are not new things. This is a dead horse that has been flogged
> so many times there is nothing left of it. Search CSS-D for "problems
> with suckerfish", check cssplay.co.uk, there is nothing whatsoever
> creative or inventive about CSS-only menus. It is an endless circle
> the CSS Design community has been in ever since Eric Meyer pushed that
> envelope back in ... was it 2001?

I believe this article:
 http://tjkdesign.com/articles/css%20pop%20ups/default.asp
is from this "era". So you see that this is not new to me...

> presentational technology working together. Please stop giving new
> developers ideas that all they will ever need to know is HTML and CSS,
> it just is not enough.

You like it or not, people ask for these types of menus. Mine was over three
years old and I thought it was time to work on a new one using what I
learned these last years. I don't see anything wrong with that...

>>> CSS behaviour is a one trick pony - everything works with pseudo
>>> selectors and those don't get applied cross-browser. In order to
>>> offer keyboard support you even have to resort to nesting things
>>> inside links which simply does not make sense semantically.

>> What do you mean? I'm not nesting things inside links.
>> The links do not contain anything else than *text*, I'm not even
>> using attributes (besides "href" of course)...

> Hooray! And to reach the last option with a keyboard I need to tab
> trough ALL options of the menu - very usable that. A real keyboard
> navigation for a menu like this would use cursor keys and allow me to
> go up down left and right, spatial navigation as Opera implements it.

This was a choice. Is it "worst" than using "display:none" for the only
purpose of easing tabbing navigation? ;-)
Anyway, it was not an exercice about keyboard naviagation, it was to make
sure users do not tab through sub menu items that are *-px* to the left
of the viewport.

BTW, what about my question about me "resorting on nesting things inside
links"? ;-)

> There is more to UI than just using web standard technologies, if you
> are to mimick rich user interfaces, then also follow their rules.

I'd agree but most of the times with this approach, solutions lack browsers
support. I know, I'm bad, I still think we should care for ie 5 (Mac and
Win). And that - in its own way - is pushing the envelop ;)

---
Regards,
Thierry | www.TJKDesign.com



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[John 'Max' Maxwell]

Hi Al,

not condescending at all - particularly for you ;-).

All good points - and this time I realised what you meant by the sub 
menu items in the flow of the page.


Many thanks,

Max.



I'm sure Christian will respond, but I would like to offer some input, 
as well. Based on our last go'round here, I'm pretty surre I understand 
your perspective, which I fully respect. What comes next is not 
preaching and is not meant to be condescending, so please don't take it 
that way.




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Al Sparber]

Hi Christian,
So, I am quite clear on what you DON'T like - but what about these 
great combination menus with CSS and javascript? Can you point us to 
some of your work? I am not really interested in key tab navigation 
right now - I'd just like to see:


1. How good these 'super-valid' menus can look.
2. What methods are used to achieve them and how they cope with the 
'turning off' idea I have mentioned above.


I look forward to hearing your thoughts.


I'm sure Christian will respond, but I would like to offer some input, 
as well. Based on our last go'round here, I'm pretty surre I 
understand your perspective, which I fully respect. What comes next is 
not preaching and is not meant to be condescending, so please don't 
take it that way.


Making a navigation bar that works with JavaScript disabled is not 
bad. Christian's points about presentation vs. behavior are valid 
points, but perhaps a bit esoteric in some contexts. My position is 
simple, a menu should be accessible and usable. Can you always be 
perfectly accessible or perfectly usable? No. But you can address big 
issues, like:


Javascript support and timers to prevent premature or unwanted closing 
or changing of sub-menus. Without script, these kinds of menus simply 
will not work in 80+% of the browsers in use worldwide. That can be 
addressed by activating the links on the root menu items to load the 
relevant page, while using CSS to force open the associated sub-menu 
or, if that's not convenient, to include the sub-menu links within the 
flow of the page's content. An example of that can be seen here:


http://www.projectseven.com/tutorials/accessibility/pop_integrated/pmmsite/index.htm

The above page also addresses keyboard navigation, by hiding the 
sub-menus. This prevents keyboard surfers from having to tab through 
links that are hidden offscreen. Imagine how frustrating that can be. 
Of course, one can script in full keyboard support that emulates what 
Windows or OSX does with these kinds of menus - but that severely 
bloats code and often requires a mini user-guide for site visitors :-) 
So, in the example site, the menu is purely additive and must be 
combined with an intelligently structured site that contains relevant 
link in the page flow to help pull people through the site.


With certain menu orientations, you can use images to mitigate 
problems caused by diagonal mouse or pointer movements - even in a 
so-called "pure CSS menu"... as in this page:


http://www.projectseven.com/csslab/testing/listmenus/exp_vproto/

Of course, you can use a "pure CSS menu" in an orientation that works 
within the inherent limitations of such menus by configuring a 
vertical drop-down limited to a single sub-menu level:

http://www.projectseven.com/tutorials/navigation/auto_hide/workpage.htm


I hope this helps someone.









***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[John 'Max' Maxwell]

Hi Christian,

I am pretty new to all of this and by no means any kind of expert - so I 
am reading this all with interest.


I have often been told that pure CSS is a good idea as javascript is 
something that can be turned off - is this true?


I am very much in the camp of pushing envelopes etc - but in the 'page' 
- at the end of the day, maybe navigation is the one area where you need 
to stick to what works best across all scenarios.


I think the most important phrase for this kind of thing is 'graceful 
degradation'. I personally think you should have a menu that looks 
exactly as you want it with all bells and whistles - on the perfect 
platform say a std FF browser. Then it should be capable of degrading as 
each bell and whistle is removed. As part of this process I guess 
trade-offs are made and that is the beauty of every client being 
different. Where one may leave off a bell to help out a particular group 
of users ... another may ask for a bag of whistles and stuff 'em!


So, I am quite clear on what you DON'T like - but what about these great 
combination menus with CSS and javascript? Can you point us to some of 
your work? I am not really interested in key tab navigation right now - 
I'd just like to see:


1. How good these 'super-valid' menus can look.
2. What methods are used to achieve them and how they cope with the 
'turning off' idea I have mentioned above.


I look forward to hearing your thoughts.

Thanks,

Max.




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Christian Heilmann]

>>> I'd appreciate any comment that would help me improve this menu:
>>> http://www.tjkdesign.com/articles/new_drop_down/AB.asp

> How many more times do we have to prove that we can use CSS for
> behaviour just to realise that it was never meant for it?

I agree with you, but pushing the envelop is fun and helps to learn new
things...


These are not new things. This is a dead horse that has been flogged
so many times there is nothing left of it. Search CSS-D for "problems
with suckerfish", check cssplay.co.uk, there is nothing whatsoever
creative or inventive about CSS-only menus. It is an endless circle
the CSS Design community has been in ever since Eric Meyer pushed that
envelope back in ... was it 2001? And every time someone invents yet
the same solution slightly different again there are many back and
forth emails about what and how they fail. In 1998 we created menus
with JavaScript and Flash, now we try it with CSS - the only clever
way is to create menus with a mixture of server-side, client side and
presentational technology working together. Please stop giving new
developers ideas that all they will ever need to know is HTML and CSS,
it just is not enough.


> CSS behaviour is a one trick pony - everything works with pseudo
> selectors and those don't get applied cross-browser. In order to offer
> keyboard support you even have to resort to nesting things inside
> links which simply does not make sense semantically.

What do you mean? I'm not nesting things inside links.
The links do not contain anything else than *text*, I'm not even using
attributes (besides "href" of course)...


Hooray! And to reach the last option with a keyboard I need to tab
trough ALL options of the menu - very usable that. A real keyboard
navigation for a menu like this would use cursor keys and allow me to
go up down left and right, spatial navigation as Opera implements it.

There is more to UI than just using web standard technologies, if you
are to mimick rich user interfaces, then also follow their rules.

--
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Thierry Koblentz]

Christian Heilmann wrote:
>>> I'd appreciate any comment that would help me improve this menu:
>>> http://www.tjkdesign.com/articles/new_drop_down/AB.asp

> How many more times do we have to prove that we can use CSS for
> behaviour just to realise that it was never meant for it?

I agree with you, but pushing the envelop is fun and helps to learn new
things...

> CSS behaviour is a one trick pony - everything works with pseudo
> selectors and those don't get applied cross-browser. In order to offer
> keyboard support you even have to resort to nesting things inside
> links which simply does not make sense semantically.

What do you mean? I'm not nesting things inside links.
The links do not contain anything else than *text*, I'm not even using
attributes (besides "href" of course)...

---
Regards,
Thierry | www.TJKDesign.com



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Thierry Koblentz]

Frances Berriman wrote:
> -Original Message-
> From: listdad@webstandardsgroup.org
> [mailto:[EMAIL PROTECTED] On Behalf Of Thierry Koblentz
> Sent: 06 October 2006 16:40
> To: wsg@webstandardsgroup.org
> Subject: [WSG] *Pure* CSS drop down menu
>
>> I'd appreciate any comment that would help me improve this menu:
>> http://www.tjkdesign.com/articles/new_drop_down/AB.asp

> It's functional enough from what I can tell (been playing with it in
> FF), but not terribly user-friendly.

Actually, this solution is more "keyboard-friendly" than some scripted
solutions :)

> I wouldn't use it.  It requires some serious dexterity and hand-eye
> co-ordination at times (as is common with pure-CSS methods).

I agree, pure CSS menus are not the best when it comes to usability. My
first solution is three years old and I *never* used it in real life...
But I have added some extra padding on this one; as you can see, pointing
device users can be off by almost 10px without losing the sub menus. Also,
it is just a matter of taking care of what you're dealing with. Here I
wanted the top level items to stretch across the container, but if I remove
the last item (or may be two), then it would be more difficult for users to
trigger the wrong sub menu as straight diagonal lines would not cross other
items as much.

IMO, the best would be to use this solution as a "fallback" for scripted
methods.

---
Regards,
Thierry | www.TJKDesign.com



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Thierry Koblentz]

Christian Montoya wrote:
> On 10/6/06, Thierry Koblentz <[EMAIL PROTECTED]> wrote:
>> I'd appreciate any comment that would help me improve this menu:
>> http://www.tjkdesign.com/articles/new_drop_down/AB.asp
 
> I would recommend somehow positioning the sub-list to line up with the
> upper link that makes it appear. As it is, all sub-lists align left,
> which makes it very unintuitive when hovering over upper-items along
> the right.

Good point. That would also help re usability (the diagonal problem).

---
Regards,
Thierry | www.TJKDesign.com


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Bad Design Principles

[jdreid]

And I should have titled this thread better as well.  Not that the design is 
bad, but the build process is lacking IMHO.

Jeff


 Doc <[EMAIL PROTECTED]> wrote: 
> Nick,
> 
> Just by way of clarification, when I said "it _looks_ bad" I wasn't
> referring to the visual aspect of the design, but rather the execution.
> 
> Cheers
> Steve
> 
> On 06/10/06, Nick Lo <[EMAIL PROTECTED]> wrote:
> 
> >
> > Also, I wouldn't even say it "looks bad" as visually it's much better
> > than a lot of sites (aside from little things like overly faint and/
> > or small text). With that in mind the only way to really say it is
> > bad design is if it is inappropriate to it's requirements... which we
> > don't know.
> 
> 
> --
> Steve 'Doc' Baty B.Sc (Maths), M.EC, MBA
> Director, User Experience Strategy
> Red Square
> P: +612 8289 4930
> M: +61 417 061 292
> 
> Member, UPA - www.upassoc.org
> Member, IxDA - www.ixda.org
> Member, Web Standards Group - www.webstandardsgroup.org
> 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Bad Design Principles

[jdreid]

And I should have titled this thread better as well.  Not that the design is 
bad, but the build process is lacking IMHO.

Jeff


 Doc <[EMAIL PROTECTED]> wrote: 
> Nick,
> 
> Just by way of clarification, when I said "it _looks_ bad" I wasn't
> referring to the visual aspect of the design, but rather the execution.
> 
> Cheers
> Steve
> 
> On 06/10/06, Nick Lo <[EMAIL PROTECTED]> wrote:
> 
> >
> > Also, I wouldn't even say it "looks bad" as visually it's much better
> > than a lot of sites (aside from little things like overly faint and/
> > or small text). With that in mind the only way to really say it is
> > bad design is if it is inappropriate to it's requirements... which we
> > don't know.
> 
> 
> --
> Steve 'Doc' Baty B.Sc (Maths), M.EC, MBA
> Director, User Experience Strategy
> Red Square
> P: +612 8289 4930
> M: +61 417 061 292
> 
> Member, UPA - www.upassoc.org
> Member, IxDA - www.ixda.org
> Member, Web Standards Group - www.webstandardsgroup.org
> 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Article: creating drop cap on the fly

[Thierry Koblentz]

Paul Novitski wrote:
> Re:
> http://tjkdesign.com/articles/a_perfect_Image_Replacement_technique.asp
> I wrote:
>>> The most obvious disadvantage of using JavaScript to modify markup
>>> is the inevitable delay: scripts of this nature wait till download
>>> is complete before manipulating the DOM.

> Maybe I'm missing something, but I don't see Thierry's script
> protecting you from unwanted images unless you disable JavaScript,
> which is about like burning down your house just to turn off your
> TV.*  My understanding is that if a browser doesn't support images
> then it simply displays the ALT text and doesn't bother downloading
> the unusable image files themselves.  Thierry's script downloads
> images (creates image tags) if JavaScript is running, no mention of
> whether the browser supports images.

Paul,
Forget *visual* browsers. What about the lowest level: no images no JS (the
way Google sees our pages BTW)?
With a Server-Side solution you *pollute* the document with
meaningless/useless IMG elements.

> One of the many clever aspects of Thierry's IR technique is that, in
> the absence of client-side scripting, it falls back gracefully to the
> plain text in the markup.  If the images are inserted before download
> instead of after download, the resultant markup is the same as it is
> when JavaScript executes, but the server-side solution works
> regardless of JS support in the client.

As I said in my previous post. What markup? The image and the first
character or the image only with the appropriate value for the "alt"
attribute? Because another point to take into consideration is that in this
case, the document would fail Checkpoint 2.1:
http://www.hisoftware.com/cc/altquality.htm#a21

---
Regards,
Thierry | www.TJKDesign.com



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Christian Heilmann]

>I'd appreciate any comment that would help me improve this menu:
>http://www.tjkdesign.com/articles/new_drop_down/AB.asp



It's functional enough from what I can tell (been playing with it in
FF), but not terribly user-friendly.
I wouldn't use it.  It requires some serious dexterity and hand-eye
co-ordination at times (as is common with pure-CSS methods).
For example, click on Airlines: S-T or U-Z and try and go to one of the
sub-sections.  You have to make sure you go straight down with your
mouse a few notches and then left (or curve).  If you try and do a
straight diagonal line to the nearest button, more often than not, you
lose it!


+1

How many more times do we have to prove that we can use CSS for
behaviour just to realise that it was never meant for it?

CSS behaviour is a one trick pony - everything works with pseudo
selectors and those don't get applied cross-browser. In order to offer
keyboard support you even have to resort to nesting things inside
links which simply does not make sense semantically.

http://wait-till-i.com/index.php?p=327

--
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] *Pure* CSS drop down menu

[Christian Montoya]

On 10/6/06, Thierry Koblentz <[EMAIL PROTECTED]> wrote:

I'd appreciate any comment that would help me improve this menu:
http://www.tjkdesign.com/articles/new_drop_down/AB.asp


I would recommend somehow positioning the sub-list to line up with the
upper link that makes it appear. As it is, all sub-lists align left,
which makes it very unintuitive when hovering over upper-items along
the right.

--
--
Christian Montoya
christianmontoya.com ... portfolio.christianmontoya.com


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] *Pure* CSS drop down menu

[Frances Berriman]

 
-Original Message-
From: listdad@webstandardsgroup.org
[mailto:[EMAIL PROTECTED] On Behalf Of Thierry Koblentz
Sent: 06 October 2006 16:40
To: wsg@webstandardsgroup.org
Subject: [WSG] *Pure* CSS drop down menu

>I'd appreciate any comment that would help me improve this menu:
>http://www.tjkdesign.com/articles/new_drop_down/AB.asp

>I'd also appreciate feedback on browsers support as so far I've only
tested
>in:
>- ie7,
>- ie6,
>- ie5 (Win and Mac),
>- FF 0.8,
>- FF 1.5,
>- Opera 9,
>- Safari 2


It's functional enough from what I can tell (been playing with it in
FF), but not terribly user-friendly.  

I wouldn't use it.  It requires some serious dexterity and hand-eye
co-ordination at times (as is common with pure-CSS methods).  

For example, click on Airlines: S-T or U-Z and try and go to one of the
sub-sections.  You have to make sure you go straight down with your
mouse a few notches and then left (or curve).  If you try and do a
straight diagonal line to the nearest button, more often than not, you
lose it!


__
This email has been scanned by the MessageLabs Email Security System.
For more information please visit http://www.messagelabs.com/email 
__


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] *Pure* CSS drop down menu

[Tina Starnes]

 > I'd appreciate any comment that would help me improve this menu:
> http://www.tjkdesign.com/articles/new_drop_down/AB.asp
> 


I really like this menu - it works well in all the browsers I have installed
( Opera, IE 6, IE 7, FF, etc. ).

I look forward to it's release as I would love the opportunity to play with
it since I am just now getting comfortable enough with CSS to start using it
to completely build my menu systems.

Hope you have a great day!
Tina Starnes



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Article: creating drop cap on the fly

[Paul Novitski]

Re:
http://tjkdesign.com/articles/a_perfect_Image_Replacement_technique.asp
I wrote:

The most obvious disadvantage of using JavaScript to modify markup is
the inevitable delay: scripts of this nature wait till download is
complete before manipulating the DOM.


At 10/6/2006 03:00 AM, Christian Heilmann replied:

True, but you can counteract this with newer techniques like
onAvailable instead of onload.
http://dean.edwards.name/weblog/2005/09/busted/


Thanks for this link!  Good old Dean!



I'd rather not have to download images for each header if
my browser doesn't support them anyway.


Maybe I'm missing something, but I don't see Thierry's script 
protecting you from unwanted images unless you disable JavaScript, 
which is about like burning down your house just to turn off your 
TV.*  My understanding is that if a browser doesn't support images 
then it simply displays the ALT text and doesn't bother downloading 
the unusable image files themselves.  Thierry's script downloads 
images (creates image tags) if JavaScript is running, no mention of 
whether the browser supports images.


One of the many clever aspects of Thierry's IR technique is that, in 
the absence of client-side scripting, it falls back gracefully to the 
plain text in the markup.  If the images are inserted before download 
instead of after download, the resultant markup is the same as it is 
when JavaScript executes, but the server-side solution works 
regardless of JS support in the client.


Warm regards,
Paul

* As everyone knows, the preferred technique is to throw the TV out 
an upper-floor window. 




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

[WSG] *Pure* CSS drop down menu

[Thierry Koblentz]

I'd appreciate any comment that would help me improve this menu:
http://www.tjkdesign.com/articles/new_drop_down/AB.asp

I'd also appreciate feedback on browsers support as so far I've only tested
in:
- ie7,
- ie6,
- ie5 (Win and Mac),
- FF 0.8,
- FF 1.5,
- Opera 9,
- Safari 2

---
Regards,
Thierry | www.TJKDesign.com



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Article: creating drop cap on the fly

[Thierry Koblentz]

Paul Novitski wrote:
> At 10/4/2006 08:49 AM, Thierry Koblentz wrote:
>> I'd appreciate any comment that would help me improve this article:
>>
http://www.tjkdesign.com/articles/the_perfect_image_replacement_technique.asp
>> and http://www.tjkdesign.com/articles/the_perfect_drop_cap.asp

> While of course I agree with the intentions and results of these
> image-replacement techniques, I disagree with one important aspect of
> their implementation: the use of JavaScript.  Using a client-side
> script to modify downloaded HTML is like editing a newspaper after
> the edition has hit the stands.

Hi Paul,

AFAIK, *all* Images Replacement techniques used to use *background* images,
so I'd say it shows that authors never meant these images to be *content*.
IMO, UAs should get the cleanest document possible because we can't assume
who or "what" is the end user (what's the benefit of having machines parse
drop cap images?).
I know PHP is cool (I'm still mad at myself for going with ASP years ago),
but I think the main rule should be to deliver *clean* documents. I believe
the more presentational elements are removed from the markup the better.

> Not to mention, JavaScript-dependent solutions depend, duh, on
> client-side scripting being enabled.  The conscientious developer
> must plan for a scriptless fallback (which you have done
> astutely).

I'm curious to know what would be your approach to create drop caps
server-side. One of the advantages of my solution is that I can rely on the
layers on which the technique is based on to prevent "issues". I can use JS
and CSS to make sure the document always make sense no matter which "layer"
is *off* or even if both are off.
I just can't see how that could be solved through server-side scripting...

---
Regards,
Thierry | www.TJKDesign.com



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Apply style to only

[Nirmal Kumar]

thanx
On 10/5/06, Lachlan Hunt <[EMAIL PROTECTED]> wrote:
Taco Fleur wrote:> Is there a way to apply a style to the  tag only?Yes.li { /* Styles for li elements */ }
> For example; when I have an ordered list, I would like the numbers to have> the same font type as the paragraphs , to do so I apply a style to the>  or  but that is inherited by anything within the  tag.
So, what you're really asking is how do you style just the marker.Although it's not yet supported, you will one day be able to do this:li::marker { ... }But, until then, you have to work around it by doing this:
li { /* styles */ }li span { /* override those styles */ }content...You can of course replace the span with whatever element is appropriatefor your needs.
--Lachlan Hunthttp://lachy.id.au/***List Guidelines: 
http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: 
[EMAIL PROTECTED]***

***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: [EMAIL PROTECTED]***

Re: [WSG] Article: creating drop cap on the fly

[Christian Heilmann]

>I'd appreciate any comment that would help me improve this article:
>http://www.tjkdesign.com/articles/the_perfect_image_replacement_technique.asp
and
>http://www.tjkdesign.com/articles/the_perfect_drop_cap.asp
Thierry,



The most obvious disadvantage of using JavaScript to modify markup is
the inevitable delay: scripts of this nature wait till download is
complete before manipulating the DOM.  The page renders with plain
text and then morphs it into images, creating at minimum a flicker of
un-imaged content for small pages and a more jarring transition for
larger pages and/or slower connections.  It's unsightly.


True, but you can counteract this with newer techniques like
onAvailable instead of onload. I am not a fan of site cosmetics
either, but I'd rather not have to download images for each header if
my browser doesn't support them anyway.

This is more of a philosophical discussion whether any image
replacement is worth the hassle, not the fault of JavaScript.

http://dean.edwards.name/weblog/2005/09/busted/

--
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Article: creating drop cap on the fly

[Nick Fitzsimons]

On 6 Oct 2006, at 10:19, Paul Novitski wrote:

> At 10/4/2006 08:49 AM, Thierry Koblentz wrote:
>> I'd appreciate any comment that would help me improve this article:
>> http://www.tjkdesign.com/articles/the_perfect_image_replacement_technique.asp
>> and
>> http://www.tjkdesign.com/articles/the_perfect_drop_cap.asp

> But why not simply download the desired markup in the first place?  The
more work is done > server-side, the less relevant the question of
whether the user has access to JavaScript.

Paul: I think you're missing the point of image replacement techniques.
The idea is that the text, without images, _is_ the desired markup.
JavaScript is then used to enhance it visually for those user agents
capable of supporting such techniques, but the original markup is in
principle more easily accessed by those using non-visual user agents, or
who choose not to allow images to be downloaded.

Producing the image-laden markup server-side would defeat the entire
purpose, as well as potentially reducing the accessibility of the page.

Regards,

Nick.
-- 
Nick Fitzsimons
http://www.nickfitz.co.uk/




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Article: creating drop cap on the fly

[Paul Novitski]

At 10/4/2006 08:49 AM, Thierry Koblentz wrote:

I'd appreciate any comment that would help me improve this article:
http://www.tjkdesign.com/articles/the_perfect_image_replacement_technique.asp

and

http://www.tjkdesign.com/articles/the_perfect_drop_cap.asp



Thierry,

While of course I agree with the intentions and results of these 
image-replacement techniques, I disagree with one important aspect of 
their implementation: the use of JavaScript.  Using a client-side 
script to modify downloaded HTML is like editing a newspaper after 
the edition has hit the stands.  You have to send a gofer home with 
each copy of the paper and, painstakingly, with scissors and glue and 
while the erstwhile reader drums fingers, make the changes that 
should have been made before the paper ever went to print.


I assert that any Javascript routine that affects markup before the 
user has a chance to hover or click can and should be performed server-side.


Don't get me wrong, I love using JavaScript to enhance the user's 
experience on a page in response to their actions in real time.  But 
I prefer using server-side scripting (I am PHP's love-slave) to 
manipulate the fundamental markup.


The most obvious disadvantage of using JavaScript to modify markup is 
the inevitable delay: scripts of this nature wait till download is 
complete before manipulating the DOM.  The page renders with plain 
text and then morphs it into images, creating at minimum a flicker of 
un-imaged content for small pages and a more jarring transition for 
larger pages and/or slower connections.  It's unsightly.


Not to mention, JavaScript-dependent solutions depend, duh, on 
client-side scripting being enabled.  The conscientious developer 
must plan for a scriptless fallback (which you have done 
astutely).  But why not simply download the desired markup in the 
first place?  The more work is done server-side, the less relevant 
the question of whether the user has access to JavaScript.


I realize that JavaScript solutions like this can be handy when one 
doesn't have control over the markup and has to deal with legacy 
HTML, but how common are those nightmares really?  Most web designers 
have easy access to server-side scripting through either learning or 
networking.  And of course if you're replacing text heads with images 
then it's almost guaranteed that you can manipulate the markup enough 
to insert the necessary class and id triggers.  You've got the means 
and the opportunity; all you need now is the motivation.


If you groan at the thought of having to modify existing server-side 
scripts with markup changes, think about PHP's ability to output 
markup to a buffer and then manipulate it DOMwise before releasing it 
to the client.  That means that with tweaks at beginning and end, 
most any PHP script can be geared to buffer output to which we can 
attach a chain of markup manipulation routines as modularly and 
dynamically as you could want.  And of course if you're already 
crafting your own PHP page-generation, buffering output or tweaking 
markup on the fly is easy.


It's not like I'm asking you to defect.  Keep using JavaScript for 
interdependent lists, drag-&-drop, and other cool dynamics that 
today's HTML can't provide by itself.  But come over to the dark side 
for the behind-the-scenes schemes.


There's little excuse: having a common parent in C, JavaScript and 
PHP are syntactical siblings.  Making the transition a natural.  And 
PHP is so rich compared to JavaScript, it's like rising from a 
cramped coffin and flying off into the night sky (don't ask me how I 
know that).


Warm regards,

Paul 




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Dealing with IE and tables in CSS

[Vaska]

Yes...I took it down.

Solved it by avoiding table use completely (even though I'm  
technically using tabular data).


v


On 06 Oct 2006, at 08:25, Kepler Gelotte wrote:

All I see is a aragraph inside the  in the above example  
and the

text color is the same as the background. Am I missing something here?

Regards,
Kepler



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***