External Relations
   
   
  

Column layouts

Scroll down the page to see examples of the following column layouts:

  • 2 columns 15/85
  • 2 columns 25/75
  • 2 columns 30/70
  • 2 columns 50/50
  • 2 columns 70/30
  • 3 columns 30/30/30
  • 4 columns at 25%
  • 5 columns at 20%
 

2 columns 15/85

15% column

This column is often used for numbers and dates.

85% column

This column has been used for information that corresponds to a number or date in the left column.

An example of this being used can be found on the Malaysia 10 website.

 

2 columns 25/75

25% column

This column is often used for numbers and dates or general titles.

75% column

This column has been used for information that corresponds to a number or date in the left column.

An example of this being used can be found on the Human Rights Law Centre website.

 

2 columns 30/70

The most common use of the 2 columns 30/70 mini template is at the top of the page where you have a summary of what that page/website is about and a large image to the right.

The text in this column should not go past the bottom of the image on the right.

Any additional text should be added beneath this mini template.

 

2 columns 50/50

This mini template works really well on pages where you have a fair amount of text and an image to accompany it. The about the University page has used this with the Vice Chancellor's Welcome.

The University structure page demonstrates a slightly different approach.

 

2 columns 70/30

This is the most commonly used mini template and exists nearly 4000 times across the University website as a whole. Its main use is to have general content and imagery in the left column and important links in the right column like with the Faculty of Engineering. It has also been used to show images in the right column for page decoration. An example of this can be seen on the Jobs website.
 

3 columns 30/30/30

3 columns are often used on homepages to display news, events and useful links. An example can be found on the Department of American and Canadian Studies website.
It isn't uncommon for a 3 column layout to be used as a route to more information. Research and Knowledge Transfer demonstrate this really well.
 

4 columns at 25%

The 4 column mini template isn't used much on standard pages but works really well on full width pages.
The web team have used this mini template on their homepage.
The Children's Brain Tumour Research Centre website uses a full width homepage and 4 columns works nicely.
 

5 columns at 20%

5 columns are the least used mini template on the University website.
That is because the columns are very narrow.
The main use is to show partnership logos.
 

 

University of Nottingham

University Park
Nottingham, NG7 2RD

telephone: +44 (0) 115 951 5151
fax: +44 (0) 115 951 3666
email: enquiries@nottingham.ac.uk