Navigation and links

Definition
Links, or hyperlinks, are used to connect the reader to content on other web pages. We might invite the reader to learn about our admissions counselors and their territories by embedding a link "inline" in a sentence. A link is made up of two parts.
Parts of a link

Main navigation: parents and children

On the desktop, and on most tablets held horizontally, the navigation is on the left of the screen.

On a smartphone (either orientation), and most tablets held vertically, the navigation is not visible. At the top of the page (below the breadcrumb trail) the navigation is found by clicking the large plus (+) icon to the right of the word “Navigation.”

This navigation is commonly understood to be a list of the child pages of this page if it is a parent, or the list of sibling pages, if the page is not a parent.

Redirection is not allowed in the main navigation

In the past, we created pages in this navigation list that do not have any content. That blank page was used to redirect the user’s browser to a page in another section of the website, or to another website altogether. This practice is not accessible. The reason is that it produces an unexpected result. In layman’s terms is can be described by the principle of least astonishment (POLA). “If a necessary feature has a high astonishment factor, it may be necessary to redesign the feature.” More generally, the principle means that a component of a system should behave in a way that most users will expect it to behave; the behavior should not astonish or surprise users.

Alternate navigation

Instead, links can be included in the content area of the page. Several design components are implemented in this website that can clearly serve the purpose of linking elsewhere within the website.

Lists of links

Links are often displayed on a web page in a list. For example, FDU has two New Jersey campuses:

How to create a link

Type in the link text, highlight it, click the Insert/Edit Link icon (it looks like a piece of a chain). Type or paste the destination URL into the field, click the Enter icon.

Alternately, click the link icon and then start typing in the title of the destination page. As you type, a filtered list of pages will appear. When you find the page you want, click the Enter icon. If more than one page has the same title, look at the URL of that page. If it does not make sense, search again select a different page. Notice that the entries are classified as Page, Directory, Program, or a date (these are news items). These classifications will help you select the page you want.

Special formatting for links

A link on a line by itself can be displayed in a blue box. Create the text link first. Then select it (or simply click anywhere in it), and select Blue Button from the Formats > Button menu.

Combined Degree Advantage

Components

The Button Bar component provides a red heading and up to three buttons in a row on the desktop, two on a tablet, and one per row on a smartphone. (This is a general rule. Brands and models may produce slightly different results.)

Other components follow that allow (or require) the inclusion of an image link.

Instructor helping student in art class.
Slider text 240 characters Read More
Slider Accent

CTA Cards

  • Two across in the Default template on desktop or tablet.
  • Three across in the Landing Page template on desktop.
  • One-across on either template on the smartphone.
  • Link is required. Surprisingly, link text is not.
 
SELECT A HEADING LEVEL. APPEARANCE DOES NOT CHANGE
LOGO GRID 200X200 SELECT HEADING.