mirror of
https://expo.survex.com/repositories/expoweb/.git/
synced 2025-12-08 23:04:35 +00:00
old menus being deleted - online edit of handbook/troggle/menudesign.html - on dev machine 'SnowWhite'
This commit is contained in:
@@ -1,280 +1,281 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<title>CUCC Expedition Handbook: Website menu design options</title>
|
<title>CUCC Expedition Handbook: Website menu design options</title>
|
||||||
<link rel="stylesheet" type="text/css" href="/css/main2.css" />
|
<link rel="stylesheet" type="text/css" href="/css/main2.css" />
|
||||||
</head>
|
</head>
|
||||||
<body><style>body { background: #fff url(/images/style/bg-system.png) repeat-x 0 0 }</style>
|
<body>
|
||||||
<h2 id="tophead">CUCC Expedition Handbook - Website menu design options</h2>
|
<style>body { background: #fff url(/images/style/bg-system.png) repeat-x 0 0 }</style>
|
||||||
|
<h2 id="tophead">CUCC Expedition Handbook - Website menu design options</h2>
|
||||||
<h1>What, How and Why : New menus</h1>
|
|
||||||
|
<h1>What, How and Why : New menus</h1>
|
||||||
<ul>
|
|
||||||
<li><a href="#why">Why</a>
|
<ul>
|
||||||
<li><a href="#whatold">What we have now (appendix)</a>
|
<li><a href="#why">Why</a>
|
||||||
<li><a href="#maint">Maintenance constraints</a>
|
<li><a href="#whatold">What we have now (appendix)</a>
|
||||||
<li><a href="#user">User mental model constraints</a>
|
<li><a href="#maint">Maintenance constraints</a>
|
||||||
<li><a href="#prop1">Proposal #1</a>
|
<li><a href="#user">User mental model constraints</a>
|
||||||
<li><a href="#prop2">Proposal #2</a>
|
<li><a href="#prop1">Proposal #1</a>
|
||||||
<li><a href="#offline">Offline constraints (appendix)</a>
|
<li><a href="#prop2">Proposal #2</a>
|
||||||
</ul>
|
<li><a href="#offline">Offline constraints (appendix)</a>
|
||||||
|
</ul>
|
||||||
<h2 id="why">Menus: Why we need a change now</h2>
|
|
||||||
<h4>Phones</h4>
|
<h2 id="why">Menus: Why we need a change now</h2>
|
||||||
|
<h4>Phones</h4>
|
||||||
<p>The <a href="#whatold">current system</a> makes it very difficult to design menus that work on phone screens.
|
|
||||||
Phones are now the primary access method and the current menus actively get in the way rather than provide useful function.
|
<p>The <a href="#whatold">current system</a> makes it very difficult to design menus that work on phone screens.
|
||||||
They have to be fixed.
|
Phones are now the primary access method and the current menus actively get in the way rather than provide useful function.
|
||||||
|
They have to be fixed.
|
||||||
<h4>Higher level, lower-level menus and context</h4>
|
|
||||||
<p>
|
<h4>Higher level, lower-level menus and context</h4>
|
||||||
Secondly, we observe that many users never look at the menus. From using other websites they are used to seeing the important links in the text of the page
|
<p>
|
||||||
they are reading. This is particularly true for pages documenting a
|
Secondly, we observe that many users never look at the menus. From using other websites they are used to seeing the important links in the text of the page
|
||||||
sequence of operations such as the <em>sketch-wallet-survex-drawings</em> sequence. This is also how well-designed websites work these days: lots of white
|
they are reading. This is particularly true for pages documenting a
|
||||||
space and any necessary navigation clearly <em>in</em> the page.
|
sequence of operations such as the <em>sketch-wallet-survex-drawings</em> sequence. This is also how well-designed websites work these days: lots of white
|
||||||
<p>
|
space and any necessary navigation clearly <em>in</em> the page.
|
||||||
An excellent guide is the
|
<p>
|
||||||
<a href="https://www.gov.uk/guidance/government-design-principles">gov.uk design principles</a>
|
An excellent guide is the
|
||||||
web pages which practice what they preach. They have a "Related Content" menu to one side,
|
<a href="https://www.gov.uk/guidance/government-design-principles">gov.uk design principles</a>
|
||||||
breadcrumbs showing the page context, more remote organisation menu along the top of the page and two
|
web pages which practice what they preach. They have a "Related Content" menu to one side,
|
||||||
or three fine-print menus at the bottom of the page for potentially relevant standard stuff.
|
breadcrumbs showing the page context, more remote organisation menu along the top of the page and two
|
||||||
|
or three fine-print menus at the bottom of the page for potentially relevant standard stuff.
|
||||||
<p>Users need "situational awareness" in that they like to know "where they are" in the system. This is not the same thing as a menu list of links to "places you might like to go to". But these two different things are both called "navigation". The gov.uk design guide separates these two things and we should too.
|
|
||||||
|
<p>Users need "situational awareness" in that they like to know "where they are" in the system. This is not the same thing as a menu list of links to "places you might like to go to". But these two different things are both called "navigation". The gov.uk design guide separates these two things and we should too.
|
||||||
<p>Another reason that users don't use the menus is inconsistency. This is partly because the menus don't
|
|
||||||
match the <a href="#user">mental model they have</a> of how the system is put together and partly
|
<p>Another reason that users don't use the menus is inconsistency. This is partly because the menus don't
|
||||||
because <a href="#maint">maintenance difficulties</a> have created
|
match the <a href="#user">mental model they have</a> of how the system is put together and partly
|
||||||
an inconsistent system.
|
because <a href="#maint">maintenance difficulties</a> have created
|
||||||
<p>The menu system we created a decade ago was leading-edge in its time but user expectations have moved in a different direction.
|
an inconsistent system.
|
||||||
<br /><em>[This document originally written 19 February 2020, updated 2 April 2020]</em>
|
<p>The menu system we created a decade ago was leading-edge in its time but user expectations have moved in a different direction.
|
||||||
|
<br /><em>[This document originally written 19 February 2020, updated 2 April 2020]</em>
|
||||||
<h2 id="maint">Menus: Maintenance constraints</h2>
|
|
||||||
<p>
|
<h2 id="maint">Menus: Maintenance constraints</h2>
|
||||||
Experience over the past 10 years shows that having menus embedded in each page (see <a href="#whatold">What we have now</a>) is
|
<p>
|
||||||
unworkable long-term.
|
Experience over the past 10 years shows that having menus embedded in each page (see <a href="#whatold">What we have now</a>) is
|
||||||
<p>
|
unworkable long-term.
|
||||||
People create new pages typically by editing a copy of the last page they edited.
|
<p>
|
||||||
This might have been from an entirely different part of the system.
|
People create new pages typically by editing a copy of the last page they edited.
|
||||||
So we end up with "survey documentation" menus on a page which is in the middle of a "basecamp operations" set of pages.
|
This might have been from an entirely different part of the system.
|
||||||
We cannot control the behaviour
|
So we end up with "survey documentation" menus on a page which is in the middle of a "basecamp operations" set of pages.
|
||||||
of page editors and we are very grateful to them so we don't want to add to their workload or make
|
We cannot control the behaviour
|
||||||
things messy or difficult.
|
of page editors and we are very grateful to them so we don't want to add to their workload or make
|
||||||
<p>See the Proposals sections below for how we might make this easier.
|
things messy or difficult.
|
||||||
<p>A maintenance constraint is that we should have <em>a small number</em> of different menus.
|
<p>See the Proposals sections below for how we might make this easier.
|
||||||
|
<p>A maintenance constraint is that we should have <em>a small number</em> of different menus.
|
||||||
<h2 id="user">Menus: User mental model constraints</h2>
|
|
||||||
<p>This is where we have a real problem. Even nerds editing the system have different ideas
|
<h2 id="user">Menus: User mental model constraints</h2>
|
||||||
of how they visualise it.
|
<p>This is where we have a real problem. Even nerds editing the system have different ideas
|
||||||
<p>Most users have no picture at all of the distinctions between "the handbook",
|
of how they visualise it.
|
||||||
the "local area", the "cave survey data", the "software maintainers guide" parts.
|
<p>Most users have no picture at all of the distinctions between "the handbook",
|
||||||
Some people only interact with only one part of the system and are entirely
|
the "local area", the "cave survey data", the "software maintainers guide" parts.
|
||||||
unaware of the rest of the system.
|
Some people only interact with only one part of the system and are entirely
|
||||||
<p>Some pages which are definitely in the mental "how to do expo" category are not just hand-edited handbook webpages,
|
unaware of the rest of the system.
|
||||||
for example some prospecting guides are generated from cave data.
|
<p>Some pages which are definitely in the mental "how to do expo" category are not just hand-edited handbook webpages,
|
||||||
|
for example some prospecting guides are generated from cave data.
|
||||||
<p>Some pages have to be updated very differently fom others. The "cave descriptions" are particularly difficult for
|
|
||||||
someone used only to interacting with an HTML editor or a wiki. But for most users this distinction is invisible.
|
<p>Some pages have to be updated very differently fom others. The "cave descriptions" are particularly difficult for
|
||||||
|
someone used only to interacting with an HTML editor or a wiki. But for most users this distinction is invisible.
|
||||||
<p>The current set of menus suffer greatly from "bleed through" in that they mimic the hidden internal structure
|
|
||||||
of the system rather
|
<p>The current set of menus suffer greatly from "bleed through" in that they mimic the hidden internal structure
|
||||||
than (as they should) the user mental model of how users want to interact with it.
|
of the system rather
|
||||||
|
than (as they should) the user mental model of how users want to interact with it.
|
||||||
<p>A user mental model constraint is that menus should be predictable,
|
|
||||||
so we should have <em>a small number</em> of different menus.
|
<p>A user mental model constraint is that menus should be predictable,
|
||||||
|
so we should have <em>a small number</em> of different menus.
|
||||||
|
|
||||||
<h2 id="prop1">Menus: Proposal #1 - One Single Menu</h2>
|
|
||||||
<h4>Architecture</h4>
|
<h2 id="prop1">Menus: Proposal #1 - One Single Menu</h2>
|
||||||
<ul>
|
<h4>Architecture</h4>
|
||||||
<li>One standard menu used on every single page.
|
<ul>
|
||||||
<li>Generated dynamically by troggle.
|
<li>One standard menu used on every single page.
|
||||||
</ul>
|
<li>Generated dynamically by troggle.
|
||||||
<p>This will need quite a bit of thought and discussion as to what should be in the menu.
|
</ul>
|
||||||
We should test this with a variety of real users, or roll it out and be very responsive to change requests.
|
<p>This will need quite a bit of thought and discussion as to what should be in the menu.
|
||||||
|
We should test this with a variety of real users, or roll it out and be very responsive to change requests.
|
||||||
<h4>Implementation</h4>
|
|
||||||
<ul>
|
<h4>Implementation</h4>
|
||||||
<li>Entirely done in CSS as currently, and
|
<ul>
|
||||||
<li>inserted by troggle either just before the final
|
<li>Entirely done in CSS as currently, and
|
||||||
<span style="font-family:monospace; font-size: medium; background-color: lightgray"></body></span>
|
<li>inserted by troggle either just before the final
|
||||||
tag or at the beginning immediately after the initial
|
<span style="font-family:monospace; font-size: medium; background-color: lightgray"></body></span>
|
||||||
<span style="font-family:monospace; font-size: medium; background-color: lightgray"><body></span>
|
tag or at the beginning immediately after the initial
|
||||||
tag.
|
<span style="font-family:monospace; font-size: medium; background-color: lightgray"><body></span>
|
||||||
<li>A bit of tricky awk required to remove all the tags with
|
tag.
|
||||||
<span style="font-family:monospace; font-size: medium; background-color: lightgray">id="links"</span>
|
<li>A bit of tricky awk required to remove all the tags with
|
||||||
attributes. But just an evening's work.
|
<span style="font-family:monospace; font-size: medium; background-color: lightgray">id="links"</span>
|
||||||
</ul>
|
attributes. But just an evening's work.
|
||||||
|
</ul>
|
||||||
<h4>Advantages</h4>
|
|
||||||
<ul>
|
<h4>Advantages</h4>
|
||||||
<li>Excellent predictability for users
|
<ul>
|
||||||
<li>Simple to implement: minimal changes to the existing system.
|
<li>Excellent predictability for users
|
||||||
<li>No effort whatsoever on page editors and content typers
|
<li>Simple to implement: minimal changes to the existing system.
|
||||||
<li>No conflicting menus from different sources appearing on the same page
|
<li>No effort whatsoever on page editors and content typers
|
||||||
<li>"Edit this page" can appear or not depending on user authorisation or (for generated pages) entirely absent.
|
<li>No conflicting menus from different sources appearing on the same page
|
||||||
<li>Universal single update: change once changes menus for whole system
|
<li>"Edit this page" can appear or not depending on user authorisation or (for generated pages) entirely absent.
|
||||||
</ul>
|
<li>Universal single update: change once changes menus for whole system
|
||||||
|
</ul>
|
||||||
<h4>Disadvantages</h4>
|
|
||||||
<ul>
|
<h4>Disadvantages</h4>
|
||||||
<li>No menus offline
|
<ul>
|
||||||
<li>No fine-grained menu when in the middle of a complex part of the system
|
<li>No menus offline
|
||||||
</ul>
|
<li>No fine-grained menu when in the middle of a complex part of the system
|
||||||
|
</ul>
|
||||||
|
|
||||||
<h2 id="prop2">Menus: Proposal #2 - Different menus per "sector"</h2>
|
|
||||||
<h4>Architecture</h4>
|
<h2 id="prop2">Menus: Proposal #2 - Different menus per "sector"</h2>
|
||||||
<ul>
|
<h4>Architecture</h4>
|
||||||
<li>Every page in the system is identified (how?) as being "in" one of half a dozen "sectors", e.g.
|
<ul>
|
||||||
handbook, handbook-emergency, final cave data, survey procedures, software documentation, software maintenance etc.
|
<li>Every page in the system is identified (how?) as being "in" one of half a dozen "sectors", e.g.
|
||||||
<li>troggle inserts the menu dynamically depending on the page "sector" id.
|
handbook, handbook-emergency, final cave data, survey procedures, software documentation, software maintenance etc.
|
||||||
</ul>
|
<li>troggle inserts the menu dynamically depending on the page "sector" id.
|
||||||
|
</ul>
|
||||||
<h4>Implementation</h4>
|
|
||||||
<ul>
|
<h4>Implementation</h4>
|
||||||
<li>All programmed within troggle
|
<ul>
|
||||||
<li>page editors will need to insert an identifying tag, OR
|
<li>All programmed within troggle
|
||||||
<li>we restructure the folders completely and have troggle use the folder structure to decide which "sector" is which
|
<li>page editors will need to insert an identifying tag, OR
|
||||||
</ul>
|
<li>we restructure the folders completely and have troggle use the folder structure to decide which "sector" is which
|
||||||
|
</ul>
|
||||||
<h4>Advantages</h4>
|
|
||||||
<ul>
|
<h4>Advantages</h4>
|
||||||
<li>Fine-grained menus potentially more useful (if users use them)
|
<ul>
|
||||||
</ul>
|
<li>Fine-grained menus potentially more useful (if users use them)
|
||||||
|
</ul>
|
||||||
<h4>Disadvantages</h4>
|
|
||||||
<ul>
|
<h4>Disadvantages</h4>
|
||||||
<li>Will need visible flagging to users which "sector" they are in,
|
<ul>
|
||||||
otherwise the different menus appearing may disorient them
|
<li>Will need visible flagging to users which "sector" they are in,
|
||||||
<li>If implemented by folder restructuring: all links in to the website, e.g. in historic emails, all the Slack posts, all the UKcaving blog posts etc. etc.
|
otherwise the different menus appearing may disorient them
|
||||||
will <em>break</em> unless we create a large redirection list in the apache configuration files.
|
<li>If implemented by folder restructuring: all links in to the website, e.g. in historic emails, all the Slack posts, all the UKcaving blog posts etc. etc.
|
||||||
<li>If implemented by manual tag insertion in every page: page editors will get it wrong sometimes (but each fix is easy)
|
will <em>break</em> unless we create a large redirection list in the apache configuration files.
|
||||||
</ul>
|
<li>If implemented by manual tag insertion in every page: page editors will get it wrong sometimes (but each fix is easy)
|
||||||
|
</ul>
|
||||||
<h2 id="prop2">Menus: Proposal #3</h2>
|
|
||||||
|
<h2 id="prop2">Menus: Proposal #3</h2>
|
||||||
<p>Do Proposal #1 now.
|
|
||||||
<p>Do Proposal #2 later - if it turns out to be needed. (Probably by tag method not folder method.)
|
<p>Do Proposal #1 now.
|
||||||
<p>
|
<p>Do Proposal #2 later - if it turns out to be needed. (Probably by tag method not folder method.)
|
||||||
<p>
|
<p>
|
||||||
<h2 id="whatold">Appendix - Menus: What we have now</h2>
|
<p>
|
||||||
|
<h2 id="whatold">Appendix - Menus: What we have now</h2>
|
||||||
<p>Today (February 2020) we have two separate menu systems which look identical:
|
|
||||||
<ol type=A >
|
<p>Today (February 2020) we have two separate menu systems which look identical:
|
||||||
<li>Menu links as HTML text on individual webposite pages, either hand-edited (handbook) or
|
<ol type=A >
|
||||||
generated as HTML pages by occasional offline scripts (such as the deep/long caves page) , or
|
<li>Menu links as HTML text on individual webposite pages, either hand-edited (handbook) or
|
||||||
<li>Auto-created menus constructed <em>on the fly</em> by troggle at the moment that a page is served by the webserver.
|
generated as HTML pages by occasional offline scripts (such as the deep/long caves page) , or
|
||||||
This happens for every single page of every type.
|
<li>Auto-created menus constructed <em>on the fly</em> by troggle at the moment that a page is served by the webserver.
|
||||||
</ol>
|
This happens for every single page of every type.
|
||||||
|
</ol>
|
||||||
<h4>Type A - static menus</h4>
|
|
||||||
<p>The first type, the "static"menus, are created by HTML like this, with a
|
<h4>Type A - static menus</h4>
|
||||||
<span style="font-family:monospace; font-size: medium; background-color: lightgray">id="links"</span>
|
<p>[These are being deleted whenever we come across them, update 2025]
|
||||||
tag attribute which creates the styling:
|
<p>The first type, the "static"menus, are created by HTML like this, with a
|
||||||
<pre><code><!-- LINKS -->
|
<span style="font-family:monospace; font-size: medium; background-color: lightgray">id="links"</span>
|
||||||
<div id="menu">
|
tag attribute which creates the styling:
|
||||||
<ul id="links">
|
<pre><code><!-- LINKS -->
|
||||||
<a href="index.htm">Handbook</a>
|
<div id="menu">
|
||||||
<a href="survey/index.htm">Surveying</a>
|
<ul id="links">
|
||||||
<a href="look4.htm">Prospecting</a>
|
<a href="index.htm">Handbook</a>
|
||||||
<a href="rescue.htm">Rescue</a>
|
<a href="survey/index.htm">Surveying</a>
|
||||||
</ul>
|
<a href="look4.htm">Prospecting</a>
|
||||||
</div></code></pre>
|
<a href="rescue.htm">Rescue</a>
|
||||||
<p>This text is conventionally at the bottom of each HTML file. (It does not have to be at the bottom,
|
</ul>
|
||||||
the CSS handles where on the page this appears visually, so this HTML fragment could be anywhere
|
</div></code></pre>
|
||||||
in the HTML file.)
|
<p>This text is conventionally at the bottom of each HTML file. (It does not have to be at the bottom,
|
||||||
<p>The visual rendering of the menus is controlled by lines 120-215 in <a href="/css/main2.css">main2.css</a> -
|
the CSS handles where on the page this appears visually, so this HTML fragment could be anywhere
|
||||||
thanks to a succession of clever and inventive people.
|
in the HTML file.)
|
||||||
<p><p>
|
<p>The visual rendering of the menus is controlled by lines 120-215 in <a href="/css/main2.css">main2.css</a> -
|
||||||
Here is an example of a more extensive menu. Note that changes to CSS over the years now mean that this
|
thanks to a succession of clever and inventive people.
|
||||||
overflows the menu box because the annotations are too long for the box width:
|
<p><p>
|
||||||
<pre><code><!-- LINKS -->
|
Here is an example of a more extensive menu. Note that changes to CSS over the years now mean that this
|
||||||
<div id="menu">
|
overflows the menu box because the annotations are too long for the box width:
|
||||||
<ul id="links">
|
<pre><code><!-- LINKS -->
|
||||||
<li><a href="index.htm">Expedition Handbook</a> - Intro
|
<div id="menu">
|
||||||
<ul>
|
<ul id="links">
|
||||||
<li><a href="survey/index.htm">Surveying guide</a> - Overview</li>
|
<li><a href="index.htm">Expedition Handbook</a> - Intro
|
||||||
|
<ul>
|
||||||
<li><a href="look4.htm">Prospecting guide</a> – Overview
|
<li><a href="survey/index.htm">Surveying guide</a> - Overview</li>
|
||||||
<li><a href="rescue.htm">Rescue guide</a></li>
|
|
||||||
<li><a href="rig/rigit.html">Rigging guide</a></li>
|
<li><a href="look4.htm">Prospecting guide</a> – Overview
|
||||||
<li><a href="photo.htm">Photography guide</a></li>
|
<li><a href="rescue.htm">Rescue guide</a></li>
|
||||||
|
<li><a href="rig/rigit.html">Rigging guide</a></li>
|
||||||
</ul></li>
|
<li><a href="photo.htm">Photography guide</a></li>
|
||||||
<li><a href="../infodx.htm">Index to info/topics pages</a></li>
|
|
||||||
<li><a href="../indxal.htm">Full Index to area 1623</a>
|
</ul></li>
|
||||||
<ul>
|
<li><a href="../infodx.htm">Index to info/topics pages</a></li>
|
||||||
<li><a href="../areas.htm">Area/subarea descriptions</a></li>
|
<li><a href="../indxal.htm">Full Index to area 1623</a>
|
||||||
</ul></li>
|
<ul>
|
||||||
<li><a href="../index.htm">Back to Expedition Intro page</a></li>
|
<li><a href="../areas.htm">Area/subarea descriptions</a></li>
|
||||||
<li><a href="../../index.htm">Back to CUCC Home page</a></li>
|
</ul></li>
|
||||||
|
<li><a href="../index.htm">Back to Expedition Intro page</a></li>
|
||||||
</ul>
|
<li><a href="../../index.htm">Back to CUCC Home page</a></li>
|
||||||
</div></code></pre>
|
|
||||||
|
</ul>
|
||||||
<p>There are <span style="text-decoration: line-through wavy red;">a few</span> 546 pages (out of hand-edited 1,022 HTML pages) where the enclosing
|
</div></code></pre>
|
||||||
<span style="font-family:monospace; font-size: medium; background-color: lightgray">DIV</span>
|
|
||||||
tag is omitted. In these cases troggle inserts its own menu <em>in addition to</em> the static menu. The result is a confusion of two menus. These pages are in currently being identified and corrected.
|
<p>There are <span style="text-decoration: line-through wavy red;">a few</span> 546 pages (out of hand-edited 1,022 HTML pages) where the enclosing
|
||||||
|
<span style="font-family:monospace; font-size: medium; background-color: lightgray">DIV</span>
|
||||||
<h4>Type B - dynamic (troggle) menus</h4>
|
tag is omitted. In these cases troggle inserts its own menu <em>in addition to</em> the static menu. The result is a confusion of two menus. These pages are in currently being identified and corrected.
|
||||||
<p>This menu is a fragment of HTML inserted by troggle on the fly as the page is served to the user.
|
|
||||||
It is inserted immediately before the closing
|
<h4>Type B - dynamic (troggle) menus</h4>
|
||||||
<span style="font-family:monospace; font-size: medium; background-color: lightgray"></body></span>
|
<p>This menu is a fragment of HTML inserted by troggle on the fly as the page is served to the user.
|
||||||
tag.
|
It is inserted immediately before the closing
|
||||||
It has one thing which cannot be done by static menus: it has the <font color=red>"Edit this page"</font> link
|
<span style="font-family:monospace; font-size: medium; background-color: lightgray"></body></span>
|
||||||
at the bottom which is the troggle (Django) wiki-style editing system:
|
tag.
|
||||||
|
It has one thing which cannot be done by static menus: it has the <font color=red>"Edit this page"</font> link
|
||||||
<pre><code><ul id="links">
|
at the bottom which is the troggle (Django) wiki-style editing system:
|
||||||
<li><a href="/index.htm">Home</a></li>
|
|
||||||
<li><a href="/infodx.htm">Main Index</a></li>
|
<pre><code><ul id="links">
|
||||||
<li><a href="/troggle">Troggle</a></li>
|
<li><a href="/index.htm">Home</a></li>
|
||||||
<li><a href="/areas.htm">Areas</a></li>
|
<li><a href="/infodx.htm">Main Index</a></li>
|
||||||
<li><a href="/indxal.htm">Caves</a></li>
|
<li><a href="/troggle">Troggle</a></li>
|
||||||
<li><a href="/handbook/index.htm">Handbook</a></li>
|
<li><a href="/areas.htm">Areas</a></li>
|
||||||
<li><a href="/pubs.htm">Reports</a></li>
|
<li><a href="/indxal.htm">Caves</a></li>
|
||||||
<li><a href="/handbook/<font color=red>menudesign.html_edit</font>" <font color=red>class="editlink"</font>><strong><font color=red>Edit this page</font></strong></a></li>
|
<li><a href="/handbook/index.htm">Handbook</a></li>
|
||||||
</ul>
|
<li><a href="/pubs.htm">Reports</a></li>
|
||||||
</code></pre>
|
<li><a href="/handbook/<font color=red>menudesign.html_edit</font>" <font color=red>class="editlink"</font>><strong><font color=red>Edit this page</font></strong></a></li>
|
||||||
<p>Note that the last line is different for every page and autogenerated.
|
</ul>
|
||||||
<p>
|
</code></pre>
|
||||||
The dynamic menu is rendered by exactly the same CSS
|
<p>Note that the last line is different for every page and autogenerated.
|
||||||
<span style="font-family:monospace; font-size: medium; background-color: lightgray">id="links"</span>
|
<p>
|
||||||
as the static menu.
|
The dynamic menu is rendered by exactly the same CSS
|
||||||
|
<span style="font-family:monospace; font-size: medium; background-color: lightgray">id="links"</span>
|
||||||
<p>Note that there is no
|
as the static menu.
|
||||||
<span style="font-family:monospace; font-size: medium; background-color: lightgray"><div id="menu"></span> enclosing
|
|
||||||
<span style="font-family:monospace; font-size: medium; background-color: lightgray">div</span>
|
<p>Note that there is no
|
||||||
tag. The
|
<span style="font-family:monospace; font-size: medium; background-color: lightgray"><div id="menu"></span> enclosing
|
||||||
<span style="font-family:monospace; font-size: medium; background-color: lightgray">div</span>
|
<span style="font-family:monospace; font-size: medium; background-color: lightgray">div</span>
|
||||||
tag is only there to tell troggle that there is a static menu and so it shouldn't provide one.
|
tag. The
|
||||||
|
<span style="font-family:monospace; font-size: medium; background-color: lightgray">div</span>
|
||||||
<p>For the past 3 years the static menus have been mostly removed from edited pages as the dynamic menu did the job, and
|
tag is only there to tell troggle that there is a static menu and so it shouldn't provide one.
|
||||||
often both would appear which was ugly. This page has both menus:
|
|
||||||
<!-- link to server as this is an Apache CGI script which does nto exist ont he dev machine typically -->
|
<p>For the past 3 years the static menus have been mostly removed from edited pages as the dynamic menu did the job, and
|
||||||
<a href="http://expo.survex.com/dplong.htm">Lengths and depths of caves in the 1623 area</a>.
|
often both would appear which was ugly. This page has both menus:
|
||||||
|
<!-- link to server as this is an Apache CGI script which does nto exist ont he dev machine typically -->
|
||||||
<h2 id="offline">Appendix - Menus: Offline constraint</h2>
|
<a href="http://expo.survex.com/dplong.htm">Lengths and depths of caves in the 1623 area</a>.
|
||||||
<p>It is handy if a completely offline copy of the website
|
|
||||||
- just the HTML files and CSS - still has a useable (if cut-down) menu system. (This used to be vital when the potato hut
|
<h2 id="offline">Appendix - Menus: Offline constraint</h2>
|
||||||
server troggle stopped but the server could still provide HTML files. Not any more.)
|
<p>It is handy if a completely offline copy of the website
|
||||||
But this is increasingly unnecessary for most of the people using it.
|
- just the HTML files and CSS - still has a useable (if cut-down) menu system. (This used to be vital when the potato hut
|
||||||
<p>The most likely use-case would be someone on the plateau (or possibly underground)
|
server troggle stopped but the server could still provide HTML files. Not any more.)
|
||||||
needing to read the handbook pages on rescue or first-aid procedures using a locally-stored copy
|
But this is increasingly unnecessary for most of the people using it.
|
||||||
of the entire handbook. Most people won't have done in this in advance of the need or wouldn't know how
|
<p>The most likely use-case would be someone on the plateau (or possibly underground)
|
||||||
to do it anyway. If they can do this, they are not likely to be relying on the menu system to find what they want.
|
needing to read the handbook pages on rescue or first-aid procedures using a locally-stored copy
|
||||||
<p>Can anyone think of other cases where menus for offline use might be useful?
|
of the entire handbook. Most people won't have done in this in advance of the need or wouldn't know how
|
||||||
|
to do it anyway. If they can do this, they are not likely to be relying on the menu system to find what they want.
|
||||||
<h4>Files for download as an alternative</h4>
|
<p>Can anyone think of other cases where menus for offline use might be useful?
|
||||||
|
|
||||||
<p>We could meet this very specific requirement without messing with our menus. We could have a complete set of
|
<h4>Files for download as an alternative</h4>
|
||||||
downloadable documents (e.g. PDF) of prospecting guides and safety procedures - including topcamp and basecamp phone numbers -
|
|
||||||
which we encourage all expoers to download to their phone before they leave base-camp.
|
<p>We could meet this very specific requirement without messing with our menus. We could have a complete set of
|
||||||
We already have a number of these but some are in .odt format which is not phone-friendly. But that is another job to fix.
|
downloadable documents (e.g. PDF) of prospecting guides and safety procedures - including topcamp and basecamp phone numbers -
|
||||||
<hr />
|
which we encourage all expoers to download to their phone before they leave base-camp.
|
||||||
Return to: <a href="trogdesign.html">Troggle design and future implementations</a><br />
|
We already have a number of these but some are in .odt format which is not phone-friendly. But that is another job to fix.
|
||||||
Return to: <a href="trogintro.html">Troggle intro</a><br />
|
<hr />
|
||||||
Troggle index:
|
Return to: <a href="trogdesign.html">Troggle design and future implementations</a><br />
|
||||||
<a href="trogindex.html">Index of all troggle documents</a><br /><hr />
|
Return to: <a href="trogintro.html">Troggle intro</a><br />
|
||||||
</body>
|
Troggle index:
|
||||||
</html>
|
<a href="trogindex.html">Index of all troggle documents</a><br /><hr /></body>
|
||||||
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user