Links

All links on the site must meet certain standards.

All link text should explain what the visitor should expect when they click on the link. Ask yourself, "looking only at link text, can users tell what they’ll find at the other end?" If the answer is no, reword the link. Note: Screen reader software can sort links alphabetically, so make sure the link makes sense out of context.

Do:

• Link to the Drupal ID for content on our site, not the longer url. E.g. /node/4733, not https://www.grinnell.edu/administration/editors-handbook/media-and-more/links.
• Check your links to make sure they work.
• Include file types for non-webpage links. Example: Student Handbook (PDF)
• If the link is to a page that requires the user to log in — for example, on GrinnellShare — include (login required) or a similar note in the link text.
• Make your link concise: as short as possible while still providing any needed information, and no longer.

Do not use link text that is:

• “click here,” “show more,” or other generic text
• A file name (e.g. 2015-whitepaper.pdf)
• URLs or email addresses

Note: If you find that you are having trouble meeting these requirements, contact us for help. In most cases, we’ll have an easy fix. In others, we have a few options, such as aria-label, that we can implement.

Back to top

What does "opening in a new window/tab" mean? 

By default, when you click on a link on a website, the new page replaces the page that you're on. This is standard behavior. Doing so ensures the back button will work and users on small devices or with vision impairments will know that the link worked. 

Opening in a new tab means the link triggers a new browser tab and opens the new page in that. You can also set most browsers, such as Chrome or Firefox, to default to this if you prefer it for yourself. 

Opening in a new window means the link triggers a new browser window and opens a new tab there. This is rarely done anymore. 

When should or shouldn't you open a link in a new tab?

Do not open in new tab except in very specific circumstances, primarily when not doing so could cause the user harm. For example, you might open a link on a webform in a new window if the user would otherwise lose the information they'd completed up to that point. These circumstances are rare.

Do not open a link in a new window:

• because that's how you prefer it
• because you want users to come back to your page or you “don't want them to lose their place”
• because it's on another site
• because the checkbox is there and you like clicking checkboxes

You can open the link in a new tab if you:

• can articulate an appropriate reason to open a link in a new window
• include a revision note explaining why you think it should open in a new window
• warn the user by including an explanation — such as opens in new window — in the link text itself.

We will review why you think the link should open in a new tab. If it is an appropriate reason, we'll allow it. If not, we'll set it back to web standards and let you know why. If you aren't sure if you have a valid reason to open a link in a new tab, just ask.

How can you tell if you are opening a link in a new tab?

Almost all links will give you one of the two following interfaces.

 

Back to top

If you want to receive a report that shows you all your broken links, contact us and we'll set you up with SiteImprove quality assurance reports.

Notes:

• Anyone can get these reports; they don't have to be a Drupal editor.
• You can get reports for multiple sections of the site.
• Multiple people can get reports for the same pages.

This means you can let others keep an eye out for broken links and other quality assurance issues. Just ask.

Back to top

A call to action link encourages people to take an action such as take the next step in a process or explore a topic further. We use special styles to make these types of links easier for users to spot.

The use of a verb sets these types of links apart and results in more users taking action. For example:

Visit Grinnell

Explore Mellon Mays Scholarships

Back to top

You can style your links as calls to action using a WYSIWYG style. To do so:

1. In a WYSIWYG editor, add a link.
2. Select your link and click the Styles drop-down in the icon menu bar.
3. Scroll to the top of the list to find the two CTA link styles.
4. Click on the style you want to use.

The two styles are:

• CTA buttons will look like rectangles with black text on a dark yellow background on the published page, and as buttons in the WYSIWYG editor.
• CTA links are not visibly different from regular links in the WYSIWYG editor. Save your page as a draft to see if they are added correctly.

Tips:

• If you don't see the options, make sure you've already added your link and you've selected the link text. These styles are only available for links.
• CTA buttons will look like buttons in the editor.
• CTA links are not visibly different from regular links in the WYSIWYG editor. Save your page as a draft to see if they are added correctly.
• Only use CTA links for calls to action, not for other types of links.

Back to top

In some components, you'll find ways to add calls to action — links that ask people to take an action such as "learn more about ..."

Common CTA styles include:

• CTA buttons: rectangles with black text on a dark yellow background or white text on a red background.
• CTA links: black text with a small red animated arrow to the right.

In most cases, the styles are built in to the component and you'll find fields with CTA in the name. Simply add your URL and your link text — remember to use a verb — and the component will style the links.

Back to top

When you are working in a WYSIWYG editor, you have two link icons available.

The first link icon, near Italics, makes it easy to link correctly to content on our website.

The second link icon, near the end of the icons, makes it easy to link to pages on other sites, email addresses, and anchors.

Other components often include the ability to add links using matched fields like Title and Title URL.

Back to top

Lookup Fields

The first Link icon and most URL fields for other components are lookup fields, meaning you can lookup nodes and documents to find the link using the Drupal ID.

Use lookup fields to link to content on our site, such as Page, News, Group Info, or media like PDFs or Word documents. To use a lookup field:

1. Start typing the name of the node or media you're looking for. You'll get a list of matching content, grouped by type.
2. Scroll to and select the correct item.
3. Click Save.

If you want to link to a specific section of a webpage on our site, you can use anchors. See “Using Anchors” for more information.

Lookup fields can also be used for regular URLs. Enter the full URL including “https://”.

When you are working in a WYSIWYG paragraph, you have two link icons available. The first link icon, near the italics icon, has a lookup field.

Back to top

The second WYSIWYG Link icon, near the Anchor icon (flag), can accept any URL and is particularly useful when linking to email addresses and anchors. To use it:

1. Select the text you want to make into a link and click the second Link icon. The Link dialog box will appear.
2. Select the Link type you want:
   • URL
     • Enter a valid URL. Drupal will automatically select a Protocol.
     • Include http:// or https:// in the URL. If you don't, Drupal will default to the <other> protocol, which adds https://www.grinnell.edu/ to the beginning of the link.
   • Link to anchor in the text: Select an anchor from one of the drop-down lists. These will only appear if there are already anchors on your node to link to. See “Using Anchors” below.
   • E-mail address: Enter an email address. The other two optional fields will prepopulate the email when a user clicks on the link:
     • Enter an email subject in Message Subject.
     • Enter a message in Message Body.
3. Click OK.

Note: You can use the second Link icon to link to content on our site; remember use the Drupal ID, such as /node/4733, not a URL address. The first link option makes linking to our site’s content much easier.

Back to top

If you want to link to a Profile on our site, do the following:

1. Select the link text and click either Link icon.
2. In the URL field, enter /user/[network id] where [network id] is the person's Grinnell College network id. Include the initial slash. For example: /user/dralusde
3. Click Save/OK.

The steps above will work as long as the person's network id doesn't change. If it does, the links will need to be updated. If you want to take the extra time to make the link breakproof, you can use the person's profile ID number. To do so:

1. Browse to the person's profile (or use the /user/[networkid] shortcut described above).
2. Click Edit.
3. Look at the URL in the address bar and copy /user/[999] where [999] is the profile ID number.
4. Add your link using either Link icon with this short version of the URL.

Back to top

To link to documents on Drupal, see “How to Link to Your Document” at Files and Documents.

Link to documents on other sites as you would link to anything else.

For links to all documents, warn users that they will be getting a document rather than a web page. For example, Investigations: Handbook for Biology, Chemistry, BioChem Course (PDF).

Back to top

If a page has anchors — like bookmarks — you can use them to link to a specific subsection of a page. When a user clicks on a link to an anchor, their browser will scroll to that section of the page.

Using anchors is a two-step process:

1. Create an anchor.
2. Add a link to the anchor itself.

Creating Anchors

Anchors can be a bit tricky to use on our site. We use them primarily for policies with a lot of content. Note: To make it easier for your users to navigate through a lot of content, consider using Accordion or Tabs instead.

On our site:

• You can add anchors only using the Anchor icon in a WYSIWYG editor.
• Do not highlight text when adding an anchor. The text will look like a link.
• Do not insert an anchor in an Accordion or Tab. The anchor will not work correctly.

To create an anchor from a WYSIWYG editor:

1. Place your cursor at the beginning or above the heading for the section you want to link to.
2. Click the Anchor icon. The icon looks like a flag.
3. Enter a name for the anchor.
4. Click OK.

Linking to Anchors

To link to an anchor on the same page:

1. Select the text you want to make into a link and click the second Link icon.
2. Under Link Type, select "Link to an anchor in the text".
3. Under Select an Anchor, click the drop-down By Anchor Name and select the correct anchor from the list.
4. Click OK.

You can link to an anchor on any webpage if you know the name of the anchor. To link to an anchor, add #[name of the anchor] to the end of the URL. For example: https://en.wikipedia.org/wiki/Grinnell_College#Athletics

Back to top