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.
| Template | Function | Can 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 Tabs |
| 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 Tabs |
| 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: