There is a lot to know to add content to a webpage and it can seem overwhelming. Here are a few tactics to make your website more accessible, future-proofed, and user-friendly. These are small things you can do that have big payouts. No coding skill required!
As an author of a website, you actually have a huge impact on the usability and performance (load times) of your website. I define author as someone who adds content to a website on an intermittent basis and rarely delves deep into Drupal. These little things add up and make all the difference.
Use relative URLs
Our tool for adding links is called Linkit. You can search for other content in your website and it will automatically add the relative URL.
Relative URL example
For https://communications.oregonstate.edu/brand-guide, the part that comes after the domain name (communications.oregonstate.edu) is the relative URL.
So the relative URL is /brand-guide.
Why does this even matter?
Couple reasons. First off, if you put the full URL as the link and it’s an internal link (another webpage in your own website), and if that link changes, your link could break. If you use the Linkit autocomplete function, your link won’t break. (Unless the page is completely deleted.)
Secondly, if you are working in the dev site, then the full URL is a link to the dev site. If that ends up on your live site, your website visitors will end up on your dev site, which you definitely don’t want.
How to add a link
- In the CKEditor, type the text you want to turn into a link.
- Select that text.
- Click on the hyperlink icon. This example uses the body field for a Basic page, but this also works in Layout Builder.
- This will bring up the Add Link pop-up. In the top field, start typing the title of the content you want to link to. This field searches for Basic pages, documents, any custom content types you may have in your site, and groups.
- As you type, it will start showing suggestions. If you have a lot of content in your website with the same word in the title, then type the word that is most unique for the webpage you are trying to link to.
- For example, in the OSU Leadership website, there are many webpages, files, and media with the words “Board of Trustees” in the title. So, searching for those terms isn’t effective. I’d need to be more specific to find a specific webpage.
- For example, in the OSU Leadership website, there are many webpages, files, and media with the words “Board of Trustees” in the title. So, searching for those terms isn’t effective. I’d need to be more specific to find a specific webpage.
- Click on the suggestion or use the down arrow key to select the content you want to link to. (This is also a good reason to have uniquely titled pages as it will make working in the site much easier.)
- Once you select an item, it will change to the node number. Think of this as the permanent address of the webpage. That way your link will never break.
- Don’t add anything to the Title or Advanced fields. Unless you know what you’re doing with those fields, it’s best to leave them alone.
- Click Save on the modal.
Write meaningful link text
Click here! Learn more. Check this website. Read more.
These are common examples of poorly written link text. Link text should inform the user where they are going. Sighted users scan pages visually and are drawn to links to get a general idea of the content and if it matches the information they are looking for. Meaningful link text is also good for folks using screen readers, as they can scan the page by hitting the tab key to hear the link text. If the link contains no meaningful text, they have no idea where it goes and won’t understand what the page is about.
Well-written links are great for everyone.
Others have written extensively about how to write good link text. Here are a few:
- WCAG Blog: Writing Meaningful Link Text
- Nielson Norman Group: Writing Hyperlinks
Use headings appropriately
Headings aren’t just fancy decorated text. Headings provide structure to your page. Consistent and appropriate headings allow your users to scan your pages and get a good sense of what the page is about.
Think of headings as the main bullet points of your page if you were creating an outline. The title of your page should be heading 1. (There are competing thoughts on whether or not you should have multiple heading 1s, but that is a whole other blog post.) Any major sections of your page should be heading 2. A subsection of those sections should be heading 3, and so on. There are 6 levels of headings.
Headings example
This very blog post can serve as an example of how to use headings.
- A Few Best Practices for Authors (Heading 1)
- Use relative URLs (Heading 2)
- Relative URL Example (Heading 3)
- How to add a link (Heading 3)
- Write good link text (Heading 2)
- Use headings appropriately (Heading 2)
- Headings example (Heading 3)
- Resize and compress photos (Heading 2)
- Don’t open links in new tabs (Heading 2)
- Use relative URLs (Heading 2)
For our version of Drupal, we have styled the headings for brand alignment and accessibility requirements. If you try to write your own CSS to override only one heading, it will probably conflict with another heading and destroy the visual hierarchy. At worst, it will cause unanticipated issues with lack of contrast when placed on different backgrounds.
If your website differs from other OSU websites, that contributes to brand and user experience inconsistencies, which is also an issue for accessibility. Do not write your own CSS to override the brand theme. There is an example of all the headings in the Site Building Guide to see them in action.
Resize and compress photos
Resizing and compressing photos is essential for the load time of your webpage. There are plenty of things we can do centrally to ensure that the skeleton of the site runs optimally, but the most obvious to your users is how quickly images load. If you have a large image on your website, it can frustrate users
Resizing photos will make the file size smaller. Resizing means to reduce the total number of pixels for the photo width and height. I have written up some starting points for image sizes for common layouts. It’s difficult to provide a single size that will work for a given layout due to the photo composition and variations in layouts.
You can also compress the photo, which reduces the file size but doesn’t change the dimensions of the photo. There are a lot of of compressing tools out there. My 2 favorite are:
There are more details on image optimization in the Site Building Guide.
Don’t open links in new tabs
I know it’s tempting to set links to open in new tab to indicate to your users that they’re leaving “your site.” It’s easy for us internal folks to think of our department’s website as a different website from other OSU website. However, most of your visitors aren’t familiar with the minutiae of the structure of the university and consider it to be a single website. And generally, it’s not necessary to indicate to your users that they are leaving your website. If you write good link text, then your users will know where they are going anyway.
There are only a couple good reasons to open a link in a new tab:
- They need to fill out a form and reference information on a different page.
- They are leaving a secure part of a website. (This generally doesn’t apply to most of OSU webpages.)
Opening a link in a new tab makes it harder for keyboard-only users to navigate your site. They then need to switch between tabs, rather than simply hit the Backspace button to return where they were before.
It can also frustrate just about anyone who doesn’t want a bunch of tabs opened on their behalf. If you make most of your links open up in a new tab, a new user to your website trying to explore it, could end up with 15 tabs open.
Reference: W3’s Technique for WCAG 2.0. G200: Opening new windows and tabs from a link only when necessary
While there are plenty of other best practices for adding content to a Drupal website, here are a few to get you started.
