October 2008

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.

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.

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <hr> <blockquote> <h3> <h4> <h5> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <pre>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. The supported tag styles are: <foo>, [foo].

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.
Stay Informed

Sign up now for the Treehouse Newsletter.