Dev: Tips for Web Developers

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 in the section below, Links to a New Browser Tab.

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.

Open Links in a New Browser Tab When Appropriate

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 webpages 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 users being familiar with browsers. 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.

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.