Theming Rule #2: Define and Use Globals

Check out the first two posts in this series:

  1. Your Site’s Three Tiers: Content, presentation, theming!
  2. Theming Rule #1 – Separate presentation from content

The second rule in our series is to always define and use globals.

When it comes to your site, you can think of globals as "the things that change the least"--they are the core rules and elements of your site's look and feel.  The three main things that we are thinking of here are:

  • Rules for XHTML structures and use
  • Default site styles (CSS)
  • Standard interface conventions

Rules for XHTML structures and use

Consistent use of XHTML throughout the site allows for more consistent application of your theme's styles and neater overrides.

Check out the first two posts in this series:

  1. Your Site’s Three Tiers: Content, presentation, theming!
  2. Theming Rule #1 – Separate presentation from content

The second rule in our series is to always define and use globals.

When it comes to your site, you can think of globals as "the things that change the least"--they are the core rules and elements of your site's look and feel.  The three main things that we are thinking of here are:

  • Rules for XHTML structures and use
  • Default site styles (CSS)
  • Standard interface conventions

Rules for XHTML structures and use

Consistent use of XHTML throughout the site allows for more consistent application of your theme's styles and neater overrides.

As an example, if your submenus use the same structure throughout the site, it is very easy to override them as needed to change only the colors or background images.

Default site styles

Planning ahead and defining the default styles to be used throughout the site ensures that there is, at the least, a consistent foundation for the site's look and feel as it evolves.  To protect these styles from accidental revisions, they should be isolated in a sitewide stylesheet, away from use-specific styles.  Use-specific styles should go into use-specific stylesheets, preventing these styles from being applied to the wrong use, or inadvertently causing surprise effects across the site.

Using the example from above, your submenus might all share the same general styles--width, positioning--but each might have its own unique color scheme. Separating these use-specific styles from the global default styles ensures that these unique colors are applied only where needed and cannot unexpectedly affect other parts of the site.

Standard interface conventions

Finally, key interface conventions should be defined globally. This helps to ensure a consistent user experience throughout the site; when the user experience is consistent, your audience is focusing on the information and tasks of the website, and not on constantly re-evaluating how to use the site.

Following on our submenu example, when the submenu placement, functionality, and behavior adhere to global interface standards, users know exactly where to look for links to the information they need.

Key takeaway: Define and use globals on your site to maintain a more consistent look and feel, and a smoother user experience, that persist as your site grows and evolves.

acham