Sample Page – Managing Long Pages

This page presents examples of different methods that can be used to break up a long page into sections to make it easier for the viewer to absorb the content.  The viewer is able to navigate the content in a non-linear fashion.

Here are 9 examples:

  1. Read More:  This method is used to break a page into 2 or more sections.  At the end of a section, the reader is invited to click on a link which causes the next (hidden) section to be displayed.  Click here to see a sample page where the “Read More” method has been used.
  2. Anchor Points:  This method is used to break a page into multiple sections.  A Table of Contents (TOC) is displayed at the top of the page with a hotlink to each section.  The TOC is generated automatically based on the headings (h1, h2, h3, etc.) used within the page.  At the end of each section there is a link which enables the reader to return directly to the top of the page.  This makes it easy for the reader to navigate through a long article and explore those sections of interest without having to read the entire article.  Click here to see a sample page where the Anchor Points method has been used.
  3. Multi-Page: This method is used to break a page into multiple pages.  This enables the  reader to read a long article one page at a time without having to continue scrolling down a single long page.   Click here to see a sample page where the Multi-Page method has been used.
  4. Popup Window:  This method is used to display information in a non-linear fashion.  It is particularly useful for displaying a form where the reader is invited to submit information, e.g. to join a mailing list or to make a payment.  Click here to see a sample where the Popup window method has been used.
  5. Accordion:  This method is used to break a page into multiple sections.  The content in the sections within the accordion remain hidden until the reader clicks on a section title in order to expand that section.  When another section is selected, the previously exposed section is closed.  This method is particularly useful for presenting the user with options to choose from.  Click here to see a sample page where the Accordion method has been used.
  6. Spoiler:  This method is very similar to the accordion method.  It is used to break a page into multiple sections.  The reader clicks on a section title in order to expand that section.  However, when another section is selected, the previously exposed section is left open.  This method is particularly useful for hiding detailed information but enabling the user to drill-down if needed.  Click here to see a sample page where the Spoiler method has been used.
  7. Horizontal Tabs:  This method is used to break a page into multiple sections.  The user can select a particular section by clicking on the tab title.  This method is particularly useful for presenting the user with optional information they may wish to view.  Click here to see a sample page where the Horizontal Tabs method has been used.
  8. Vertical Tabs:  This method is the same as the horizontal tabs method except that the tabs are displayed in a vertical manner on the left hand side of the page.  Click here to see a sample page where the Vertical Tabs method has been used.
  9. Portfolio:  This method is used to display a set of images in a non-linear manner.  Each image has a hotlink associated with it to enable the user to navigate to another page by clicking on the image.  NOTE:  This method is different from the other methods in that a new page is launched when the user clicks on an image.  With the other methods the user is able to navigate within the one page.  Click here to see a sample page where the Portfolio method has been used.
Like this article? Please share:

55total visits,1visits today