From Design to SXA

As I have explored Sitecore Experience Accelerator (SXA), it has become apparent to me that some of the traditional planning and design I led my clients and team through for a build needed to shift to allow the site to take advantage of the best that SXA has to offer. Which results in a better site experience for editors (which drives better content for the site visitor.)

This article will attempt to capture some of this thought pattern for reference by me, my teams, and others as they begin their builds on SXA. (Which I strongly feel is the future of Sitecore.)

Performance Consideration

As you may have experienced already is that when editing SXA can feel a little sluggish. Part of this is some carry over old code as well as some of the underlying complexity that makes SXA flexible as well as standard. To help in this area you want to minimize the number of direct rendering which are added to a page to no more than 30. (In this context a rendering is anything added from the toolbox.) What is interesting in this recommendation from Sitecore, is it reveals the importance of the partial design and snippets in the architecture of the site, as these elements though they may contain multiple renderings count as only 1.

Another major thing to keep in mind is how you expect users to build ‘the grid’ that content goes into. SXA provides grid splitters for rows and columns, but each splitter is a hit against your ideal state of 30 or less renderings. The better method is to make use of the grid settings of a rendering.

Break Down From the Creative

Here is what the Attic Marketing team has created for our home page, which will drive the theme for the remaining site. Little hard to see but as we move through the planning will be zooming in on specific sections.

Header Partial Design

The natural first partial design we create is the header. The basic functional instructions for the header is as follows

As the header will be leveraged throughout the site, it will be the first shared partial design created in the [‘master site’](link to post).

Leveraging the header placeholder I’ll insert a reusable image, setting its rendering parameter grid value to 3 then add two navigation lists within a container. The header has places for data now, but as you can see it is not much to look at, and doesn’t really meet the needs as defined.

One of the beauties of SXA, is there are a number of style changes that can be applied simple by looking at the rendering parameters available for a control via the paint can icon. From the dialog that opens I can then set the style of the menu.

With these settings in place we can produce the following:

Following the notes provided through the design process, the footer partial will take on a pattern similar to the header.

After applying the style rendering parameters as provided we get the following partial design for the footer,

Background with Columns

The body of our landing page is made up of a collection of three and two column rows, with changing background colors. The thought is that the marketing group will have control over the colors available, but each business group can control the colors they apply and in what order those can be applied. In building the IA, I wanted to set these up as partials designs that we could associate to page designs that are finally applied to page instances. In theory this sounds good, but does not work, as a partial design can only be edited at the partial design level and changes are seen everywhere it is applied. This does support our need for changing content of pages.

To provide the required content flexibility as well as creative control for the business groups while maintaining a level of standardization, we will setup two things.

First, will be the creation of style options. Style options are a mechanism to provide the content editor some choice in the design of a page, that ties back to the actual CSS of the theme. Within the Master Site, expand Presentation to locate the ‘Styles’ node, create a new child called Background Colors.

As children to Background Colors will be the item representations of the CSS classes that would apply background coloring. It is important to notice that the Name field of a style is what will be rendered in the HTML class attribute (call-out 1). Also, important to set is the Allowed Rendering field which is how you assign what renderings the style will apply to (call-out 2). At this time we foresee background colors being useful for the structural renderings of the site so Snippets and Containers will be selected.

Now when adding and editing a snippet or container, the editor can assign an appropriate background color and on publish the CSS will properly style it via the class as entered.

With background color options configured, the next step in the IA setup within master site is to create some snippets to support the content options we as the design team feel are most allowable to keep a level of uniformity.For the three column setup (seen as the first row below our hero banner). This will be built by a reusable image with grid settings to 4 (ie 1/3 of the row), an empty container also set with a grid of 4, and finally a link list.

When adding the container to the middle, we want to ensure a reasonable look and feel by limiting what renderings an editor can place there, by setting up unique placeholder settings to that container.

A similar pattern would be followed to create a snippet for the two column snippet.

Quick Take Away

When thinking through the IA for SXA keep the following in mind:

  • Content Added to a Partial Design, will display on all Page Designs that reference but cannot be edited for those references
  • Page Instance assigned to a Page Design will see content of any Partial Designs assigned but cannot edit the content contained in them
  • Content added to Page Design does NOT show on the pages that reference it
  • Limit immediate renderings (including splitters) to less than 30
  • Snippets are fully editable when added to a page, therefore be sure to properly set the data source (local verse global) to avoid surprises


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.