Edit site style
This article is for IT Services and digital marketing staff who create or edit site-wide designs. It lists the references and common standards for implementing a website at Warwick.
In this article:
Edit a site style
-
Browse to a page in the site whose style you want to edit.
-
Go to Edit > More:
-
On the Current site tab, select Edit site style:
Note: Only users with admin permissions on a site can edit the site's style.
Brand compliance
- All Warwick sites must follow the ID7 common website template guidelines.
- Requests to display logos, such as funding bodies or project partners, in the footer require approval from the Engagement Group's Head of Digital Product.
- Unique designs for sub-sites or the creation of a sub-site require approval from an administrator of the parent site.
- Hex codes for the Warwick brand colour palette are on the brand portal.
Accessibility
Site designs must meet the level AA success criteria of WCAG (Web Content Accessibility Guidelines) 2.1. Refer to the W3C's quick reference guide for techniques to meet the criteria.
User interface elements and icons
Use UI elements from Bootstrap v3.3.7. See examples on the Bootstrap test card.
For icons, use Font Awesome 5 Pro. SiteBuilder's Components Editor lets you add icons to your pages quickly and easily.
CSS/LESS
- ID7 LESS variables you can use in site designs
- Useful classes for equalising height and making images flush to edges
Graphic designer's QA checklist
- The masthead background image is 1170 × 110 pixels and less than 100 KB.
- There is sufficient contrast between the utility bar link text and the masthead background image.
- The left- and right-hand border images are 375 × 1200 pixels. No white borders – there must be a distinction between the white centre content background and the border images.
- The key elements are in the borders' essential image area (280 × 700 pixels).
- Aim for a maximum total of 750 KB for the masthead and page border images.
- The brand colour's lightness value is between 20% and 40% in the HSL colour space.
- There is sufficient contrast between text and background colours.
- Specify the colour for the navigation and footer. The navigation defaults to the site's brand colour; solid footers default to grey.
- Specify the footer style: solid colour or line.
Implementer's QA checklist
- All styles on the content test card – headings 1 to 6, links, box styles, and so on – are readable and have sufficient contrast.
- The site design renders as intended in all supported browsers.
- The site design renders as intended at all responsive breakpoints. The short and ultra short site descriptions display sensibly at all screen sizes.
- The design prints sensibly – check the home page and a sample of sub-pages.
- If you made any changes to the original design, has the graphic designer approved the final version?
- Check the home page load time using tools.pingdom.com:
- Ensure that the page loads in less than 4 seconds
- For important pages that target an international audience, test the page load time from several countries outside the UK
- If the page load time exceeds 4 seconds, revisit the page content and site design
- Ensure that the Google Analytics tracking ID is in the site properties before going live. When you copy a site, the tracking ID isn't copied in site properties.