Displaying Long Text Document on Page

Hi all,

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”. :ocean:

Perhaps, I can nest the text / image content within divs that can be displayed as sections?

Any ideas are appreciated.

-ty :smashy:

1 Like

Well you could break it down into separate pages. On each page have links to the next part.

Or you could use named anchors and have a menu that jumps them down a single page to the relevent section.

One of the simplest things you can do is have properly structured text/html using heading tags in the appropriate hierarchy e.g

<h2>Section heading</h2>
<p>Some paragraphs</p>
<h3>A sub heading</h3>
<p>Some more paragraphs</p>

<h2>Section 2 heading</h2>

This makes it much easier to skim read, assuming you have decent titles that explain what each section is about.

2 Likes

Hi Noppy,

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.

-ty :smashy:

1 Like

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>

Then build you on-page nav/index.

<ol class="index">
    <li><a href="#sect1">Section 1</a>
        <ol>
            <li><a href="#sect1a">Sub-Section a.</a></li>
        </ol>
    </li>
    <li><a href="#sect2">Section 2</a>
</ol>

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.

6 Likes

Hi, Sam.

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 :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.

Thanks for your input.

1 Like

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.

https://jqueryui.com/accordion/

Although if you aren’t already using Jquery you could probably find a vanilla script that is much smaller.

1 Like

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/

2 Likes

I have a glossary of terms section that will be a clickable section along with the rest of the shipping literature.

Erik_J, I don’t think I want to put any external links in order to prevent any “bounce” rate of viewers from my site, but that’s a mindful suggestion.

1 Like

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:

3 Likes

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).

These are all really good ideas from all of you.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.