Support and Documentation

Content hierarchy

The key to managing a dynamic, high-volume website is consistency. Visitors expect certain aspects of a website to be the same regardless of the individual page they view. One aspect of consistency is page structure—placing and positioning the same elements in the same parts of a web page. Other examples of elements requiring consistency include the following:

  • Page layout

    • Position of advertisements

    • Position of reader comments

    • Position of related items

    • Position of author's bio

    • Position of action bar

  • Contents of headers and footers

    • Appearance and function of search bar

    • Appearance and position of site's logo

    • Hat, site-wide links, copyright

Looking at a popular news, political, or commercial website, it is clear that although individual pages have different content (different articles, images, or videos), those pages still have consistent structure.

Overview of the Brightspot hierarchy

Brightspot implements consistent page layout using content hierarchy. The hierarchy starts at the global level, flows through site level, nested section levels, package level, and ends at the asset level.

Content hierarchy diagram
Figure 9. Content hierarchy diagram

Here is an example showing how Brightspot, Inc. (that's us!) uses this hierarchy to easily implement layout designs for multiple publications.

Brightspot, Inc. is a company that produces the Brightspot world-class content management system; . Hhowever, this company not only produces the Brightspot CMS, they also produce several other products such as Brightspot Media Desk, Brightspot Assignment Desk, and Brightspot Ops Desk, and Brightspot Intranet. Their company website is broken down into standard areas such as “About Us,”, “Resources,”, and “Documentation,” to name a few. There is also an area titled “Products” that highlights each of the products mentioned above. Within each of these product areas are various pages. Each page featureshas its own content, but retainsmost have the same look and feel as the overall site. Similarly, and each page shares the same header and footer. Finally, Brightspot is a company that is very involved in giving back to the community. One of the organizations they partner with is the Special Olympics. Each year, when the U.S. Special Olympics Games are held, publishes special content solely dedicated to these incredible athletes and their journeys.

Using the above information as a guide, let’s see how Brightspot organizes its content hierarchy:

  • Global: This is the highest level in the hierarchy, so Brightspot places content shared by all publications at this level. In particular, because the header and footer are the same for all publications, Brightspot sets its header and footer at the global level.

  • Site: As mentioned above, Brightspot offers several different products. Each product needs its own look as it fits within the global site. In order to accomplish this, each product is broken down into its own site with its own settings that cascade down to the sections and assets contained within. This allows Brightspot to set different color themes, or graphics, for each product and all of the individual pages related to each product, yet still be maintained within one instance of Brightspot.

  • Section: Sections are used to divide the content within your sites into logical groupings for your viewers.  Sections help drive the URL structure of your content and provide the navigation path to similar content.

  • Asset: At the asset level, Brightspot’s editors provide the most granular information associated with each piece of viewable content. This includes articles, blogs, images, etc.

When Brightspot assembles content for display in a web browser, it searches the hierarchy to determine what content, layout, and color scheme to use. It first collects all the settings at the global level, then checks if any of those settings are changed at the site level, then the section level, then package level, and finally the asset level.

(Styling, the appearance and spacing of text and elements within a page, is also a part of a site’s hierarchy. Brightspot implements styling hierarchy using traditional CSS files as well as the Less preprocessor.)

Implementing content hierarchy