I’m interested in displaying a Shipping Guide on my website, firstratefreight.net.
The document I am editing is roughly 3,800 words currently. I also have some images to display throughout the text.
My first idea is to offer a completed .pdf file for download / viewing online; however, for the site display, I am trying to brainstorm how I would offer up this content without drowning the user in a “sea of text”.
Perhaps, I can nest the text / image content within divs that can be displayed as sections?
I believe I have seen a page with a table of contents that allows for navigation of the document which I would need to also include some “back to top” links sprinkled without the 5-page text document.
I will attempt to find out which elements, if other than <a>, I will require to accomplish this.
Like you said as well, I can also choose to do separate page numbers in HTML, i.e.: shippingguide1.html, shippingguide2.html, shippinguide3.html, etc.
Having regular paragraph breaks and breaking further into headed chapters with a sprinkling of pictures will make a “sea of text” seem less daunting and more digestible.
I don’t think one long page is too bad, so long as you have a good on-page navigation which is simple enough to do.
Just add IDs to your chapters.
<h2 id="sect1">Section heading</h2>
<p>Some paragraphs</p>
<h3 id="sect1a">A sub heading</h3>
<p>Some more paragraphs</p>
<h2 id="sect2">Section 2 heading</h2>
You could use CSS counters or server side arrays to help take the donkey work out of making this.
You may make the index fixed or sticky to follow the user through the page for easy access anywhere. Maybe in a sidebar, or “hamburger” it if it’s too obtrusive there all the time.
Just one idea.
Yes. Quite honestly, the one long page format sounds the most appealing so long as there is sufficient navigation through the use of your ordered list strategy coupled with identified sections (and some “back to top” links here and there)… and illustration throughout. I like the idea of a one-page format due to the fact that there would be no reliance upon JS or CSS to display the additional text as the user scrolls through sections. It would already be on one lengthy page. I already have a table of contents established on the document I am drafting.
Maybe I’m a unicorn , but I still read literature even if it is rendered on a primitive layout (with only a background color and some text). If the text has something substantial within it, I’m going to read it.
The other option which would require JS is accordian type setup where each of the headings are clickable to open the text within that section and close when you move onto the next section.
The headings then become your menu rather than a separate one
e.g.
Although if you aren’t already using Jquery you could probably find a vanilla script that is much smaller.
May I suggest some in-page-links to explain/refer terms through the document.
Something w3.org makes good use of, like in this complex page example: https://www.w3.org/TR/css-display-3/
I agree on that, but I think you misread what I wrote.
“In-page-links” aka anchor or jump links is pointing to an anchor elsewhere on the same page. They are usually used in a document’s TOC to take you down to that section of the document.
I linked to that w3 document, where all kinds of “in-page-links” were used, thinking of the frequent jump links taking you to where that term is explained when you click on it.
More info about in-page-linking from the long time usability guru Jacob Nielsen:
Ah, I understand. Those glossary terms can definitely be linked to within the page navigation.
At the article you linked, I also got a bit of visual concept of what I want to do with the headings and lists throughout the document (when it’s done).
, but I still read literature even if it is rendered on a primitive layout (with only a background color and some text). If the text has something substantial within it, I’m going to read it.