The Header section refers to the Page Header section at the top of the page of a given content. This section often contains a large headline, an optional subhead and a large background image or solid color background.


When we talk about a Dynamic Header we refer to the strategy of making regular changes to this section to provide new information to recurring visitors and promote topics of interest, as opposed to using the header for overarching descriptive information that doesn’t change often. Departments are welcome to choose either strategy, fixed or dynamic, to promote their homepage as best fits their work. This guide will walk you through the process and requirements.


This guide requires a user with a Restricted Editor role and the Authorization to edit the desired page. If you don't have either capability, you will NOT be able to make the necessary changes.


I. Create a Content Plan

It's important you plan ahead a content strategy and work out a schedule. For example:

  • For frequent updates, you may choose to add a new piece of content every week. This would require you to prepare new content weekly, or in batches, in preparation for its publication, e.g., every Tuesday morning.

  • For occasional updates, you may choose to add a new piece of content once every two weeks. This allows you additional time to prepare your content but it will also require that the content you publish has a longer lifespan. This may not be ideal for content that only needs to be promoted for a few days.

  • For seldom updates, you could add a new piece of content once a month. In this case it is necessary that your content has a longer lifespan. If your content expires before the next scheduled time, then you may want to fallback to the standard fixed Header strategy of displaying the entity name and image.



II. Create an About Section

Before we move from a fixed to a Dynamic Header, you need to ensure there are other ways to make clear what this page is about at its core. In other words, if this is a Department landing page page, and we remove the department name from the header, how can we reinforce that this is the department homepage?

 

This element can simply be a 50-50 component with an About Us or a What We Do blurb that describes the entity and a thematic image or even a video. And if you have an “About” section, you can also link to it here and make sure it is optimized to orient visitors to your section as needed.


Example of a 50-50 What We Do Component.


Example of a 50-50 What We Do Component.


III. Prepare the Content

The content will be added to the Page Header section where you can make use of the following elements:

  • Eyebrow
    Use this area to provide a keyword or small phrase for context, e.g., Upcoming Event.
    Recommended maximum length: 48 characters.

  • Page Header Title
    The main title that will serve to promote the content.
    Recommended maximum length: 60 characters (2 lines).

  • Description
    A small blurb to help describe the content being promoted.
    Recommended maximum length: 240 characters (2 lines).

  • Buttons
    You can have multiple calls to action for the promoted content, e.g., one for Registration and one to Learn More about the event.
    Recommended: maximum length: 48 characters (2 buttons).

  • Background Image
    Ideally the background image will be a large, thematic, marquee image. We recommend you to avoid images that are too saturated, busy or that contain text as these can difficult reading the content above.
    Required image size: 4000 × 1360px(~ 3  :  1)

    Alternatively, if you don't have a background image, you can also select a background color from our palette.


For example, in your planning stages, your content may look something like this in Word:


IV. Edit the Header Section

  1. Make sure you are logged in.

  2. Browse to the target Landing Page and select Edit
    This approach is recommended ONLY for the landing page of a given section. For example, a Department could apply this to their home page.

  3. Scroll down to the Page Header section and click Edit
    This section is located right after the Short Description. If this section is already open then you can proceed to edit the fields in the next step.

  4. In the General tab, you will be able to add the information we prepared before:
    • Eyebrow
    • Page Header Title
    • Description
    • Buttons. The buttons can be added as links in the Description and then update their Style to Buttons.


  5. In the Background tab, update to the desired design:
    • Background Color. If you don't have a background image, you can instead select a background color.
    • Background Image. Upload the chosen image.
    • White Text. We recommend this is checked.
    • Translucent Blue Background. We recommend this is checked.


  6. Preview to confirm changes look as expected and correct as needed.

  7. (Optional) Schedule your Content for review and publication.

  8. Save In Review

Examples

The screenshots below are examples of what is used in the school's homepage. They will give you an idea of what is possible maintaining a Dynamic Header section.