Sidebar Style Guide Contents

• What are sidebars
• Sidebar benefits
• When *not* to use sidebars
• Sidebar components
  • title, body content, link, name attribution
• Components not to use
  • "raw" hyperlinks, images
• Sidebar Content Guidelines

---

What are sidebars

A sidebar is a page component which is used to give related information about the page it's on, and the information can be related to the main content in many ways. Examples of sidebar content are other web sites to visit, phone numbers for departments which are talked about, or files to download.

Sidebars aren't large expanses of text. To be most effective, the amount of information should be limited to a few sentences. This is because sidebars work best when they can be read at a glance ( see the above image for an example ).

Sidebars are optional, but they are highly recommended because they can enhance a visitor's experience when used correctly. To get the most out of them, their use in the site should be discussed early in the planning process for any new pages.

After you've read through this style guide, see how easy it is to Add A Sidebar To A Page. But, please, finish this guide before attempting to add a sidebar. As with this guide and the other Style Guides which cover different aspects of the web site, it's very important to follow these guidelines to ensure consistency between the pages of the web site.

Sidebar benefits

Like images and pullquotes, sidebars can draw people into the site. However, sidebars can provide other information the other ones can't - the information they provide can be related to the page content in various ways and can provide starting points for other exploration. The following list of possible sidebar content is not necessarily comprehensive, but will give many examples of their benefits.

• Sidebars can entice visitors to read the web page

  As a result of our media-enhanced society and being visual beings, we are automatically drawn to those things which stand out visually. Images, pullquotes, and sidebar-like components are generally looked at first. If they prove interesting enough, readers are more likely to read the main content.

• Sidebars can offer quick, "post-read" access to important information

  Sidebars might include phone numbers or web site addresses which can be found in the content body. Having this information also available in sidebars puts pertinent information in an easy-to-find location. This can save returning visitors time when they are searching for information.

  ( *see the Portfolio credits page an example* )

• Sidebars can offer new information not on the page

  Besides re-stating information on a page, they can also be used to give a lead-in to information not included on the page. They might include links to videos or other related web sites.

  ( *see the Portfolio section or the page on senior capstones for examples* )

• Sidebars can be used for small chunks of information

  There will be times when a snippet of information should be shared, but isn't large enough for its own page. This might be a quick statistic or simple phone number. It can even be a quotation from a person.

  ( *see the page on diversity in the classroom for an example* )

When not to use sidebars

Perhaps contrary to the picture painted above, sidebars are not the Holy Grail of page components. They can also hurt web site usability rather than help if used incorrectly. Here is a list of when not to use sidebars:

• When there is too much information

  Sidebars work best when their content is small. They should be limited to just a few sentences - just enough to take in the information at a glance. If this is the case, you should consider placing the content on its own page.

• When there are too many sidebars

  The power of sidebars works when there are only a few of them. When there are more than three on a page, their effect diminishes drastically because they give the reader more information than they can absorb.

Sidebar components

Here is a listing of the sidebar components. Note that some are optional depending on sidebar content.

• title ( required )

  The title is likely the more important part of the sidebar. It tells the reader what kind of information they will find in the sidebar.

  It's important that the title be short, hopefully two words or less. Thus it should be brief. It should be informative and direct. It should not use language constructs which might prove difficult to understand for non-native speakers. Remember, the Internet is international.

  If you have a long title, consider breaking it up and putting the rest of the title in the sidebar body. See the example of how to Change The Sidebar Title.

• body content ( required )

  All sidebars should have some sort of content. Even if the purpose of the sidebar is to store hyperlinks, it should include a brief intro about them. ( eg, "These are the links to the main project" )

  ( *see sidebar content on this page for more information* )

• linking ( optional )

  Much care needs to be taken to properly name hyperlinks when they are included in sidebars. Not only are the words for the link important to entice readers to click on the link, but they must follow accessibility guidelines. ( for more information on accessibility, see the Accessibility Style Guide )

  ( see the Hyperlink Style Guide for additional information regarding the proper way to add hyperlinks. )

  Here are the guidelines for naming links for sidebars. The links should contain:

  • three periods ( full stops )
  • an action word
  • an object
  • a description

  template:

        ... action word + object
  

  good examples:

        ... see the stats
        ... read the report
        ... visit the site
        ... see an example
  

  better examples:

        ... see the survey stats
        ... read the President's Funding report
        ... visit Extended Studies' site
        ... see an example movie
  

• name attribution ( optional )

  Name attribution is only required when the sidebar content is a quote from a person.

  ( see the page on Name Attribution for proper formatting. )

Components not to use

This is a list of things not to include in sidebar components.

• "raw" hyperlinks

  Please use the structured text markup to properly include a hyperlink. Though simply pasting the URL into the text body will work, having a hyperlink on the page will create havoc with the page layout.

• images

  There are several reasons why thumbnail photos shouldn't be used in the sidebars:

  1. Sidebars should be kept simple

     KISS Principle - Keep It Simple Stupid

  2. Sidebars already compete for attention

     As page elements they stand out enough on the page without aditional "eye candy".

  3. Site is then too complex

     At this level of page design, it would be necessary to use raw HTML to include images. Using HTML would go against one of the major objectives of the Portfolio project - content can be edited by anyone. Using HTML raises the bar necessary for contribution and upkeep.

  4. It's difficult to get a good image

     Images contained within the sidebar would be very tiny. As we have found with the inside images on the Portfolio, it's hard to create an image which works well at a small size. At this extrememly small size, the objects in the images would be very hard to discern.

  5. It's difficult to size an image

     The people who work on the Portfolio aren't graphic designers and, as such, don't necessarily have a lot of skill in manipulating images. Like most people, this is not their main job and they have other stuff to do. Mistakes will happen.

     • When adding raw HTML, there isn't a way to ensure that images are properly sized. So if an image were uploaded which was too big the result would be disastrous to the page layout.

       This is not a hypothetical situation... this has happened on the project.

     • The amount of effort necessary to accomplish this is much greater than what will be returned in aesthetics.

Sidebar Content Guidelines

Though there shouldn't be a lot of content in the sidebar, it should be enticing and make visitors want to read more. It should be about three sentences or so. It should be a quick read, able to be taken in at a glance.

What content belongs in a sidebar? There are many things that could be used, but here is a list of ideas, themes, and questions to help the flow of solutions.

• Rationale

  Answering the Why question - Why did PSU do this?Linking to places with answers to the Why question.

  How does this relate to the unversities mission statement? Why is it important?

• Supporting information

  student portfolios, assessment data and charts

• Discussion and critique

  critique or interviews from faculty, etc.

  discussion boards - for discourse between faculty, students, the community, etc.

• Related links

  other types of information that relate to the topic - research sites, partners, etc.