If you run into a problem, have questions about how something works, or have questions about functionality that is not covered, email firstname.lastname@example.org to ask for assistance.
Getting Started with Links
Before you get started adding links to your page, learn more about the dos and don'ts of writing links.
You should also familiarize yourself with how to use UTM codes in your links to better track your content in Google analytics.
Opening Links in the Same Tab vs. a New Tab
By default, all links (internal and external) on Drupal websites managed by University Communications open in the same tab.
If you’ve ever googled something along the lines of “should a link open in a new tab,” you know that this is a topic of debate in UX communities. Although the debate continues, we recommended that on all University of Oregon websites links to both internal and external webpages should open in the same tab.
Reasons to Open Links in the Same Tab
Easier navigation on mobile devices:
Opening links in the same tab keeps the “back button” available as an option for users to return to the previous page. This reduces the chance that mobile users will get lost or be unable to locate a previous tab.
Opening links in a new tab can quickly cause usability issues. For example, WebAIM, an organization that leads the way with tools and resources for web accessibility, explains how these kinds of links can cause issues for users using screen readers:
“Newer screen readers alert the user when a link opens a new window, though only after the user clicks on the link. Older screen readers do not alert the user at all. Sighted users can see the new window open, but users with cognitive disabilities may have difficulty interpreting what just happened. Then when they try to click on the Back button in the browser, nothing happens, because there is no previous link to go back to in a new window or tab.”
Having links open in the same tab eliminates this issue and helps make sure our websites are accessible for all of our users.
Users have a choice:
Setting links to open in the same tab allows users with different preferences to engage with your website in the way they like best.
If a user prefers that links open in a new tab, they can open the link in a new tab by right-clicking or by pressing and holding the link on a mobile device. This option is always available to users no matter how a link is set to open.
However, if a link is set to open in a new tab but a user prefers that links open in the same tab, the user does not have the option to choose and is forced to adapt to this undesired linking behavior.
Consistency improves usability:
A critical part of providing a positive user experience is maintaining a consistent experience throughout a website. Site visitors benefit from knowing that all links on a site will behave the same way when clicked. That is why it is important to set both internal and external website links to open in the same tab.
Exception: When opening content in the same tab would make it difficult or impossible to complete a task, opening the link in a new tab may be required for functionality. For example, linking to the same tab could cause a user to lose the information the have entered in a form.
Links should have concise and descriptive screen text that allows the user to understand where that link will take them without reading the surrounding text. Use words such as "University of Oregon homepage" rather than a URL like "http://www.uoregon.edu" so that the user can easily understand where the link goes. Hear a screen reader read a URL.
Avoid using "Click Here" or "Read More" when possible because many screen readers allow users to jump to links. If the title of the link is "Click Here" it provides no context for where the link goes.
Links should be labeled with the most important keyword or phrase people are looking for to guide them to the information they want.
Add a Link to Your Page
- Highlight the text or click on an image that you would like to make into a link to another webpage, document, or other content URL.
- Click on the link button in the editing menu:
- This will open an Add Link window.
- If the link is to an external page not located on your website, copy the full URL, including the HTTP:// or HTTPS://, and paste it into the link URL box. Click the Save button to add the external link to your content.
- If the link is to an internal page located on your website, start typing the title of a page on your site. This will bring up a list of page titles that contain the word you entered. Click on the page title you want to link to and the URL will be filled in automatically. This may show up as "node/#" (Drupal content is stored as "nodes") or "/pagename".
If you are looking for information on linking to a file saved on your site, please see Linking to a File.
Add a Link to an Email
Click the link button to bring up the Add Link window:
In the link field, type:
Followed by the email address you want to link which will look something like mailto:email@example.com.
Create Anchor / Jump Links on a Page
Place the Anchor
- Place your cursor where you want to set your anchor.
- Click on the flag icon button
and type in your anchor name.
Note: There cannot be any spaces between words in your anchor name. Instead, use dashes (-) or underscores (_), like "the-uo-duck".
- Copy the entire link name and click the "OK" button.
Link to the AnchorScroll up to where you will place a link to your anchor (usually at the top of your body content).
- Highlight the link text and click on the link button.
- Type the # sign and then paste the anchor link name you copied (like #the-uo-duck) in the step above and click the Save button.
Adding Anchor / Jump Links to a Different Page
To create anchors on a different page you cannot use the dropdown options listed above, you will have to manually copy and paste the anchor link information:
- Copy the anchor name on the page where your link will go, which should look something like "the-uo-duck" or "class-12345.
- Go to the page where your link will be coming from and click your cursor on the text that will be the link.
- Click the Link+ icon
on the right side of the Content Editor menu and type in the name of the page that has the anchor link, then add # followed by your anchor name.
- As an example, an anchor jump to this section from an outside page would look like this:
Back to Top Links
Often when you have Anchor / Jump links on your page you will also want to use a "Back to Top" link to allow your users to go back to where they were. To do this we have a template item that you can use:
Just place your cursor in an empty paragraph location and insert the template item from our Component Templates from the editor menu. The template item will look like this:
Making Edits to Links and Files
- With your cursor on the link you want to edit, click the link icon in the middle of the Content Editor menu:
- This will bring up a link menu where you can fill in a new URL, change the link type from a straight URL, an internal link to an anchor, or fill out the information for an email.
- After you make any changes, click the OK button to commit your changes.