Your header introduces the architecture of your site empowering your user for a successful journey though your site.
The deadline to migrate to the new site header is December, 2024.
Consult with your Unit Web Leader before organizing and planning your header.
Before setting your header, carefully consider its purpose. Whether you use basic navigation or the enhanced options, architecture is the key to your site's success.
Reviewed September 20, 2023
Existing sites will need to add a new Enriched Header page, set it up as desired to replace their existing header, then, when ready, switch to this new version. Deadline for final migration is December, 2024.
New sites will already have the new enriched header in place but will need to make adjustments appropriate to their use.
80% of sites will just use the basic navigation. Those that want to use the more enriched menu choices should work with their Unit Web Leader.
Each UBCMS site has a unique header displayed atop every page. Done right, your header introduces the architecture of your site to your users, empowering them on a successful journey though your pages.
Before setting your header you need to carefully consider its purpose, and your ability to steward. Whether you use basic navigation (which we encourage for most sites) or one of the enhanced menu options, your architecture is the key to your site's success.
In Author, the header is specified at the top of your home page by an 'Inherited Paragraph Reference' (like a Shared Content Reference), and then automatically inherited to all of your site's pages.
Specialists then manage the actual header content by editing an actual header page in your site-wide configuration folder (e.g. /content/www/abc/config).
Your header is automatically displayed in the Author environment, but must be published to show on your live pages, and republished after any changes.
Please make changes carefully as they are reflected throughout your site.
Enriched headers come with Emergency Alert and Issues Advisory banners, the main brand lockup, breadcrumbs, and top navigation. The UB logo and university name in your lockup are pre-linked to the UB homepage.
Enriched headers act as 'sticky' nav, so a slimmed down but full-featured version of your top navigational glides down the page as a visitor scrolls on large or small screen devices. To see this effect in Author, switch to View as Published.
Initially, every header will need some adjustments to be appropriate for your site, such as adding your unit's formal name and a primary link back to your home page, plus there are some branding choices. There are further considerations such as site-wide search, optional key tasking buttons, and audience page links which are described further below.
A new header can be created at any time, as an experiment to redesign your site, or as part of a planned transition to new header style or architecture.
Put these in the footer:
Your website's header supports UB's brand by including a trademarked lockup with the UB logo and university name, which are pre-linked to the UB homepage, plus your unit's formal name, as established by the university.
Only official university logos or marks are displayed in a site header. If you wish to acknowledge a formal relationship with an external agency, their logo, along with a suitable positioning statement (e.g. “co-sponsored by” or “a member of…”), may be shown in the body of your website or in the footer.
Websites are created with a header page, which only Specialists can modify.
Only Specialists can modify header or footer pages.
> Learn more about UBCMS roles.
Within the enriched header page is an Enriched Header component.
The Enriched Header component is divided into a main 'Enriched Header' area, then at the far right, Search, Audience Navigation ('audiencenav') and a place to add Buttons for key tasks. Across the bottom is the Enriched Top Navigation area.
Some are not available depending on the Level selected in the Styles tab.
* The default UB lockup is best for internally focused sites, while the 'SUNY Modifier' version (the UB lockup supported with 'State University of New York') is best for sites that have a hybrid or external audience.
Long titles can wrap on to a second line. To control where that break occurs, use a return in the field ('Enter' key).
Note: the font size adjusts automatically to the length of your title.
Use the paintbrush icon on the Enriched Navigation component toolbar to quickly adjust the Styles settings (Level, Color Theme and Title Font).
Button components can be added to this layout container to support your key tasks and top conversions (e.g. apply, give, sign up, or register).
* Additional Label Text will not be visible, but will be read by a screen reader immediately after the visible label. Use this field to help make sure all link text is unique. Read more about making links accessible.
On small screen devices, the buttons move into the menu tab that slides out from the right.
This is where your primary navigation is housed that visitors will use to guide their journey through your site. It becomes 'sticky' and glides down the page as your visitors scroll.
By default, this feature auto-loads a tabbed navigation that displays your site's actual folder tree structure in the UBCMS. For a simple site, you can apply this default navigation; e.g. by using children of your homepage. For enriched navigation, you will instead be referencing a series of menu pages built using Navigation Menu Templates.
Note: 80% of sites just need the basic/default navigation, and one-page sites and those using sidebar navigation can hide it entirely.
The tab colors can be used to visually designate a collection of like tasking areas.
The 'sticky' function is turned off in Edit mode, which means it stays up top as you scroll down the page. To see it in action, switch to View as Published or view it on your live site.
Site-wide search is a common addition to large or complex sites and requires an additional page in your main site folder.
A planful zone for 'Info For' audience tasking or 'Info About' resources, but these links should be singularly focused and not mixed and matched. When populated, this section becomes a simple dropdown list of links.
The most commonly used settings are:
NB. You could link to your Intranet here, as an internal audience target, but the ideal place for the intranet is in your footer.
Minimize what navigation you present to keep it scannable and prevent informational overload.
For the 20% that need more than the basic/default navigation, Enriched Top Navigation supports content-rich tabs with additional text, images, modules, news and event feeds, and multi-column lists of links. These tabs are created using special pages built with a variety of Navigation Menu Templates.
80% of sites will fill their needs with the basic/default setup and no enhanced menus. Some others may benefit from an enhanced tab, but the rest can still be Basic tabs.
The UB brand must be consistently applied to all university properties and exceptions must be negotiated carefully. Please see the Brand Site for more details.
However, developers may wish to explore adding custom code to their website, such as using an HTML Snippet to tweak the CSS or to add additional Google Analytics. Placing this code on a header or footer page will then apply it to every page in the site.
Please proceed with great caution and contact the DCT Help Desk if you are considering a custom header.
Be forewarned, custom code:
To work correctly, Google Analytics can be placed in an HTML Snippet on the header (or footer), or in the Properties of your site's home page, but NOT in the header/footer Properties.
Best practice: only a developer should modify the standard UBCMS code or styling, and any adjustments should be made thoughtfully, with regard for accessibility and long term maintenance.
Authors are responsible for any third party content that is hosted or linked from their UBCMS pages.
This includes applications such as Formstack forms and Google Maps, that are displayed using their own component, as well as entries from UB's Calendar of Events, and external content hosted using HTML Snippet or External Embed.
Best practice: for Formstack forms, avoid using the date picker and the 'other' option in dropdowns.
Best practice: for the HTML Snippet and External Embed, always run an accessibility test (e.g. using a browser extension), check its behavior in mobile, and consider how it may impact page performance in general.
Best practice: if your code relies on a 'div' or iframe to house its content on your page, it must have an identifying label, often coded as a 'aria-label' or sometimes a 'title', that assistive technology can see. Formstack produces a title automatically, although it is poorly worded, but other applications tend to skip this requirement so it must be added manually on your end.
If you have concerns that external vendor content is not accessible, please contact UB's Web Accessibility officer.
Once your header is built out, it should perform equally well in desktop and mobile views using the UBCMS' built-in emulator tool.
At a minimum, make sure:
Keep your old header page for a week or two in case you unexpectedly need to revert back to it.
By the time you have set up your enriched header, you should already have a stewardship plan in place.