Binding Content and Presentation

With an understanding of both content and presentation, the remaining topic is how they are bound together. At a high-level, there are two types of binding; static and dynamic.

Static binding is the placement of a component in a layout or sublayout that is "hard-coded" so to speak. This is usually done for things such as navigation, footers, copyright statements, etc. Now, just because the component is statically bound, it doesn't mean that the component itself can't be driven by dynamic content. Navigation or breadcrumbs are the best example - these are statically bound on every page, but the navigation or breadcrumb dynamically changes as you add new content or navigate to a different page.

Dynamic Binding is the placement of components via placeholders. This allows flexibility in the design, while still maintaining control of the overall look and feel.

Placeholder settings determine which components can go into which placeholders. You don't want something designed for the left-hand column to appear in your center column, so you can restrict that.

However, just because a component is dynamically bound through placeholders - it doesn't mean that a user needs to add it manually on every page. You can place a component into a placeholder in a template Standard Values to ensure that it appears on every page using that data template. The end result being that a component acts like it is statically bound (i.e. newly created pages automatically have that component) but you (and your users) have the ability to remove/modify the component after the fact.

Managing different presentation layers for each device

When a request comes into Sitecore, the item requested is identified. This item has settings called presentation details which specify how to render the page. These presentation details are set for each logical device type the site supports. This is one way that Sitecore offers content reuse by allowing the same content to be used for the standard site as well as a mobile site.

Each device maintains its own layout and component list (see below). In the case of our current page, you can see we haven't applied layout settings to the print view yet, and that the

Managing Presentation Details

Presentation details can be set on either the standard values for the data template or on individual content items. It is a best practice to set these settings to the data template's standard values. This means that all existing or newly created content items based on a template will have the same presentation. These settings can then be overridden on an as needed basis. Similarly, if you update the standard values on that template, all your pages are updated automatically.

Presentation Details

As you can see, there are a number of tools, including Edit and Copy To. Copy To is quite useful, in that is allows you to set a presentation using the Page Editor, and then copy all the work you did visually to a template Standard Values - or to another device type entirely. For example, if your Android and your iPhone view share many characteristics, you can copy one the Layout Details from one device view to the next, and then tweak it as necessary.

Often, the process for building the look and feel of a site is somewhat iterative. Generally you will want to start with the following;

  • Setting the main layout and some of the high-level placeholders and components (such as Full Title with Left Sidebar and Content) on standard values on the Article item template.
  • Go to the Page Editor, and drop a few components (such as Related Articles List and Sibling Articles List) and see how it looks. You'll note that due to placeholder settings, some of these can move around on the page. If you like the way something is laid out, and want it as a default, copy it back to the standard values.
  • Expand out to other items or devices. For the article view, it may work for article folders - so unless one template is inheriting the layout settings from another, you'll have to copy that over. Similarly, for the print view, you may decide to reuse some components such as the Red Page Banner. Copy this from the Default view on the current page, to the Print view on the standard values. Then go to the layout details to set a new layout that doesn't have navigation (since a printout wouldn't need that on the printed page).
  • Repeat the process as needed. You may want to add/remove new components on the print view - and similarly expand out to mobile and other views using the same process and tools.

Of course, if you're the type that plans out everything in advance, you can simply work in the Standard Values Layout Details directly - dropping components into placeholders by name, without using the Page Editor - and having one big "reveal".