Mobile Friendly Simply Stated

[yogi]

I found this article that explains why we have been doing what we have been doing to make our web site "mobile friendly." I think we know most of this already, but it's nice to have it all in one spot. Here are the pros and cons of being responsive to our viewers:

http://www.socialmediatoday.com/marketi ... endly-site

[Kellemora]

Hi Yogi
Interesting article.

Totally swamped at work today, it's 11am and I'm just now getting my 9:30 or 10am break. Haven't even had time to hit my own e-mails yet.

I popped in, hoping you may see this question before I get off work this afternoon.

Asking you to put on your thinking cap to see if this is doable or not.

On my existing index.html, I only have a simple header at the top, which is no problem.
But, I have a navigation box on the left with links to a dozen html pages, which I store in a folder named "indxpgs."
Currently, all twelve pages stored in the "indxpgs" folder, have the same coding to produce the header and navigation box. This means any change I make, must be made to index.html AND all twelve pages in the "indxpgs" folder.

In the past, when I converted from HTML4 to XHTML, I tried moving the header and nav box to the CSS, to prevent rewriting the nav box on each page. I never could get it to work.

Here is my idea, which sounds like it should work, as long as I use only ONE iframe on the index.html page. (I'm not the only one finding problems with trying to use more than one iframe on an html page.)

Does this sound like it will work to you?

Create a New index.html page with the current header and left navigation box, containing all the links to other pages. (Making it mobile friendly of course).
Then, in place of the CONTENT area on index.html to the right of the nav box, I make only one huge empty iframe.
I'll get back to the empty in a second.
When a visitor clicks on a link in the nav box, it will open the page called from the "indxpgs" folder and display it in the iframe. From these second tier pages, links will be provided to the tier three pages which contain the DATA for them to read.

My reason for using tier two pages containing links to the actual tier three pages containing the data, is because there is textual content which precedes what is on the pages in the "htmlpgs" folder.

Don't laugh, in early years I had FOUR TIERS a visitor had to weed through, hi hi... I had folders named "lnkstp," meaning 'link step' pages. Back in the days of BBS's (Bulletin Boards), during the transition from BBS to WWW, when you could both dial-up the BBS, or visit them through WWW, it was necessary so folks could find your new Internet pages. I was on the Galilei BBS. You may remember my old e-mail, which I only dropped a few years ago when the BBS finally closed down. classichauslimited @ bbs.galilei.com, everything I did was on the galilei bbs server.

When the BBS added WWW access to the BBS, we had to make no changes to our Content. Whether you connected to the BBS by telephone, or via the WWW, you got the Link to our public data. At that time it was all ms.doc or plain.txt pages. Their program automagically displayed both .doc and .txt pages to WWW visitors in an HTML window. AND, in so doing, created an html page for our .doc or .txt and stored it in an html folder on our bbs space.

As we redid our pages ourselves and made them into html pages, we removed the .doc and .txt pages from our root page, and the BBS provided an automatic redirect to our html folder.
When I moved south, I kept my BBS website pages up, but added a link on each page to the new page at Comcast. But for it to work, I had to use the exact same file name, and had to keep a duplicate page in my root directory on Comcast. Yes it was a royal mess. I had to keep a copy of the page in my root directory, and a duplicate page in a folder I named "lnkstp" to ensure visitors who visited direct by my new URL didn't get a 404 or 505 page error.

I'm getting boring talking about all of that, and I know your time is valuable. So let me get back to my original question.

Can I create an index.html page with a header, and nav box, and use an iframe where the Content used to be.

The problem I see at first is, the content currently on the index.html page, will have to be moved to its own original-content.html page and placed in the "indxpgs" folder, so it is viewable in the iframe, perhaps using <onload> to display it first.
Then I somehow have to CLEAR the initial <onload> page to display the page the user clicks on the link for.

My thoughts about this are. I would not have to duplicate the header or nav box on a dozen different pages, and only have the CONTENT part of the tier two html page appear in the iframe box.

I've been to plenty of websites where they do things like this, mainly in those advertising boxes you see on the pages which change from ad to ad all the time. I also see they have more than one iframe box as well, which I've not yet figured out how to make work properly.
If you recall from a previous post, when I was trying to display my PDF pages using an iframe box, it duplicated the same PDF file in the first three iframe boxes, even though the link was to a different PDF file page.
Others are having this same problem, with no apparent solution. Which is why I've been studying pages with more than one advertising box using iframes, unfortunately, all of these are using either PHP, AJAX or something other than HTML/CSS to do so.

Oh, if I am right about this. By using an iframe to display another page, if someone is on a mobile, my nav box will not be visible while on another page, even though it is an iframe, and they never left the index.html page. So I will need a link back to the page they are already on, which of course is impossible.

This is why I'm asking you to put on your thinking cap. Perhaps I need to not call the iframe until it calls a page from the nav box link? See, I'm confused again on how to implement my idea and make it work.

Thanks for any thoughts you have.

TTUL
Gary

[yogi]

Google is your friend!
But, as you so aptly pointed out before, you got to know what to ask in order to get the right answers.

To begin with you are talking about dynamically changing content on a single page, or using dynamic HTML (DHTML). That is what is happening in our forums. The template is our board style and the content within the template changes dynamically. Only one template has to be modified, and as if by magic all the infinite combination of pages we can produce will be modified accordingly. I know you have that much down pat.

Also, this web site makes the content changes by querying a database. The database is stored on our server and provided by our hosting service. It's all done via php, which is also installed for us by our hosting service. You can readily see the beauty in all this in spite of the fact that you don't know one bit of php code. Thus, one solution for you is to put your website content into phpBB and use your existing indexes to point to php created pages. I can help you set that up if you really want to pursue it. You will probably have to switch hosting services if Comcast doesn't allow what we are doing here, and I can understand why you prefer not to. But it is an elegant solution.

The only other way to achieve dynamic content status is by using some kind of script. Javascript is the most commonly used scripting language, but there are others. Have a look at this code. Simply copy and paste it into your editor and save it in an appropriate place. Then view the web page.

Code: Select all

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Replace Container Content</title>

<script type="text/javascript"><!--
	function ReplaceContentInContainer(id,content) {
	var container = document.getElementById(id);
	container.innerHTML = content;
}
//--></script>
 </head>

 <body>
<div 
   id="example2div" 
   style="border-style:solid; 
          padding:10px; 
          text-align:center;">
I will be replaced when you click.
</div>
<a href="javascript:ReplaceContentInContainer('example2div','Whew! You clicked!')">
Click me to replace the content in the container.
</a>

<br><br>

<a href="javascript:ReplaceContentInContainer('example2div','OK That\'s two in a row!')">
Click me (2) to replace the content in the container.
</a>
 </body>
</html>

http://www.willmaster.com/library/web-d ... ontent.php
http://www.willmaster.com/library/featu ... nother.php
Check out all the links for variations on this idea. It's pretty interesting stuff.

My sample page is crude, but it has what you are looking for, i.e., clicking a link will dynamically change the content of a container. While that is slick and beautiful, it does not entirely resolve your issues. You can indeed use one template for several types of content change, but the content has to be stored inside your HTML for the page. If you put all fifty pages there, you are going to have one hella long document. It will end up being one template with fifty possible variations all on the same page. This is why people use databases.

Another problem with this scheme showed up inadvertently while I was tinkering with the code. Note that the second form of the content is "OK That's two in a row!" It looks innocuous, but the apostrophe broke the script. Apostrophes are reserved code in javascript and cannot be used in text unless it is escaped. Simply putting a backslash \ before the special character will do it. Check the line of code with the content and you will see it written as "OK That\'s two in a row!" The implications here are that if you use apostrophes in your content they will all have to be escaped when you also use javascript to render a page. This could be a nightmare when it comes to editing your content. There are other characters that have to be escaped as well. The good news is that you only have to edit your content one time.

I'm guessing mobile devices will love the above solution compared to using iFrame tags. My example code should load quicker than what you are doing now because the content is embedded inside the link. Only the new content will be loaded when you click the link and not the entire web page. This makes life easier for slow mobile devices, plus allows you to apply any kind of formatting you want . The down side is that initially you will be loading the entire fifty+ pages of content all at one time. Once it's loaded then it's quick, but that initial download could be a killer. And, if you have to edit page 37, for example, I hope you have a good way to find it in a single very long document.

Also, I read somewhere that HTML5 is making document object model (DOM) calls obsolete. The javascript in the example makes one such call: document.getElementById(id). I'm sure this will work well into the future, but if it's on the hatchet rack, then you got to find another way to make these queries. Given that HTML5 is bent on eliminating them, I'd bet they have an alternative method. I did not go that far into my research to discover what that alternative to DOM's might be. For now it's just something to think about.

For the time being it's looking like the way you are doing things now is the best approach for you. You can continue to link to fifty unique web pages and include the appropriate links therein to get back home. It's a lot of editing when big changes come along, but you don't have to do it very often.

[Kellemora]

WOW, thank you Yogi

Your little script, after I remembered to name it properly, worked like a CHARM.

I saw you just got this up after I was hitting the other pages here. So thank you for working on it so fast.

Your little script is giving me BIG Ideas. But I guess it all depends on whether or not I can make a page call.

Part of a line from your script.
ReplaceContentInContainer('example2div','OK That\'s two in a row!'

I will study those URL links you provided and see if I can replace ('example2div','OK That\'s two in a row!' - with a link to a local html page.

Under my Header, if I omit the Breadcrumb from the Landing Page, and only place it on new Tier two pages. I will still have all the Tier 3 pages, for now anyhow, but they will be viewed while on a Tier 2 page.

Last night I was experimenting with using drop down boxes for nav links. This would totally eliminated the Second Expanded Index at the bottom of my index.html page. Because the drop down (which is easy to make, could provide the options to go directly to a Tier 3 page.

Other than the text messages I have on the Tier 2 pages, they only serve to provide what could be achieved by using a drop down box. In other words, I have to rethink my methodology to eliminate one whole Tier of html pages.

But when you get right down to it, almost every Forum, including this one, works the same way I have my pages set up.
You have to open the TOPIC FORUM page to get to the individual THREAD POSTS. I always get Posts and Threads terminology backwards. to me, if someone makes a Post, it's Post. If someone replies to that Post, it creates a Thread.

By the way, I've never heard of DHTML, so will look it up on Google...

You're a life-saver Yogi. Thank you for pointing me into another direction to study.
I'll have to forgo PHP for now, heck, I can't even understand BASH, and JS looks like Greek to me, hi hi...
Just trying to get things to work in HTML5 with all the new NO NOs is driving me nuts.
Had some <br />'s in <li> statements, failed W3C big time.
Changed several and ran the test again. STRANGE, it passed W3C, and I had not removed all the <br />'s yet.

I was in the process of changing <ul>'s to <ol>'s and had <ul's> inside of <ol's> which did not work, so went to using <dl>'s with <dt>'s and <dd>'s and hit the exact same problems again.
This was NOT on my HTML pages, I was fixing an e-mail mailout for someone.
Well, since I brought it up. They had <li> lines, but needed a <br /> to add a comment, before the next <li>
Sorta something like
PETS
....A. DOGS
........1. Cocker Spaniel
..............(High Maintenance)
........2. Boxer
..............(Low Maintenance)
........3. Shih Tzu
....B. CATS

Poor example, but the lines in parens were important to each of the numbered <li>'s...
I finally figured out a way to do it. So I'm over with that project already.

Again, A MILLION THANKS for all your help Yogi.

Looks like I have lots more studying to do now.

TTUL
Gary

[yogi]

Thanks for all the accolades. Hopefully they are not premature. The example page I submitted for your viewing is fairly limited in it's ability to reproduce content. Let me explain a little about what is going on in the script.

Code: Select all

<a href="javascript:ReplaceContentInContainer('example2div','Whew! You clicked!')">
Click me to replace the content in the container.
</a>

This is just an HTML anchor tag, a link, similar to those you would create using pictures or graphics as the button to click. In this case you are using script instead of images. A javascript function called ReplaceContentInContainer runs when you click on the link. The function script itself was placed in the header. As is the case with most javascripts we are dealing with two variables. The first one is the name of the of the <div>, which is example2div in our case. The second variable is the content, or the data, you put between the single quotes. That is why you have to escape the apostrophes in your text. An apostrophe is a delimiter for a javascript variable.

Up in the function script the variables are named within the parentheses, (id,content). The id variable is assigned the value returned by the DOM query document.getElementById. In other words this is the name of the target container you are manipulating. The second variable here is assigned the value returned by container.innerHTML. This is what is going to get replaced.

Thus, you are passing the name you gave to the container, example2div, and the content in single quotes to the function that will make the changes you specify. My feeling is that if you pass a URL, it will simply put the URL in place of the original content. It will not put the content of the URL there. It's a literal substitution. Whatever you put between those single quotes will get subbed into the container.

That is how my example works, but the links on the reference pages show you that HTML tags can be passed as well. However, in those examples a <form> tag is used for you to enter whatever you want, including HTML. I do not know if you can do the same thing with the example I gave you in the above reply. At best I expect the function to be capable of interpreting HTML. I'm not sure it knows what to do with a URL.

However, I do expect to read your report in the near future.

[Kellemora]

Hi Yogi

I played with it some before heading home for the night.
Got out my netbook, which I've not turned on in months and spent most of the late evening, 11pm till after 1am, studying the "willmaster" website. The frau was busy watching something on the TV, which gave me more time to study.

I found a js script called 'window.open()' which opens a whole new browser window, and it has many variables, which makes it work more like a pop-up html page within or on top of your open page.
While snooping around, I did find a new code called 'import' but it has a couple of problems. First; it is not yet supported in all browsers, and Second; you must have all the 'links' established in the 'head' area of the html page.

Ran across another problem in trying to place another html page within an iframe on the existing page. If the page you are calling has it's own CSS or even if it don't but uses some js, it causes a conflict on both pages.
So far, the only way I've read about to get around this, requires server side programming.

Ran across one fellow who decided to do almost like what I want, only in reverse. In his case he had a header map.
Like me, any change he made to it, he had to do on every single page which showed the header.
Instead of using a page with the header and calling all other pages to it. He made a page with the header and left it off of the other pages, if you opened any html page, it would fetch the header page and display it at the top of the page you did open, including his index.html page.
He was using an .asp file to contain his header, and I may be wrong, but this appears to be a Micro$oft Server Side file extension.

I did learn I was crazy for making individual changes on several different files. All I need is two files, one for the index.html page, and one for all the rest. Make a duplicate change as made on the index.html file, on the second html file. This is because the index page uses a single dot, and the other pages use two dots to access files in folders.
Then just cut n paste my off-line html section to all the other pages. Still have to do all the other pages, but less chance of a mistake if you are just pasting a copy to each page.

Back to the little box you showed me earlier. I think I could make use of it, if I applied the code to each of the Tier 3 html pages, and doing away with the Tier 2 pages entirely.
Tier 2 pages only contain a text blurb, plus the expanded index to each of the Tier 3 pages applicable to that topic.
By the same token, some of my Tier 2 pages have no link at all, and no Tier 3 page to go to.

From the nav box on my index.html landing page, all links take you to the Tier 2 pages, in a folder named indxpgs.
This is where I have the blurb about the topic itself and the links below. In lieu of a second link to a Tier 3 page in the htmlpgs folder. If all is covered on one page, I just include it on that indxpgs html page.

If I use a drop down menu rather than sending links to the indxpgs folders html pages, I could send them directly to the htmlpgs folder for the document.
Now here is where the little box you showed me comes in.
The text contained on the indxpgs folder html page, could be added to each of the pages in the htmlpgs folder, but not displayed unless the visitor wants to read the blurb.

Going by what you said in the post above, all the content for the box will have to be on the page anyhow, but invisible to the user until they click the link that opens the box and displays the blurb.
I hit a major problem with trying to use drop down boxes, especially when my indxpgs folder html page contains a ton of links. Here is an example: http://home.comcast.net/~dutch-rhudy/in ... tions.html
Although most of the links are currently turned off, because the pages contained spoilers, all of those pages do exist and will be restored after the associated book publishes.
Just by looking at this one html page, you can see why I have separate indxpgs folder pages which take you to the Tier 3 pages.

To save some visitors from going from the index.html page, to the indxpgs folder pages, and then to the htmlpgs folder pages, I added the Expanded Index on the bottom of the index.html page. More people use those links than the ones in the navigation box.

One way I could have eliminated the indxpgs folder pages, was to make the nav box link a local link to the bottom of the index.html page, and include the BLURB found on each page n the indxpgs folder pages on each of the htmlpgs folder pages instead. This would save visitors from having to make the second html page call. And save me from maintaining the nav box on each indxpgs folder page, because they would no longer exist.

I've been seriously thinking about using the drop down boxes and make the links only take the visitor down to the Expanded Index at the lower part of the index.html page. The highest number of links which will appear in the drop down box would then be only seven. Some will not have any links in the drop down box, since the entire topic is covered on one page, so this nav button would take them directly to the page.
Doing it this way would mean I would not need the left column nav box at all. Which is also a PLUS for Mobile Users as it does not then take up part of their viewing screen.

If my Tier 3 pages are working right. If you view those pages on a mobile device, the left darker background decorative vertical bar, and the black silhouette should disappear from the page. Of course this depends on the width of your cell phone window too.

FWIW: I know I'm missing something by trying this. I made a page which is not on-line to experiment with truncating the bootstrap.css. I made my own simple blank css to start, and then went through my html page and any call to css I hunted those calls down on the bootstrap.css page and copied them to my css page.

Many of them work A-OK by themselves, because they only have to do with text formatting, color, centering, etc.
But the main ones, like '.img-responsive' did not work when copied to my css page.
They have so many other script lines covering the top third of the page, I hunted through them looking for anything that might be associated with the css lines I was cobbing from their page. They way they are writing, it seems most of the major ones do have some interaction with each other. Like something in js style uses a word also used in the css line. E.g. the word 'responsive' for one, appears a few times near the top of the page.
Also, some call the AJAX website, even though I've not figured out why.
If I kill either the AJAX line, or the second JS line, my page does not function. Yet I can't see where anything I've used has anything to do with either. But then too, I did not have a lot of time to play around with it yet to see.

I wish there was a program that traced what calls an html page follows to the css and beyond.
Heck, there probably is. My Bluefish editor sometimes shows this at the bottom.

OK, I'll quit rambling. Lots to do today, Friday is always swamped at work, and I have a doctors appointment this afternoon also.

TTUL
Gary

[Kellemora]

Hi Yogi

I think I'm going Meshugenah.

Spent three hours trying to figure out why placing a jumbotron to the right of an image don't work.
So began studying the grid system. It works to put a jumbotron to the right of an image.
Even though I have the image and jumbotron in totally separate div elements, the stack feature still fails when moving down to mobile sizes.
Bootstrap grid limits you to 12 columns, and you cannot use decimals, only 1 through 12, or any combination of number which add up to 12. I used 2 columns on the left and 10 columns on the right. Which means as you scale down to mobile size, the right 10 columns are supposed to drop down under the two columns on the left.
Ole Murphy is dealing me fits. Instead of the 10 columns dropping down under the 2 columns as the tutorials say it will. My 10 columns slide left and cover the 2 columns in various increments of cover.

When I was asking how to do this when I was working on my Tier 3 pages, I was told it was impossible to do without using JS. Even so, I managed to get it to work, and I did not use the grid system on my Tier 3 pages.

I know you don't mess with this kind of stuff, so am not asking you to offer any suggestions this time.
Just venting my frustrations is all, nothing more.

Yes I do know there are other add-on css files for bootstrap, like their theme.css to append. But I'm trying to keep this as simple as possible, because after everything is said and done, I want to remember how to fix it later, after I forget everything again.

I'm going to try nesting Rows and columns as a test. Although I don't see how it will help. I'm sure I'm just missing some little property value somewhere.

That is all, hi hi...

TTUL
Gary

[yogi]

You have come a long way with HTML5. There is no doubt in my mind that you have learned a lot. Whether or not you can retain it is another story. I probably get less time to develop web sites than you do, but it constantly amazes me how much of what I learned on my own comes back when I need it. My problem today is that the rules are changing and I've not been keeping up. Fortunately, I do know where to look.

You have taken a path to development that I would consider too difficult. Frameworks like getbootstrap and foundation are marvelous tools if you know something about how they work. You can get good results without being educated about how it's done, and for most people that is all that matters. To me relying on somebody's framework is taking the control out of my hands. I'm sure I could work around someone's idea of a good design if I had to, but I don't want to waste time learning what THEY did so I can modify it and do thing my way. The advantage of MY way is that I can derive what I did next year after I forgot how I did it. I won't have to reverse engineer some code I don't understand if I am the one to write the code. I'm still paying a heavy price, of course. I have to know what it is I want and approximately how to get it. That's where my years spent as a professional in IT pays off. I may not know how to do it, but I know where to go to find out.

I ran across an article you might find useful. It points you in the direction of some popular web site development tools. It won't be any less trial-and-error, but you can never have too many resources when it comes to technical things.

http://codecondo.com/top-11-tools-which ... must-have/

[Kellemora]

Thanks for the Link Yogi. I bookmarked it to look at later.

I agree with you wholeheartedly, which is why I did all of my programming by hand using only gedit instead of some helper programs. Recently I downloaded Sublime Text, but didn't see any advantage to it, so fell back on BlueFish for right now. Not that I use any of the features of it. It just lets me hop from file to file and check the html in a browser easier.

The major drawback I see to programs like Bootstrap is it will cause all the websites to look basically the same. Regardless of the template, it's still bootstrap, hi hi...

But someone like myself who did not know how to do the many things it does, it is a wonderful learning tool, and I can study how they did what they did.
And you know me, I don't want to look like the status quo so I'm making modifications to retain my original website appearance as close as possible, only making it responsive and mobile friendly.

I'm finding many things in Bootstrap that do not work the way the instructions say they should either, and the W3C tutorial is quite lacking. Thank goodness for the Internet and others using it, eh!
I did learn while trying to duplicate my index.html page that to use buttons with drop downs it requires javascript. So I downloaded the newest version and added it to my JS folder locally. At first I was thinking, drat, it only works on a server like php, but then it started working. Trouble is, in Bootstrap, I can't do what I want to do, or at least have not figured out how to yet.

I have 12 links in my left column index. Way too many to put across the top of the page as drop downs, without condensing them somehow. If I put them in a vertical column on the left, the drop down opens all the way under the lowest link, this is not good. I want it to open to the right side of it, so am studying like pop-up boxes right now.

Our electric went out around 3pm yesterday. Came on just long enough for me to reboot and get all of my drives remounted, then it went out again. So I talked with the frau, and she likes my website just the way it is, with the Index on the Left. But she too feels I could do away with having to go to one page to get to the next.

So, with no electric, and working by candle light, I made several designs on paper on how the page should flow.
Doing what works the easiest makes the index.html page five miles too long. But I can add the blurb on the Tier Two pages to the top of the Tier Three pages and eliminate the Tier Two pages entirely.

I do plan on getting away from Bootstrap and writing my own CSS files, but I see now, I'll need JS and JQuery to do some of the things I would like to do.
I tried using the Bootstrap.css and taking out things I knew I didn't use at all, and as I figured, I broke it.

I'll close with the problem I'm facing. Basically saying what I want to happen on my page.
After all, you may know how to do it, or give me an idea of which ways to try.
Since I will have to use JS and JQuery anyhow, I'm thinking of making a left column nav similar to what I have now, but have it HIDE or slide off the page. Not sure which yet. But it won't matter because from it I will go straight to my Tier 3 pages.

Let's take just ONE of my LINKS currently in the left nav box.

REFERENCE MAPS

Within this main heading, I have three sub-headings

.....State Map.....County Maps.....City Maps

Under both County and City Maps I have sub-headings for the Counties or Cities.

County Maps
...Bond County
...Cahokia County, etc. to
...Yarnell County

Inside of Yarnell County is where the individual maps appear.

In order to use drop down boxes, I would need them first to open beside each other.
And personally, I think having a drop down box, open a drop down box, open a drop down box, will be most annoying to a visitor of my website.

My current index.html page has the Expanded Index at the bottom.
So my thoughts are: Rather than use drop down boxes, or send folks to a Tier Two page, I will make the links in the nav bar take them to the bottom of the index.html page to the topic there.

This way, clicking on the nav box link for REFERENCE MAPS instead of taking them to a Tier Two page, it will only take them down to the Expanded Index

REFERENCE MAPS (which I will make no longer clickable because the Tier Two page will be removed)
...State Map (not clickable)
......State of New Clemons (clickable to Tier 3 page with the map)
...County Maps (not clickable)
......Bond County
......Cahokia County
......Franklin County, etc. to
......Yarnell County (clickable)
.........1808 Exploration by CC&H Team (clickable BUT goes to anchor location on Yarnell County page.
.........Direm's 1848 Atlas of Yarnell County (clickable But to anchor on Yarnell County page.

Hmm, just thinking, if Reference Maps is the nav link, it would open the drop down to State, County, and City maps, which in turn would open to the named counties. That would only be two drop downs to open, not as bad as four.
Oh wait. Because I have so many headings in the nav box. I was going to truncate that also to Roaring Falls Specific and General Info, which I have not come up with names for yet.

Things like Writing Tips, About the Author, Blog: The Authors Corner, etc. are not specific to Roaring Falls.
Trouble is, some of them do interact with each other.

So I was thinking, if I did eliminate the left nav box and used a TOP nav bar with drop downs, they would be something like.
ROARING FALLS SERIES - - - PUBLISHED WORKS - - - BLOG: THE AUTHORS CORNER - - - INFORMATION DESK

And I would limit the drop down boxes to only one drop down box, which would take them to the Expanded Index at the bottom of the page.

E.g. the ROARING FALLS SERIES tab will open a drop down box containing only.
Introduction - - Attractions - - History - - Reference Maps - - Cast of Characters

The PUBLISHED WORKS box may be a little sticky because I have both the Roaring Falls Series AND Stand-alone Novels and Stand-alone Short Stories, neither of which are associated with Roaring Falls, which is not published yet, but will be.
Right now I have: Historical Series - - Mystery Series - - Romance Series - - Stand-alone Novels - - Short Stories
I could just use: Roaring Falls Series Books - - Stand-alone Novels - - Short Stories

I honestly cannot see a way of getting around using the Expanded Index at the bottom of the page.
However, I see No Need to go to a Title Page first (Tier Two pages) as I do now.

One other dilemma. Some of the Tier Two pages have NO LINKS to Tier Three pages, because they are fully self-contained. Such as the INTRODUCTION or HISTORY pages. So I cannot eliminate all of them. But they will not need the nav bar on them anymore either. Which will make the pages rather BLAND from what I'm used to.

Now that we have electric again, I will try various looks to see if I like them or not, hi hi...
I realize the least amount of steps a visitor has to make, the more improved my site will be.
And with so many people using micro-miniature display screens these days. Well.....
If I can do it without using JS or JQuery, I would be happier, and it might make it easier to get away from Bootstrap my next rewrite.

Thanks for your thoughts and excellent sources!

TTUL
Gary