Webpage styling is important because it provides visual clues as to the function of the content website visitors are interacting with. The main idea behind doing webpage styling right is that it provides a visual framework for interacting with webpages in a way that is clear and consistent.

Below is a list of recommendations for how to style text in a way that brings emphasis when you need it while avoiding confusion.

Best Practices

The content's style should match its function

  • Using styles that mimic the look and feel of other elements while not providing the same functionality creates confusion for website visitors. An example would be using a text underline style as a way to bring emphasis to plain text on a webpage. This is confusing to visitors because in-paragraph links are denoted by a text underline, leading visitors to believe that any underlined text is a link. A solution would be to use bold or italics to denote emphasis in text.
  • Another example of content style matching its function is heading styles. Using Heading 1-6 styles adds functionality to the page because it wraps the HTML element in <h1>, <h2>, <h3>, <h4>, <h5>, or <h6> tags. These tags denote that any text contained within are section headers and begin a new section of content. This is a core method of navigating webpages when skimming visually or using a screenreader. It is confusing to visitors when Headings are used to bring emphasis to text that is not a section header.
  • With the button style being the primary method of visually cueing visitors to links outside of paragraphs or links lists, it is recommended that images not be used as links. It is no longer a best practice to use images as links, and visitors no longer expect that images would be links. 
  • Tip to remember: When styling, ask yourself if the element you are styling looks like what its function is. If the function is obvious, it has been styled correctly. 

Consistency in styling helps visitors navigate 

  • Webpages in OU Campus are provided templates to maintain consistency across the ATU website. This helps visitors navigate because they always know where the main navigation is located and that subnavigation of office or department sites are at the top of the Main Content of the page (in the "hamburger" menu). 
  • When styling your webpages, look at how other ATU websites handle styling and make sure your site provides a consistent experience for visitors who view multiple sites. A single task a visitor might have could involve multiple offices, so being consistent helps visitors accomplish what they came to the website to do. 
Clear content beats fancy styling

  • Visitors go to websites to accomplish specific tasks. The cleaner and clearer your content is, the easier it is for visitors to accomplish their tasks. When styling webpages ask yourself, "Is this style helping visitors find what they are looking for?"
  • Pages that might look boring to you, but have clear headers, supporting text, links, and calls to action, are going to win for visitors every time - because they can quickly scan the page to determine if the content will help them accomplish their task. 
  • Images can help with visitors accomplishing tasks, but image inclusion must be looked at through the context of the content itself. Images can enhance content and give it emphasis, but only if the image is selected with that context in mind. Many images are used purely for decoration and do not provide additional context. When including images on pages, consider what the image adds to the page. If it is only adding decoration and no additional context or function, consider leaving it out in favor of clearer content.