If you run into a problem, have questions about how something works, or have questions about functionality that is not covered, email webservices@uoregon.edu to ask for assistance.
Colored Text on the Web
Best practices say you should limit the use of colored text on websites. Here are some of the reasons why:
- Colors on the web are visual indicators
For example, if all links are green, the user will assume that all text that is green is clickable.
- Too many colors can be confusing
If you start changing up colors or adding multiple colors on a page, it can confuse the user about what is a link and what is not.
- Less color is more effective.
When everything is emphasized, nothing is emphasized. Using color to only showcase one thing makes that one thing stand out more. Users scan for headers and links. By making links green and underlined, they are easier to identify.
- Color CANNOT be the ONLY indicator of importance or functionality.
Approximately 253 million people live with visual impairment according to the World Health Organization. More than 10 million people are unable to perceive color differences.
One of the most common types of color blindness is difficulty distinguishing between red and green. Since we use green to indicate links, using red to show importance could cause some users to mistake the red text for a link.
For someone using a screen reader, color is not read aloud, so using color as an indicator of importance is inaccessible to that audience.
Linking to a New Tab vs. Same Tab
If you’ve ever googled something along the lines of “should a link open in a new tab,” you know that this seemingly minor detail is a major topic of debate in UX communities.
Although the debate continues, we recommended that for all University of Oregon websites links open in the same tab.
Opening links, whether they are to the same website or another, in a new tab can pose a variety of issues for users, especially as web traffic from mobile devices continues to increase.
Reasons to Open Links in the Same Tab
- A mobile-first perspective
According to Statistica, 52.2 percent of worldwide website traffic was generated through mobile phones in 2018. Given the small screen size of mobile devices, it can be difficult for people to navigate between tabs and can create confusion if a user doesn’t know a link just opened in a new tab.
Having links open in the same tab reduces the chance of mobile users getting lost or unable to locate a previous tab. Opening in the same tab also keeps the “back button” as an option for users to return to the previous page, which they wouldn’t be able to utilize if they were in a new tab and maybe didn’t know it.
- Accessibility
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.
- Gives users control
If a user prefers that links open in a new tab, they can open the link in a new tab using a right click or by continuing to press down on the link on a mobile device. This option is always available to users no matter how a link is set to open.
However, it doesn’t work in reverse. If a user prefers for links to open in the same tab, but the link is set to open in a new tab, the user is forced to adapt to this linking behavior or they can leave your website.
Keeping links set to open in the same tab allows users of different preferences to engage with your website in the way they like best.
Exceptions
The only time it is recommended that you open a link in a new tab is when opening in the same screen would interrupt a process (e.g. when a user is filling out a form or viewing a video).
Linking in the same tab or screen in these situations could cause the user to lose the work they’ve done or have to start over. Linking to a new tab in these cases can help the user find additional information without causing issues or forcing the user to start over.
Stay Consistent
A critical part of user experience is maintaining a mutual understanding and expectations for what it means to interact with a website. If a user clicks on a link, they shouldn’t be surprised by what happens.
Maintaining consistent link behavior throughout your website helps your users know what to expect when they are navigating through your website.
Fonts on the Web
Our web fonts include three key typefaces: United Sans Regular, United Serif Regular (both for headlines), and Source Sans Variable (for body text). University Communications has a license for all .uoregon.edu domains and the font is now included in the official University Drupal 8 and 9 theme, Cosmic. If you are unable to use this theme or license, we suggest using Source Sans as a replacement font.
Web and Digital Typeface Brand Guidelines
Web design best practices say that you should limit your website’s typography to 2–3 fonts at most. Here are a couple of reasons why:
- Consistent typography helps usability
Using the same fonts for elements that serve the same function helps users easily identify those elements and know what they mean. Using one font for all body copy and one font for all headers helps users know what those fonts represent and makes scanning the page for information much easier.
- User fewer fonts
Using too many fonts, or using them inconsistently—on the same website or over multiple similar websites—can lead to confusion and decreases usability. Sites should be limited to our two official web fonts—United and Open Sans.
- Limiting fonts increase web speed
All of our websites share the same code base ad functionality. Adding a single font to one website would mean adding it to ALL of our websites. And unlike Microsoft Word, which comes pre-built with a list of fonts, the web doesn’t come with pre-built fonts. So, the more fonts we use, the more fonts we have to provide every user. That increases the time it takes to load a page, which is especially bad on mobile devices.
Responsive Design
Imagine having to design a brochure that people print out themselves. And you need that brochure to print out perfectly for everyone every time. That brochure may look great for you when you print it on your printer, but what about for everyone else?
You don't know if they are going to be printing your brochure on a postcard, on a regular sheet of paper, or on poster paper. And you don't know if they have a color printer or a black and white printer or a dot matrix computer. Or if they are going to print it out vertically or horizontally. How hard would it be to get it right for everyone, every time?
That's the basic philosophy behind responsive web design. Creating websites that automatically adjust according to your users' behavior and device rather than requiring them to change based on yours.
Benefits of Responsive Design
Rather than having to create and maintain a separate "mobile" website, our sites use flexible templates that “respond to” or resize depending on the type of device, screen size, or orientation your user is using. So, from a widescreen desktop monitor to a 4-inch smartphone screen, our sites are designed to look good on every device every time.
Having responsive, mobile-friendly websites increases usability because the information is more easily visible and it works well regardless of the device they are using. It also saves time and effort since there is no longer a need to build and maintain separate websites for different devices.
In 2013, web traffic on mobile devices surpassed web traffic on desktops for the first time. And as mobile traffic continues to increase and the size of mobile devices continues to evolve, having a site that works on a device of any size becomes more important.
Having more mobile-friendly websites also helps increase search engine results. In 2015, Google added mobile-friendliness to how it determines how it ranks search results, and the more mobile-friendly, the better your search results will be.
Disadvantages of Responsive Design
With all of those advantages come a few disadvantages. Because every item on your website needs to respond appropriately, there may be some limitations on your ability to completely customize your design.
In order to ensure your site is responsive, we provide pre-built components that are available to everyone using a site we manage. You will need to work within this framework when designing your site. While our components allow for a lot of customization in how they are used, there are some limits to what we offer and how much those components can be altered.
The good news is we are always expanding and updating the components that we offer. So, if you see something that you think is missing, or have an adjustment you would like to see made to an existing component, we want to know about it. Just email us and let us know about it and we can work to try and fill your need with the solution that is the best for everyone.