Design and Layout

Graphic visualizing design and layout for the web 

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. If you would like to set up a training for someone in your department who needs to learn our Drupal system or needs help with design and layout, please complete the request form and select training.

Ask for Assistance   Request Drupal Training


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 is visual indicator
    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 eaiser 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.

Web Color Palette


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

  1. 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 mobiles 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.
     
  2. 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.
     
  3. 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.

Additional Information

Adding Links in Drupal


Fonts on the Web

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—Quadon 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.

For body copy and general text, we use a sans-serif typeface called Open Sans. For titles and headers, we use Quadon, a serif typeface.

Quadon

The serif Quadon font is primarily used in headers and titles, but can also be used in body copy on marketing pages.

Graphic of the Quadon font

Graphic of the Quadon font

Graphic of the Quadon font

Graphic of the Quadon font

Open Sans

The san serif Open Sans font is primarily used in body copy, but can also be used in headers and titles on websites that don't have the Quadon font.

Graphic of the Open Sans font

Graphic of the Open Sans font

Graphic of the Open Sans font

Graphic of the Open Sans font

Typography in Web and Digital


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, or 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 in 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 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 continue 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 work with 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.

Suggest a Design Component or Template


Design and Layout

To help keep a consistent look and feel across the division, we recommend choosing from a few design templates for certain pages.

Website Homepage

Screenshot of the Advancement homepage

Website Homepage

Screenshot of the Media Relations homepage

Basic Page

Screenshot of the Academic Affairs Sabbatical page

Basic Page

Screenshot of Connect Mind & Body page from UGS

Staff Directory

Screenshot of the Board of Trustees staff directory

Staff Directory

Screenshot of the Academic Advising staff directory

Staff Directory

Screenshot of the UO Experts page

Staff Directory

Screenshot of the Advancement staff directory