Page layout guide

The ins, outs and business rules for page layout and components on WorkSafe's websites.

Last updated

Monday 15 Jun 2020

About this page layout guide

This guide is an absolute must read for anyone writing for WorkSafe's websites. Even if you're the most talented and experienced website content writer, you still need to understand how WorkSafe's websites are put together and what good page taxonomy looks like.

Content types

This website has six different content types, plus directories and web apps. We'll take a look at the four most common content types at a high level, so you understand how each one works. If you're not sure what a content type is, think of it as a template that serves a specific purpose. It has a defined number of components available to it to keep the {JSON:API} application programming interface payload nice and light.

  1. Collection page: a page for navigating
    1. Page: a standard page of content
      1. Long page: a page with anchors (like the one you're reading)
        1. Resource: a cover page for an attachment (PDF, DOC, XLS)

          Collection page

          Collection pages sit near the top of the WorkSafe information architecture hierarchy like this: 'Home > Collection page > Page'. It's the parent to a page.

          Collection pages are a navigation element that helps people find the page or resource that contains the content they're looking for. They're the pages full of cards with a Netflix style swipe action.

          There's a temptation to fill collections with content (industry and topic pages are the main offenders), but that's not what this content type is for.

          A good collection page has between 3 and 5 rows (or collections) each containing between 3 and 6 cards. Not too many, but just enough to present a good amount of options, without being overwhelming to a website visitor.

          Each collection should have a descriptive heading for usability and search engine optimisation (SEO).

          Collection example

          Page

          This is your standard content page. It's a full width page that should be used for 95% of the content you create.

          In the WorkSafe hierarchy the page sits beneath a collection, like so: 'Home > Collection page > Page. It's the child to a collection page.

          The page content type has every available component... around 70 including variations. It's the content type used to present standard information, marketing pages, product pages and web apps.

          Page example

          Long page

          A long page looks similar to a page, but with far fewer components. A long page is narrow (8 columns) whereas a page is full width (12 columns). That's because long page has a sidebar containing anchor links for in page navigation.

          In the WorkSafe hierarchy the long page also sits beneath a collection, like so: 'Home > Collection page > Long page. It's the child to a collection page.

          The narrower column width means that full width components like video grids, marketing banners and big imagery are not available to this content type.

          As the title suggests a long page is used to present... long pages of content like guidance material.

          Long page example

          Resource

          A resource page is a cover page for a file like PDF, Word (.doc) or Excel (.xls).

          In the WorkSafe hierarchy a resource sits beneath either a collection, a page or a long page, like so:

          • Home > Collection page > Resource
          • Home > Page > Resource
          • Home > Long page > Resource

          The resource page is good for accessibility and helped WorkSafe become Web Content Accessibility Guidelines (WCAG) 2.1 AA certified. Most PDFs aren't accessible, but the resource page they're attached to is. This means a person using a screen reader is able to understand the summary of a PDF before they download it.

          It's still a better idea to produce a web page instead, but sometimes it's necessary to upload a file to the WorkSafe website. The resource content type allows that.

          Resource example

          Headers

          The header is the top section of a website. At WorkSafe the header includes four main features:

          1. Navigation (mega menu)
            1. Breadcrumb
              1. Title and subtitle
                1. Share, print and bookmark

                  Different content types use different header styles, but it's fundamentally the same thing. The four header styles include an optional call to action button.

                  Standard header

                  A plain white header with a chevron element. This is the default header that most standard pages across the website use.

                  It's simple and doesn't distract from the content.

                  Standard header example

                  Collection header

                  A medium sized header with a grey background on the left, and an image on the right.

                  Only collection pages (eg industry, topic) use this header. A smaller version with reduced vertical height is occasionally used for children of the collection page to show they are part of one family.

                  Collection header example

                  Product header

                  A medium sized header with a white background on the left, and an image on the right. It works best when the image has a transparent background so it displays like it's floating on any coloured background.

                  Only product pages (eg WorkWell) use this header.

                  Product header example

                  Marketing header

                  A large sized hero header with a full screen image takeover. It's used when visuals matter most.

                  Only marketing campaign pages use this header.

                  Marketing header example

                  Let's deconstruct the header

                  1. Navigation

                    The first and most obvious element in the header is the mega menu. It contains level 0 (eg 'safer workplaces'), level 1 (eg 'safety topics') and level 2 (eg 'asbestos') navigation. It's designed based on two years of user observation, feedback, analytics, business needs, and a little bit of assumption. Multiple iterations were user tested with Treejack, and what you see today is the result.

                    Naturally it will iterate again in the future, but right now it's set.

                    Can you add new items to the mega menu? Not without a very compelling user need, months of research, weeks of redesign and quantitative testing with hundreds of users.

                    Mega menu open to level 3

                    WorkSafe mega menu example

                  2. Breadcrumb

                    Breadcrumbs help you find your way home. Or help you find your parents. Think Hansel and Gretel.

                    WorkSafe's websites have a flat information architecture, which means the URL pattern is only ever one level from home:

                    Like this ... gov.au/your-page (not ... gov.au/your-page/another-page).

                    That means we have to do breadcrumbs differently. The parent/child relationship is manually assigned based on best fit.

                    Level 1 breadcrumb: Home is the parent

                    This breadcrumb shows a user they're viewing a page called 'industries'. Industries is a child of 'create a safe workplace'.

                    WorkSafe breadcrumb example 1

                    Level 2 breadcrumb: A collection is the parent

                    This breadcrumb shows a user they're viewing a page called 'aged care'. Aged care is a child of 'industries'.

                    WorkSafe breadcrumb example 2

                  3. Title and subtitle

                    The page title is the header 1 or <h1>. There are more rules in WorkSafe's style guide but at a high level, your page title should:

                    • be 60 characters or less
                    • use active voice
                    • be a single sentence
                    • be written in sentence case
                    • be unique, clear and descriptive
                    • be optimised for search

                    The subtitle is a paragraph with an intro class or <p class="intro">. The subtitle is what you'll sometimes hear called the SEO description. Google likes 172 characters or less. We allow for 200 to be safe.

                    Title and subtitle example

                    Resource page header example

                    Let's break it down:

                    • Title: 76 characters... this is longer than you'd ideally like. But in this case that's ok. It's a resource cover page so the page title needs to match the attachment title exactly
                    • Subtitle: 127 characters... this is a very good length.

                    On the whole, it's a well constructed title and subtitle. Both are descriptive so they're good for human readers and search engines.

                  4. Share, print and bookmark

                    These elements will be automatically applied, but there's one important take away - you don't need to design PDFs for download. The website will generate a nicely styled PDF for you.

                    Elements in this area are:

                    1. Share on social media or by email
                    2. Print the page
                    3. Bookmark to your myWorkSafe portal account
                    4. Subscribe to an RSS feed

                    Share and print example

                    Share, print, bookmark example

                  Headings and text

                  Most of the content you write will be for the body of the page. It's important you know how to structure your paragraphs correctly. Our WCAG 2.1 AA compliance certificate depends on it!

                  Headings

                  Stakeholders will sometimes ask website administrators to make headings bigger or all the same size. That's because they don't understand the fundamentals of heading structure.

                  Note: We've broken some accessibility rules in this section for illustrative purposes.

                  This is a H2 heading

                  Every page needs to have a H2 heading at the very top of the first body paragraph. It's the opener.

                  This is a H3 heading

                  If your H2 heading needs a subheading, the H3 is it. If you have a look near the top of this page, you'll see the H2 called 'Headers'.

                  Every subheading underneath 'Headers' is a H3. Take a look at 'Standard header', 'Collection header', 'Product header' and 'Marketing header'. They're all children of the H2, so they get the H3 treatment.

                  This is a H4 heading

                  Sometimes you'll need a H4 heading too. For example if the 'Standard header' H3 needed a subheading underneath it, like 'Version 1' and 'Version 2', then you'd use an H4, because those subheadings would be children of the H3.

                  Making sense?

                  We do have a H5 heading too, but do you really need to nest your content down to that level?

                  Paragraph copy

                  This is a standard paragraph - you're probably used to writing these already.

                  The main thing you need to know is that we don't use styled fonts like bold, italics and underline on WorkSafe's websites. There's a full run down in the style guide for writers.

                  Quotes

                  Most standard quotes can go inside a regular paragraph. They should use single quotation marks - that's the WorkSafe style:

                  'Know the rules well, so you can break them effectively' - The Dalai Lama.

                  If you have something particularly poetic to say, it can go in a styled quote component.

                  'Know the rules well, so you can break them effectively'

                  - The Dalai Lama

                  Lists

                  Lists are wonderful things that help you break down content. When they're used appropriately lists are good for readability and SEO. But use them wisely - pages full of lists are pretty hard to read.

                  Inline lists

                  Inline lists use HTML (eg <ul> and <ol>). They're quicker and easier to use, but there are pros and cons.

                  • Inline lists are HTML and allow <strong> and <em> tags
                    • But we don't recommend using bold or italics
                    • You'll understand when you read the style guide.

                  Definition lists should be used for glossaries which are most commonly found in guidance material.

                  OHS Act
                  Occupational Health and Safety Act 2004
                  WIRC Act
                  Workplace Injury Rehabilitation and Compensation Act 2013

                  Styled lists

                  Styled lists are plain text components and don't allow HTML. But they do clever things that inline lists can't.

                  • This is a styled unordered list.
                    • This is a nested item. But try to avoid nested lists.
                  • We use ticks to demonstrate positive actions.
                    • And to say 'do this'.
                      • We use crosses to demonstrate negative actions.
                        • And to say 'don't do this'.
                          1. We use numbers to show order.
                            1. This is the second (and final) step.

                                  Steps

                                  Steps are used to demonstrate order. Maybe it's a set of actions or activities that need to be completed in a sequence. Maybe it's a trouble shooting guide with a list of three things that a user can try in any order.

                                  There are three main components at your disposal to demonstrate steps effectively, depending on the needs of the reader.

                                  Unordered list

                                  The numbered version of the styled list component is useful for creating short, single sentence lists of steps when your meaning is obvious to the reader. Like this.

                                  Leading headings are optional

                                  1. Take a deep breath.
                                    1. Have a glass of water.
                                      1. Go for a walk.
                                        1. Practice meditation.

                                          Stepper accordion

                                          Sometimes you need to provide a lot more information or instruction. That's when you use a stepper accordion.

                                          The stepper accordion is a type of list with a title and a body section. It works the same way as a standard accordion, but it's numbered.

                                          Steppers are best used to describe steps that should be completed in a sequential order. The stepper accordion has the same states as the standard accordion - all closed, first open, all open. This one is set to 'first open'.

                                          Leading headings are optional

                                          1. Take a deep breath

                                            Repeat it for 60 seconds. Does that help?

                                          Instructions

                                          If your steps make the most sense with pictures, then the instructions component is the best steps feature for the job.

                                          The instructions component is set to use an H3 heading. We'll update this in the future to make it more flexible.

                                          Leading headings are optional

                                          1. Take a deep breath

                                          Repeat it for 60 seconds. Does that help?

                                          2. Have a glass of water

                                          Try to drink two litres of water every day.

                                          3. Go for a walk

                                          Some people feel their best when they walk 5000 steps every day.

                                          4. Practice meditation

                                          Yoga and mindfullness are great ways to unwind.

                                          Linking

                                          If you're an experienced web content writer you probably use inline links like this one in most of the copy you write. Inline links have long been the standard but they are fundamentally flawed.

                                          For example, inline links are hardcoded into a page. If you wanted to create deep links for 'OHS Act' on every page across the website, that's hundreds of hardcoded links. What if you unpublished the destination page? Or updated the URL? You'd have broken links everywhere taking tens of hours to fix. That isn't very smart.

                                          WorkSafe's websites use dynamic links instead. We call them cards. You may need to adjust the way you write, but only a little. Instead of including an inline link mid-sentence, write knowing that your link will be placed at the end of the paragraph instead.

                                          Cards are dynamic and reusable, and can be managed with minimal effort:

                                          • Create once, publish everywhere.
                                            • Edit once, edit everywhere.
                                              • Unpublish once, remove everywhere.

                                                Netflix style card

                                                The Netflix style card is essentially a list of links shaped like a card or tile. They're listed horizontally instead of vertically and they're designed to be swiped from left to right - especially on mobile.

                                                This card is used by the collection content type, and in pages with a large number of links in a collection.

                                                A new style of card that lists links in a vertical layout. This card is used when space is tight or when there is only one link in a section. They're especially useful for slotting between paragraphs of copy.

                                                Images

                                                There are two types of images - decorative and functional.

                                                Decorative images

                                                The rules of decorative images are pretty straight forward. Only use them if they serve a purpose, and make sure you get them approved by a health and safety subject matter expert. We can't use images that contain anything that may be considered unsafe or inappropriate.

                                                This is a decorative image. It doesn't explain anything and it has no functional purpose - it's just here to add colour or influence your feelings.

                                                Functional images

                                                These are images with diagrams to explain a task or solution.

                                                This is a functional image in it's full form. You can see it contains text. That isn't accessible - a screen reader used by a person that has a vision impairment can't identify text in an image.

                                                This website is certified WCAG 2.0 AA accessible and we risk losing that certification if we add non-accessible images to our content.

                                                Diagram example uncropped

                                                This is the same functional image cropped. It still contains some text but this is acceptable because there is now an accompanying paragraph of copy in HTML that provides context.

                                                This meets WCAG 2.0 AA requirements.

                                                Bad: Employees are within 1.5 metres of one another, side-by-side or facing workstations.

                                                Diagram example cropped

                                                 

                                                Video

                                                Video style is another topic entirely, but assuming you have a video that is already approved for use, then there are two things you need know.

                                                Every video published to any of WorkSafe's websites must have:

                                                • an accurate transcript proof read by a human - not a machine
                                                • accurate closed captions uploaded as an SRT file - not burnt into the video

                                                There are no exceptions to this rule. Even if you want to add a two-hour long keynote speech to the website, it needs a human-proofed transcript and closed captions.

                                                This is what a video with a transcript and closed captions looks like.

                                                WorkSafe ambassador - Lisa

                                                Next steps

                                                WorkSafe style guide

                                                Now that you know how to construct a good web page, and you've learnt the basic content principles, it's time to learn the WorkSafe style. It includes all the fun things like punctuation, capitalisation and abbreviation. For the most part, it's pretty close to the GOV.AU style, with a few small differences.