University common website template
All SiteBuilder pages are based on the University's common website template. While there is some scope to customise website designs and page layouts, it's important that all University websites are similar enough so that you can recognise you're on a Warwick web page and can understand how common elements such as navigation and search work.
The main features of the common website template are:
Responsive content
The width of the centred zone expands and contracts responsively (to a maximum width of 1,170 pixels) according to the width of your screen. This ensures that the website displays optimally when you view it on a large desktop monitor, laptop, tablet, smartphone or other small-screen device.
As you move from one site to another every mandatory element appears in the same place, even if its colour or style changes.
Appearance on desktop
Appearance on mobile
Masthead
The masthead at the top of the page contains:
- The University of Warwick logo, which links to https://warwick.ac.uk/
- Utility links relating to the entire University website (Cookie preferences, Notify, Edit, sign in).
- A search box that returns results from the entire University website.
- The current site title – this is shown on all pages on the current site and links to the current site's home page.
The utility bar (the thin strip at the top containing sign-in and edit links) and the window device are transparent, revealing the image behind them. This masthead image is set in the site style. It must tie in with the page borders and site colour palette, and provide sufficient contrast for the utility bar link text and window device to display clearly. Avoid detailed or distracting imagery - see the examples below:
The word ‘WARWICK’ in the logotype is a solid colour. This colour can vary per site.
For unbranded sites, or co-branded sites where Warwick is a partner with other organisations, you can vary the usage of the logotype. You must agree variations with the External Affairs team before starting web design.
The masthead layout is identical for all sites. The whitespace is deliberate; you can't add any extra elements or your own content to the masthead.
Navigation
The local navigation menu is displayed throughout your site as a horizontal bar above your main content:
- Primary navigation: Pages directly beneath your home page, which represent the main sections of your site, display as tabs in the primary navigation.
- Secondary navigation: The second row displays the current page and the page(s) above it.
- Tertiary navigation: The third row lists any sub-pages of the current page which are set to display in local navigation.
This persists throughout the site so you can navigate to main sections no matter where you are in the site, and when you create new pages, the local navigation updates automatically.
Note: Hover over a tab (marked with ) to see a drop-down list containing links to any sub-pages which are set to display in local navigation.
The navigation colour palette for each site is based on one of the approved digital colours within the University's brand. These colours provide the necessary contrast to comply with accessibility legislation.
Page content
The main part of a page, containing text, images, and other content.
Typography
Websites in the ID7 template use the Lato typeface. Do not use fonts other than Lato. Font sizes are predefined in the ID7 template. You should use the default font sizes; only override the defaults in exceptional cases.
Heading colours are derived from the individual site's colour palette. Body text is black (#383838).
Text is flush left (also known as right ragged). Do not use fully justified text.
Hyperlinks must always change state when hovered over.
Layout
With SiteBuilder's Components Editor, you can add and arrange text, images and other components to build your page exactly how you want it to look. We also provide a range of ready-made page layouts to choose from.
In the old visual editor, you can divide the page into one or two columns of different sizes, or use the Bootstrap grid systemLink opens in a new window to create your own layouts with multiple columns and rows.
Background
The page content background must be white and provide sufficient contrast between text and the background. Link colours can vary between sites. However, link colours must be chosen with regard to the site colour palette design and must provide sufficient contrast in all states (active, hover and visited).
Page borders
The page borders – the areas at the left and right of the centred zone – are designed per site. The left and right border images are 375 pixels wide and 1,200 pixels high. Note that on displays wider than 1920px or taller than 1200px, border images will scale (so they do not need to fade to a solid colour or tile).
The borders can contain photography, colour or abstract imagery – but should not distract attention from the page content itself. Imagery similar to the borders is also used as the masthead's background image, and will show through the transparent utility bar and the window device in the masthead.
In ID7, we don't use drop shadows or lines to separate page content from page borders, so instead, to provide that separation, border images should use a background colour other than white. There should always be clear separation between the page content and the borders.
For advice on sourcing or choosing suitable images for page borders please contact the External Affairs team.
Footer
The footer has two parts:
- A custom footer that is displayed on every page in the individual website. The content is flexible. It typically contains information that needs to persist through a site but isn't important enough to be part of the navigation – contact details, staff intranet links and social media icons, for example.
- A common footer displayed at the bottom of every University web page. This contains the page contact, most recent edit date, links to copyright and privacy statements, and the window device.
The footer is styled to match the site design. There should be a clear demarcation between the footer content and the page content but it should not distract from the page content.
Important: The footer should not be used as a replacement for navigation. The most important sections of a site should always be reflected in the navigation.