Right hand navigation

Need to show examples here and how to guide

Right hand content blocks allow you to display links to key areas within the relevant web section. They allow you to provide users with a visual icon to direct them to other areas of the website.

The content blocks should be consistent for the section that the user is currently navigating to avoid any confusion. Content blocks can vary in size depending on the web page template you are using.

Dimensions

Single column content block: 108 x 108 pixels or 108 x 216 pixels

Two column content block: 216 x 216 pixels or 216 x 108 pixels

Three column content block: 324 x 324 pixels or variations of the above.

Content

Each content block should contain a background image and some anchor text which shows the person where the link will take them. The text should be preceded by a small arrow icon.

The image should also be described for screen readers in the alt tags and should tell the user where it will take them if clicked.

Avoid using too much copy within the content block. For a single column block, we recommend a maximum of four words.

Images

You can use the image resizing tool to create the correct image size for single column blocks. This will also create a greyscale version for when people hover over the block.

If you do not have a suitable image, you can select a colour from the University colour palette.

Greyscale

When you add a content block, the roll over should always go from colour to greyscale. You can do this by setting black and white in the adjustment menu.

Navigation

The right hand column should not be used to set up a secondary navigation bar. The only navigation should be the left hand navigation and the right hand column should only use content blocks.