7 MUSTs for building Sitecore experience-editor-ready websites

For some years now the Experience Editor is the recommended way for editing content with Sitecore. It`s intuitive, easy-to-use, and most of the content editors prefer to use it rather than the Content editor which is more often used among the developers.

It`s up to us the Sitecore devs to make content editors` Sitecore experience better and to optimize the process of content entry end edit.
Placeholder settings item

Following the listed guidelines will make our editors` job easier:

  1. Always set meaningful name to your components!

    The names of all components should indicate their purpose. Avoid using pascal or camel case names – they are understandable just for us 🙂

    Bad examples:

    • Product
    • cookieDisclaimer
    • Meta

    Good examples:

    • Page Title
    • Rich Text With Border-Top
    • Page Metadata
    • One Column Container
  2. Don`t miss the Datasource Location and Datasource Template when creating components!

    • Datasource Location specifies where the editor is allowed to look for the data source when using the Experience editor.
    • Datasource Template specifies the types of data sources users can use.

    Both fields are required for building smooth experience for the editors and save them from traversing the entire tree while searching for suitable datasource for a component

  3. Always use placeholder settings!

    For each of the placeholder you define in your code you should create a placeholder settings item under “/sitecore/layout/Placeholder Settings”. Placeholder settings items indicate which components are compatible with your placeholder. Not every component is compatible with a given placeholder so this setting will save your implementation from rendering errors and not expected layout behavior.

    Placeholder settings item

  4. Set a Thumbnail!

    The image in the Thumbnail field is shown in the “Select a Rendering” window when adding a new component to a page. This field usually has an image showing how the component looks like. For that reason, you can use “Take a screenshot” function and directly make a picture of the component on the page. Using that field helps editors to intuitively choose the right component for the current placeholder.

    Thumbnail field

  5. Don`t be afraid of using Rendering Parameters!

    You should use Rendering Parameters to control the way a component shows on the page – to change its shape or layout. If you have a component that needs to support different sizes or background colors for example, Rendering Parameters are the best way to implement it. It`s conceptual mistake to use the datasource item to manage the way a given component looks. The datasource items should only manage the data (the content) while the Rendering Parameters control the presentation.

  6. Use the field title!

    In many cases your template fields` names are prefixed with a namespace or are too short and not so descriptive. In this scenario, you can use the title field of each field to give a really meaningful name which will not confuse the content editors.

  7. Define compatible renderings if there are any!

    The Compatible Renderings field is used to connect two or more components that are compatible in the same placeholders and may have the same datasource type (if the component uses datasource). This feature is widely used for scaffolding components. If a component has compatible renderings set, the editor can switch between them with just s single click.