Minimize Scrolling

Ideally every webpage , or page in a website, fits onto one screen. Achieving this goal is impossible, but a reasonable guideline is to limit page length to roughly three times the vertical size of common computer screens. Note that users of mobile devices tend to accept much more scrolling than users of desktop computers or laptops.

Decide Which Chunks Should Be HTML or PDF Documents

Most LLIR webpages are HTML documents created by authors using the page editor in WordPress, as described in the overview of our development platform. In specific circumstances, PDF files are more appropriate. The PDF format is designed for ease of file transfer and printing. In contrast, downloading and printing HTML documents is difficult.

Use PDF files for

  • Documents that contain reference material that users typically download to read offline or to keep for future reference.
    Example: Detailed course agendas
  • Documents that are not suitable for reading online because they are long, have legalistic wording and contain no interactive elements except possibly links to other online resources.
    Examples: Policy statements and by-laws
  • Documents that require layouts you cannot achieve using Guttenberg but you can build easily using word processors or desktop publishing software.
    Example: Detailed instructions with many embedded symbols and images.

Click the Show More button below to read about PDF documents.

Other Consideration for PDF Files

PDF files usually contain text and graphical elements. Then can contain working links. Authors use Word Processing or Desktop Publishing tools to create source files and to convert the editable source to PDF. Like image files, PFD documents must reside in the Media Library for WordPress website. As a result:

  • You need to keep a copy of the source files separately from the website.
  • Media files are invisible to the WordPress Search feature so users cannot find information in them by searching for key words or phrases.
  • Lots of media files increase the importance of maintaining the Media Library and performing regular housekeeping to remove files that are no longer used.

Link to a New Browser Tab When

Whenever you add an in-page link or a button to page, you supply the address of the destination address. You can also set an option on the link to open the destination in a new browser tab. Do that when:

  • The destination is a webpage in another website.
  • The destination is a PDF file or other non-interactive resource (any document in the Media Library).

All link destinations replace the entire browser display, but only HTML pages in the LLIR website include the LLIR header and menu. Some users know the browser Back feature (often displayed as a back arrow or arrowhead) is a route back, but you should avoid relying on a browser feature. When you open in a new browser tab:

  • Users of full-sized screens can can return to the website by either of:
  • Clicking the close box (the X to the right of the tab’s label), to close the new tab.
  • Clicking the tab still showing the LLIR website, to keep both tabs open.
  • Users on large screens can switch focus among open browser tabs by clicking the different tabs. Exploit this feature for step-by-step instructions. For example, users can read an instruction in one tab, switch to the website to perform the action and then switch back for the next step.
  • Users on smartphones must use the Back button (displayed as < ) to return to the website, closing the new tab.

Suggestion

Start all PDF files with standard text such as the following:

This document opens in a separate browser tab from the LLIR webpage that opens this page.
The reason is to make this document easy to download for reading offline or printing.
When you finish with this tab, click the X to close it and return to the LLIR website.

Follow a Consistent Menu Design

The purpose of menus is to give users direct access to different areas of your website and help display how the information is organized. The main guideline for designing menus is that they should have a consistent look-and-feel throughout a website. Balancing menus with other forms of navigation, mainly buttons and in-page links, is a skill and an art.

The LLIR website provides navigation for users in the header, on two lines listed below. What links are available from these two lines depends upon whether the user is logged in, so the user initially sees the logged-out options.

  • The main navigation menu is left-justified green line across the bottom of the page header.
  • Buttons that open select pages, such as Contact Us, or My Profile, are right-justified on the blue line above the main menu, followed by the Login or Logout button.

In-page links and buttons are links embedded in text. They do more than augment navigating from the header. They open alternative routes by which users find their own paths through through the website. The page Best Practices in Web Design explains why enabling multiple routes to any particular chunk of information is a good thing.

  • The main navigation menu cannot be a row of buttons because buttons cannot have dropdown menus. The buttons are limited to items that require fast and easy access.
  • The label on a menu item or button can be different from the title of the page that it opens.
  • Two or more items in different submenus can point to the same page. The labels on the menuitems can be different to suit their contexts.
  • The original intention to allow only only levels of menus lasted until we added a third level under My Profile to avoid a long list of forms in one submenu. However, the recommendation is to add new pages only to one of:
  • The main navigation menu that runs horizontally across the header.
  • One dropdown submenu that hangs vertically below most options in the main menu.
  • When a deeper level of nesting is required, create a landing page for the topic with in-page links to the pages that would have composed the third-level menu. For an example, see By-Law and Policies under Membership.
  • The choice of buttons for the blue header line was forced by our decision to make the navigation as similar as possible on large screens, mobile devices and smart phones. Our Kadence theme limits us to two buttons (plus login/logout) on small screens.
  • Most main menu options have dropdown menus. Consider happens when the user clicks a top-level option rather than an item in its dropdown. Either all top-level options should open a page or none should. For consistency, make all top-level menu items open the same page as the first item in the dropdown menu.