Content Hierarchy

One key to managing a dynamic, high-volume web site is to keep things consistent. Visitors expect certain aspects of a web site to be the same regardless of the individual page they view. One aspect of consistency is page structure—consistently placing and positioning the same elements in the same parts of a web page. Other examples of elements requiring consistency are as follows:

  • 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 web site, you see that while individual pages have different content (different articles, images, or videos), those pages have consistent structure.

Overview of the Brightspot Hierarchy

Brightspot implements consistent page layout and headers/footers 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.

../../../_images/hierarchy.svg

Content Hierarchy Diagram

The following scenario illustrates how you can use this hierarchy to easily implement layout designs for multiple publications.

Extraterrestrial Cuisine, Inc. (ECI), is a media company whose readers are interested in the latest foodie trends in the inner solar system. The company has three publications: Moon Munchies, Venus Victuals, and Martian Menus—all running on their own site domains. Each of these publications has its own page layout, header, and color scheme, but they all have the same footer. Furthermore, within each publication there are individual sections focusing on organics, convenience, and nutrition; each of these sections has the same layout as the parent publication, but with a slightly different color scheme and different types of content blocked inside a recipe’s body. Lastly, every July commemorating first Apollo landing on the moon, Moon Munchies publishes nostalgic recipes of what those astronauts ate during their missions.

Given this scenario, ECI organizes its content as follows:

  • Global This is the highest level in the hierarchy, so ECI places content shared by all publications at this level. In particular, because the footer is the same for all three publications, ECI sets its footer at the global level.
  • Site ECI has three publications running on different sites. Because each site has its own layout and color scheme for recipes, it sets the following items at the site level: theme, favicon, and header.
  • Section Because each section (organics, convenience, and nutrition) has its own color scheme, ECI sets a theme at each section level. Furthermore, the floating block wrapped within a recipe’s body is different for each section. The organics section displays an advertisement, the convenience section displays a promo to a related article, and the nutrition section displays a static list of related articles. ECI makes the setting for what appears in the wrapped block at the section level.
  • Package Packages are similar to sections with a time frame. Moon Munchies publishes its commemorative recipes during July by combining assets into a package and setting a special page layout and color scheme.
  • Asset At the asset level, ECI’s chefs provide the most granular information associated with each item: ingredient lists, preparation steps, and storage tips for the most hostile of cosmic environments. Also included in the asset category are the chefs’ head shots and short biographies.

When Brightspot assembles one of ECI’s recipes 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. For detailed information about Less in Brightspot, see Nested Class Names in Less.)

Implementing Content Hierarchy

To maximize the consistency and minimize the maintenance of your publications, make settings as high as possible in the content hierarchy. For example, if all of your news publications run an ad above the headline, make that part of the page layout at the global level. If one of your publications puts contact information in the header, and another publication puts contact information in the footer, make that part of the page layout at the site level. If you run a publication with sections (such as a) stocks, bonds, real estate or b) movies, plays, concerts), you can define page layout at the section level, giving each section its own personality. You can further define page layout and content at the package and asset level. Overall, as a best practice, make settings as high as possible in the content hierarchy to ensure consistency and reusability across all of your publications.

You configure the content hierarchy in the Page Defaults or Page Overrides tab. The following table explains how you access this tab for each level in the hierarchy.

To configure page structure for… Use Tab Name
Global level Navigation Menu > Admin > Sites > Sites widget > Global Page Defaults
Site level Navigation menu > Admin > Sites > Sites widget > <Site name> Page Defaults
Section level Open section in Content Edit Form. Page Overrides
Package level Open package in content edit form. Page Overrides
Asset level Open asset in content edit form. Page Overrides