Dev: Tips for Web Developers

This page contains a variety of tips for improving the usability of websites and effeciency using WordPress.

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 are for the General Public or Members Only

First refer to page Best Practices in Web Design for guidelines mapping chunks of information into content of pages. The next step is to determine whether the resulting pages should be available only to members or to any user who visits the website. See page Public and Member-Only Pages for more details.

Consider Whether a Page is More Useful as a PDF Document

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, documents in Printable Document Format (PDF) format are more appropriate. Most browsers provide a print feature so users usually can print webpages, but the format of webpages is not optimized for printing.

Use PDF files for

  • Documents that contain reference material that users typically download to read offline or to keep for future reference.
    Examples: Course outlines, reference documents for the annual AGM.
  • Documents that require layouts you cannot achieve using the WordPress editor but you can build easily using word processors or desktop publishing software.
    Example: Detailed instructions such as the Login Help.
  • Advantages of PDF
  • The PDF format is designed for ease of file transfer (downloading), saving files offline and printing.
  • When you create a PDF, you can format the document for printing by controlling pagination, adding page numbers and the like.
  • Disadvantages
  • The WordPress Search feature cannot see words in a PDF document.
  • PDF files incur a larger maintenance overhead than webpages. For an explanation, click the Show More button below.
  • Links to PDF files should open in a new browser tab, so you must explain to the user how to return to the website as described below.

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:

  • The source file from which the PDF is generated must be stored separately from the website.
  • Lots of media files increase the work of maintaining the WordPress Media Library and removing files that are no longer used.

When and How to Link to a New Brower Tab

Open a new browser tab whenever the the destination of a link does not include the LLIR Menu. Within the LLIR website, users can use the menus in the page header and in-page links to continue to navigate.

  • Consider that some users may not know how to return to our website the current page is replaced by links that open:
  • Destinations in another website.
  • PDF documents, Images, or any files that are not HTML documents.

Notes

  • Menuitems always link to pages in the website.
  • When you add a link using a block type Button, you do not have the option of opening a new browser tab.
  • Some users know that the browser Back button (often displayed as a round arrow or arrowhead) is a route back, but you should avoid relying on users being familiar with browsers.

How to Link to a New Browser Tab

  1. If you are creating a new link, select the the characters to become the link text and click the link Icon in the editor popup menu.
    • Enter the link destination (a URL)
    • Click the return arrow Icon (or press Return) to create the link.
  2. Click the link text and then click the pencil icon to open a panel to edit the link.
    • You can optionally modify the link text or destination URL, if required.
  3. Check the box Open in new tab
  4. Click Apply.

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

This document opens in a separate browser tab from the LLIR website
You can read this document or download it to read offline or print.
When you finish with this tab, click the X to close it and return to the LLIR website.

Follow a Consistent Menu Design

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 the two lines listed below.

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

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 primary navigation for the LLIR website is provided by menus that appear in the page header. The Public Men, which all users see when they open the website, is replaced by the Member Menu while a member is logged in. Additional links such as Contact Us in the page header and the Terms of Use in the page footer are provided by buttons.

  • The top level menus organize webpages into categories.
  • The first item in the top-level menu is Home. It opens the Welcome to LLIR page before the user logs in and Member Home after.
  • Operational change made in April 2026. Home has no dropdown submenu.
  • Operational change made in April 2026. Items in the top level menu after Home have submenus that drop down when the user hovers over them (indicated by the down arrowhead following the item’s label). Top-level menuitems with dropdown menus are not links.
  • The label on a menuitem 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 but can have different labels to suit their contexts.
  • The original intention to allow only two levels of menus. However, the Website Rejuvenation Committee of 2023 added a third level under My Profile to avoid a long list of forms in one submenu.
  • In general, avoid adding a third level in the menus. Instead, create a landing page 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.