Skip to main content
This website is responsive!

This site is a live demo of our approved responsive templates. The best way to test responsive pages is to visit them on various devices with different sized screens.

Building responsive websites

This website is a learning tool and reference point for T4 users who need to maintain and update existing responsive websites. If the pages you look after are in the old (non-responsive) style, please refer to the web support pages. To discuss moving a site over to responsive templates, please contact the Digital Team.

In the process of moving to a responsive design for your site, the content should have been stripped down. This is because the goal with a responsive website is to deliver less website. By paring down the content to essential information, users can quickly get what they need.

This section provides some of the context and technical information that you need to be aware of before you start building a responsive website.

In T4 there is a template group called Approved responsive templates that contains all of the responsive templates that you need to build a website. These templates have been tested and are all compatible with each other so please ensure you only use templates from this group.

Each of the template pages listed below includes instructions on how to use them, guidelines on when they should be used, the type of content they can display, and examples of them in use. 

TemplateFunctionCan appear:
Acc: www page Set page layout, hide breadcrumb and right nav, insert rich text Main column
Accordions Break up content into vertically stacked boxes Main column
Tabs Break up content into tabbed interface Main column
Profile gallery Display a group of profile photos and associated text Main column
Highlight content panel Highlight: text, quotes, YouTube videos and images Main column
Right column
Feature boxes Highlight key site features on home and landing pages Main column
Carousels Display multiple scrolling images or single images Main column
Video embed Embed YouTube videos Main column
Right column
Call to action links Draw attention to up to three important links on a page Right column
Generic highlight button Draw attention to one important link on a page Right column

Here are some example pages to illustrate how the templates can work together to build site.

Sites can be amended with coloured CSS styling applied to them. Please contact Web Designer your College/service Web Officer to use page layouts with additional CSS styling. Some of the live University responsive sites, which have additional styles applied include: