1011    RealmEleven  Information Magic

| Home | About us | Contact us | Site Map | Privacy | Security | Standards | Legal |

We don't meagrely exist: we excel...   

History of the Client Independent Web Menu

In the beginning...

                                      ...academics foretold a World Wide Web of interconnected pages where everyone was fluent in at least one human language and where there were no bad people. In theory, the internet was to be an international network of information powered by hyperlinks embedded in text and images. The text or link in which the hyperlink is embedded was supposed to say something about where it leads, and therefore if all went according to plan, any information could be found anywhere just by following the relevant links. Reality more often defies foresight, and in this case the world wide web quickly filled with generic hyperlinks such as "Click Here", which said nothing about their destination. Add to this the ravings of the insane, the deafening boasts of charlatans, and the technical jargon of a generation never actually taught their native human language; and what you have is not much different to today's world wide web. For this reason, the information highway anchored only in links quickly failed, and the search engine was developed to help bridge the chasm between theory and practice.

In theory, the search engine rendered human-accessible links between web pages obsolete. However, in practice search engines are not perfect either, and often fail to index key pages simply because incoming link density for those pages is below a certain threshold, or perhaps because the offending pages are on a site not sponsoring the search engine developers. As it turned out, many visitors like to browse, explore, and discover new things. This became known as web surfing, and makes site navigation crucial to page exposure. While site exposure may well depend on the search engine, exposure of certain key pages depends more so on the internal navigation system of the site. How quickly it can deliver a visitor the information of interest is of particular importance.

Enter the three click rule. A reincarnation of the three tier rule common to almost a century of human performance engineering, the three click rule suggests that three clicks or jumps from one page to another are about as many as one can expect from visitors looking for something specific. As information structures can be quite complex, and links can be missed, particularly in large amounts of text or where there are many other links; navigation panels soon appeared to address this problem. They did so by highlighting important links in one place, thereby allowing visitors to more easily find what they were looking for and offering a reminder other items they may have been curious about.

As web sites became larger, developers began to realise that simple single tier navigational panels would not be enough for the same reason that they are not enough for programs with complex functionality, such as word processors. Anticipating the rapid growth of sites on the internet, the W3C saw fit to include the DIR and MENU element in earlier versions of HTML . Both were block elements, that like ordered and unordered lists, were hierarchical in nature and scalable in structure. However, by applying CSS to these elements, they could be given special behaviours; for example as navigational features such as drop down or fly out menus rather than nested lists. However, thanks to certain persons harbouring the agenda to monopolise this kind of technology, these capabilities were either sabotaged, disabled, or the specifications simply ignored in user agents developed during the Browser Wars that ensued. By the time HTML 4 hit the drawing board, the DIR and MENU element had been out of use for so long that people had perhaps forgotten what they were for. As a possible consequence, DIR and MENU elements were dropped from HTML 4, only now being supported in the transitional variant.

At this time, Internet Explorer was still by far the dominant browser in spite of the compatibility and behaviour issues created during the Browser Wars. These issues translated into errors in the way Internet Explorer interpreted HTML and CSS that made the development of even simple features, such as fixed panels, far more difficult for Internet Explorer than for its competitors such as Netscape Navigator. However, the market share of Internet Explorer ensured that it's defects would do much to hold back the decelopment of new web technology, while the interaction between charlatanism and fallacious logic ensured that these issues were excluded from legal scrutiny. For the legacy left by older versions of Internet Explorer, we can all thank Microsoft's exceedingly gullible and naive opponents as much as we can thank the lumbering corporate giant. An interesting consequence of this legacy is the fact that it took six competent developers more than seven years to write the relevant 21 lines of core code for interoperable standards-compliant and scalable web menu behaviour. That's one line of core code per developer every two years!


2000: The First drop Down Web Menus: "Trust me! I won't hack your computer"

The very first drop down web menus weren't client independent, but relied heavily on JavaScript to function. For those of us experienced enough to lock our doors at night, JavaScript menus simply don't work; period. As long as technologies like this are enabled in the browser, your computer and everything you do on it (including typing in passwords to access internet banking) is an open book for anyone, anywhere in the world, who wants to know. For those of us not willing to hack into someone-else's computer to make site features work or who simply don't want to encourage visitors to leave doors unlocked without good reason, technologies such as JavaScript, VBScript, ActiveX, .NET, Flash, & Silverlight are simply not an option. For those living in the technological past, JavaScript produces menus that are incredibly slow and only work for inexperienced visitors. While many sites adopted these menus over time, on the advice of rather naive IT graduates, they nonetheless left a lot to be desired.


2001: Inigio Surguy & the world's first Client Independent Web Menus

Internet integrity and healthy curiosity ultimately led to the quest for client independent web menus. It all started when Inigio Surguy gleaned an interesting idea from Eric Meyer's "Pure CSS popups". Surguy sought to convert Meyer's popups into web menus using a system of nested DIV structures. However, only one browser worked substantially as documented at the time and as interoperability was achieved using client-side technologies such as JavaScript, the DIV menu very much depended on visitor trust.


2002: Eric Meyer & the world's first Standards-Compliant "Pure CSS" Web Menus

Originally working with Surguy's nested DIV elements, Meyer adopted the idea of using nested lists from Porter Glendinning, and incorporated this into the development of his "Pure CSS Menus". These systems were based on a CSS modified unordered list element, as the proper HTML elements had been deprecated and dropped in the strict sense. This necessitated setting up multiple classes for unordered list elements and their list item elements, which made this menu system capable of three tier functionality. However, the system was not scalable in a purely structural sense, requiring additional blocks of CSS to define new tier behaviours. Moreover, as a consequence of the Browser Wars or perhaps simply due to project management incompetance on the part of browser vendors, these menu systems only worked on about 1% of visitor's browsers at the time of development, and still less than 5% by the time other options had become available. This is in spite of being a correct and valid application of the HTML & CSS international standard. Due to their limited interoperability, these early list-based menus never achieved wide acceptance.


2003: The mysterious Venimus & the world's first Internet Explorer Compatible Web Menus

An otherwise anonymous Bulgarian going by the name of Venimus was one of the few individuals of the time who understood the importance of interoperability on the internet. In 2003, Venimus published the world's first ever web menu system to function correctly on the dominant browser; Internet Explorer. This menu system was based on table rows and cells to structure the menus and included some filtered code to allow a degree of interoperability with browsers based on Netscape. However, as these menus were rather limited, only having dual tier operation and being extraordinarily complex, a simpler approach was needed.


2004: Timothy Casey & the world's first Standards-Compliant AND Interoperable Web Menus

In late 2003, Timothy Casey picked up the table-based menus put forward by Venimus and extended the scope of interoperability while streamliing the code. By early 2004, Casey had corrected the HTML and CSS errors in the compatibility code and in doing so, combined for the first time the most important benefits of the Venimus and Meyer web menu systems; standards-compliance and interoperability. Casey, in optimising for expected menu behaviour and focussing on more flexible operation, went on to set the system to adjust menu width to match item width rather than "wasting" space in unnecessary word wraps and empty line space due to constant width menu heads on the menu bar. The world's first ever standards-compliant interoperable web menu system was soon deployed on the official FieldCraft website. Being described by many web developers as "kludge" due to the system's complexity, the method was never broadly adopted - in spite of the fact that it had been vastly simplified by the segregation of behavioural and style attributes in Casey's application of its centralised CSS system. Although, like its predecessor, this system was subject to a two tier limitation, there was a strong argument against assigning important pages beyond the third tier - with a two tier system considered ideal from a usability perspective in uncomplicated environments.


2005: FieldCraft & The World's First Standards-Compliant Web Menu Builder

By 2005, FieldCraft had released the world's first application to build interoperable and standards compliant web menus based on Casey's web menus. These menu systems were WAI AAA compliant being accessible to people with a range of diabilities. However, the FieldCraft menu system never found broad acceptance, once again due to the complexity of the code, the continuing two tier limitation, and a major GUI bug in Web Sergeant that rendered the program unusable by all perhaps, but its developers. By this time, the two tier limitation had proven constrictive to medium sized websites. As it turns out, the web is not an "uncomplicated" environment and so a third tier became necessary. Third tier GUI elements are quite common in medium complexity applications such as word processors and spreadsheet applications, and so their appearance on web pages is unlikely to present a substantial obstacle - especially considering that most of the time, the desired page is found directly through a search engine.


2006: Stu Nicholls & the world's first Interoperable List-based Web Menu

In the first quarter of 2006, Stu Nicholls of CSSPlay stormed the world with a useful hybrid of Meyer's list-based web menu and the Venimus table-based web menu. Ever since its inception, Meyer's list menu could not be coaxed into functioning correctly on Internet Explorer 6. However, by March 2006 Nicholls had published the fact that it was necessary to encase each menu in a modified table, row and cell element in order to invoke the necessary behaviour in Internet Explorer 6. Subsequent to his publication, client independent web menus began to accumulate successively broader aceptance for the first time in the history of the internet. This is possibly due to the simplicity of this menu system in both structure and styling. For the first time, there was a web menu system capable of extending beyond the second tier in Internet Explorer 6. However, the web menu system was not particularly scalable, even if it was developed in and for XHTML. The problem was that new CSS had to be added for each additional tier added to the menu system. Although the same was theoretically the case for the Venimus and Casey web menu systems, the Nicholls system was the first to be simple enough for development of these extra CSS tiers to prove practical and even viable.

In late 2006, Stu Nicholls developed a hybrid of unordered & definition list web menus observing that a block element hierarchy with more than one distinct type of list element offered opportunities to separate menu item types. This falls in line with the W3C NL element of XHTML 2, intended to offer a suitable structure for menus and other navigation systems. According to the idea, a LABEL element contains the title while LI elements contain the anchor and further NL elements, if submenus are present. Nicholls went on to emulate this system for HTML by using the DT element (in place of the LABEL element) to house the head or title item on the menu with the DD element (in place of the LI element) used to house all subsequent items. Nicholls further demonstrated that this system had a two tier limitation, and so the original unordered list and table hybrid developed by Nicholls was more widely adopted in spite of Nicholls insistance that the definition list would make a better housing for a web menu system (possibly due to the fact that this may reduce conflicts and overhead related to subclassing requirements). In any case, Nicholls work exposes a serious flaw in the XHTML 2 specification for the NL & LABEL element.


2007-2008: The Mysterious Lull in Web Menu Research

In the years 2007-2008, the client-independent web menu gained much broader acceptance thanks to the efforts of Stu Nicholls, and like minded individuals on the forefront of standards compliant web development. Nicholls at this stage had the best system, but deployment and scalability were not ideal, and as it turns out, the W3C (the relevant standards organisation) had no intention of reinstating the former DIR and MENU elements or correcting the limitations of the new NL element. Without the support of the standards body, research appeared to become focussed on other, more promising objectives.


2009: Timothy Casey & the world's first Pure Definition List Web Menus

While on a research sabbatical in 2009, Timothy Casey "discovered" Nicholls' work on unordered list menus. In mid 2009, wanting to avoid excessive subclassing and element use conflicts and oblivious to the intended structural applications of then proposed XHTML 2's NL element, Casey converted the three tiered unordered list web menu of Nicholls into a five tier definition list web menu. Casey had found that the originally intended elements had been deprecated, so was not averse to offending sensibilities on the part of those responsible. He chose the Definition List element because:

  1. It was the one hierarchical element that had the least use in practice
  2. It was the one hierarchical element with with absolutely no support from WYSIWYG HTML editors
  3. and so it was the one hierarchical element that should have been dropped long before the likes of the DIR and MENU elements.

Rather than taking the semantic approach of structuring the system by element name (definition title and definition description), as intended in the original specification, Casey used behaviour to dictate structure. Thus the new menu system was structured according to sub element capability. The DT element cannot house other block elements such as another DL element, whereas the DD element can house other block elements in addition to any inline content included. This addressed the necessarily different behaviour of items with no block content and items that contain block content (and so, for example, require additional styling features such as arrows to act as sub-menu indicators). Thus the multi-tiered definition list-based web menu was first prototyped on ISO:2009-June-27.

Casey went on to reverse default behaviours but not default styles as the styling was scalable but behaviour was not. This lead to the world's first ever scalable Definition List Menu (Dubbed XDLM via misuse of the word, "extensible" in place of the word, "scalable"). This system required no additional CSS to define the behaviour of additional menu tiers. The completed fully functioning system was uploaded to this site on ISO:2009-Jul-01. This solution to the problem of scalability in Definition List menus can be translated across to the NL, LABEL, and LI system proposed in XHTML 2, although not as envisioned by the W3C. However, it is unlikely that a sufficient market demographic will be using XHTML 2 compliant browsers for several years yet. By that time, it is likely that most user agents will be fully XML compliant (and thereby capable of rendering XML according to complaint custom DTDs - assuming that XML functionality does not depend on any security holes at either server of client.

The Future

Not all of the issues relating to web menus have been resolved. Behavioural issues that are yet to be resolved include the lack of fly-out reversal when the limits of the viewing area would otherwise be crossed. Semantic issues involve the use of more appropriate mark-up elements to embed menu systems. However, as of July 2009, these issues are well beyond browser and standards technology. In anticipation of the soon to be recommended XHTML 2 standard, Casey has published the semantic variant of his scalable definition web menu (See "The Secret of Divine Standardisation: How to build drop-down web menus in XHTML 2.")

Secure Home Page
FieldCraft .NET
About us
Contact us
Site Map
Why PayPal
Legal & Licensing
Speed Reading
Why speed read?
What is Stretch?
Using Stretch
How it works
IQ Testing
Why scientific?
What is IQ-Power?
Using IQ-Power
Simple nests
Local Context
Compound nests
Browser Security
Why secure IE?
What is Drawbridge?
Using Drawbridge
Prevent Spyware
Email Security
No more popups
Background control
Why Clear-It
What is Clear-It?
Using Clear-It
Burning CDs & DVDs
Why Blackjack Examiner
What is Blackjack Examiner?
Using Blackjack Examiner
House Rules
Player System
Basic Strategy
Card Counting
Postcode Surveys
What is APS?
Using APS
Regional analysis
Time Analysis
Web Menus
About these web menus
Why use web menus?
Easy to make
Using Web Sergeant
Low Maintenance
Robust & Interoperable
Meta tag optimisation
Trial Locking
Speed Reading
About us
Contact us
Site Map
Diminishing literacy
Specialist Literacy
False dilemmas
Sight Reading
"Photo Reading"
Impaired comprehension
Diminished pleasure
Set fixation
Regression a "bad habit"
Sub-vocalisation a "bad habit"
"Scientific" measurement
Web Design
About us
Contact us
Site Map
Download CV as PDF
Download CV as HTML
Download CV as RTF
Download CV as Word
eCommerce design
History of scripting
Multiple Browsers
Standards compliance
Compiance validation
Visitor disabilities
Accessibility for all
Navigation Systems
Branding & Composition
About me
Contact me
Site Map
Download CV as PDF
Download CV as HTML
Download CV as RTF
Download CV as Word
Common Queries
Age of the Earth
Extincion Causes
History of Air
Carbon Sequestration
Not So Apologetic
Expanding Earth
Climate Change
Forestry & Policy
Ozone Holes
Year 2000 Bug
Fallacy Survey
Plate Tectonics
Defamation & Intimidation
Materialistic Deceit
Hot Air
Earth Science
History of Climate
Artificial or Natural?
Heat Audit
Carbon Audit
Plants & CO2
Politics & Hoaxes
About me
Contact me
Site Map
Empathy Foremost
Reality of Being
Diversity of Souls
God or Goddess?
Messianic Cyclicity
Sacred literature
Socialised Empathy
socialised Belief
Dimensions & Logic
Burden of Proof
Nothing goes without Saying
Implicit to Explicit
Occam's Razor
Science Revisited
A short history of religion
A modern religion
12 Principles
12 Rationalisations
Material Focus
Underlying Flaws
Due Diligence
Proof of Equity
Denial of Diversity
Sabotaging Independent Investigation
Investigative Rigor
Quantum Psychology
Neural Networks
Endocrine Recursion
Committee Theory
Processing Modes
Survival Biases
Prosperity Biases
Frames of Reference
Emotional Calculus
Body Languages