Layout framework

Any deviation from the standard ANU framework must be approved by the Brand and Marketing Services Team.

The image below is a demonstration of what a standard ANU-DP9 webpage should look like. Please note, this is a high-level framework layout, you can navigate through our Web style guide and apply ANU style classes to customise your webpages.

Standard ANU website framework layout (click to enlarge).

1. Site header

The style for the site header will be determined based on the brand category. If you are unsure about the category, please reach out to the brand team via Service Desk.

2. Menu area

Main menu navigation should appear on a black background with white text links. Navigation items should be right-aligned. While hovering on a menu item, a tinted boxed drop-down menu will show up.
*For sites that require a secondary menu, e.g. ANU gateway site, school/college sites., it should be placed in the 1. Site header section. Take our gateway site as an example.

3. Banner

Banner is an optional element, but we encourage you to include a banner section for at least primary/secondary pages. Recommended readings:

4. Content area

Please go through our Web style guide and use your creativity to layout your content. But as an overview, ANU websites are structured based on a 12-column layout. You should familiarise the Grid layouts before you start to make webpage designs.

ANU masterbrand/sub-brand/ANU-led co-brand websites should all follow ANU style guide, and should all pass web accessibility (WCAG 2.1)check.

5. ANU footer

ANU central footer should be added to all pages for compliance purposes. To add a central footer, please refer to our release document. Sub brand websites have the option to have an secondary footer to highlight in page navigation