Responsive design on the University website

If you shrink your browser window, you'll notice that under a certain width (768 pixels which emulates a tablet in portrait orientation) all of the content snaps to the same width. This makes the most important content easier to read on smaller devices and not too squished up.

You'll also see that the navigation changes from a horizontal list to a hamburger menu that when clicked displays the navigation in a vertical list. The image that appears in the right hand column on desktop now appears under the content in the main column on smaller devices.

• Main column: The piece(s) of content that help your visitor achieve their goal (whether that's text, video, form or link) should be placed in the main column, since this is the area that is shown first on all devices. 
• 'Right hand' column: It may be tempting to place important content in the right hand column as it can make it stand out more on desktop, but this would make it appear further down the page on smaller screens and therefore less likely to be seen. The right hand column should be used for content that supports the content in the main column but should always be related to it.
• Remember that all content on your responsive site should serve a purpose.

The exception to the rule

The call to action links  template can only appear in the right column and will appear at the top of the page above the main column on screen sizes under 768 pixels.  On larger screens it will appear wherever you place it in the right column. The reason for this is that the 'Call to action' template is for highlighting the most important links on a page when appropriate, and therefore needs to be the most prominent thing across all devices.

For more examples of our responsive templates in action on the live website visit these sites:

• Graduation
• Grand Challenges
• Doctoral College
• Grounds and Gardens
• Commercial, Residential and Campus Services
• Sport

Demo pages are also available to view:

• Example home page
• Text with accordions
• Text with tabs (full width)