Style Guide

Page types

Content and component rules for a selection of website pages.

Standard content page

Our standard page layout has two columns:

  • a body column (on the left, 5/8ths width)
  • a side-bar (on the right, 3/8ths width).

When viewed on a tablet the two columns become half-and-half. When viewed on a mobile both columns take up 100% of the screen width, with the body column stacked on top of the side-bar.

All primary and/or important content should be placed in the body column to ensure visibility across all device types.

The side-bar should only be used for supplementary information or to provide further options for the reader, and should not be relied upon to convey important information. 

Examples of what can be placed in the side-bar include:

  • images
  • calls to action (e.g. enquiry button, prompt to subscribe to a newsletter)
  • download links
  • key dates
  • testimonials
  • contact information
  • relevant news and/or event listings.

A well (blue box) is often used in the side-bar to highlight text content. A variety of other components are also available for the formatting and presentation of content within the standard page layout.

Content which needs to be located in the sidebar but also remain prominent on mobile (e.g. an enquiry button) can be accommodated – please discuss with the Digital Marketing and Communications Coordinator.

Home page

The home page uses a special, one-off design.

  • Study with us promotes course and campaign content, and is updated manually in HTML.
  • News and events highlights recent news and upcoming events, and is based on an asset list of news and event items. The asset list is curated by the Communications and Events Officers.
  • Current research projects automatically displays and links to research projects located under the Projects page.
  • Get involved promotes community and engagement content, and is updated manually in HTML.
  • More provides a final way of navigating to other areas of the site. It is based on an asset list which reflects the main website navigation. It is kept up-to-date automatically.

Elements of the home page design should not be implemented elsewhere on the site without first consulting the Digital Marketing and Communications Coordinator.

Second-tier landing pages

Second-tier landing pages (e.g. Study with us) act as a landing point for each major section of the website. Their layout is designed to introduce visitors to the section and encourage content exploration.

Required components:

Optional components:

  • A side-bar well can be used to add related information.

If a side-bar is used, the page should utilise a standard page layout with the page preview navigation located in the main column. If no side-bar well is used, the page preview navigation should span 100% of the page width.

Third-tier landing pages

A third-tier landing page is used only once for Current Students section. Most current students information is accessible via the central Current Students site http://students.unimelb.edu.au/

The information in the MGSE Current Students section is highly specific to MGSE.

Courses page

The courses page lists all courses offered by the Melbourne Graduate School of Education. Courses are grouped by theme, and are filterable by qualification level to allow easy browsing.

The page uses a special, one-off design which is based on the University of Melbourne filtered listings component.

Elements of the course page design should not be implemented elsewhere on the site without first consulting the Digital Marketing and Communications Coordinator.

Course landing pages

Course landing pages use a standard page layout, however their content needs to be displayed in a specific order.

Body columnSide-bar
  • Enquiry and brochure download buttons
  • Relevant event alert
  • Delivery mode
  • Fees table
  • Student testimonial
  • Related courses.

Course landing pages are updated in July/August each year based on course brochures produced by the communications team.

Images

The main image on a course landing page should be:

  • 300x200px
  • floated right alongside the introduction paragraph
  • the same as the image on the front cover of the course brochure.

Tabs

Many course pages contain information about more than one course, or different streams of the same course. On such pages in-content tabs with enclosed panes may be used to separate out comparable course information.

Fees

Each course landing page has a fees table which shows the fee places available for that course.

The headings in each column link through to central university web pages which define and explain each fee type.

How to apply

How to apply content is nested on each course landing page.

There are several ‘blocks’ of how to apply content in Squiz. The blocks are nested on the course pages they are relevant to – for example, a Master of Teaching block is nested on all Master of Teaching pages (as they all share the same application process).

All blocks are also nested on the how to apply page.

This system allows for easy updates to application content, as it is all housed in one central place in the back-end while appearing in several places on the front-end.

Related courses

The related courses section lists all courses which appear under a specific theme. Themes are defined on the courses page (e.g. Arts, history and languages).

Related course lists are created using an asset listing:

  • A nested content container is created at the bottom of the side-bar on each course landing page
  • The related courses asset listing (id: #2050877) is saved as nested content
  • Under ‘toggle additional options’, a variable is set:
    • Variable name = rootnode
    • Variable value = (asset ID number of relevant theme folder, under Courses > Related Courses – Links).

A related courses redirect also needs to be created under the relevant theme folder each time a new course landing page is created.

Events page

The events page and Dean's Lecture Series page use special design.

Breadth Page

The breadth page uses special design one off design.

Pages with embedded content

Pages which have an embedded iframe as their only content may forgo the standard page layout in favour of the iframe being 100% of the page width.

Example of this include the shaping minds, shaping the world map and our nexus enquiry forms.