Sitecore Experience Accelerator for UX and design teams

If you have ever worked with the Sitecore platform, you might be familiar with the fact that it has an extremely flexible frontend layer. Using standard Sitecore, it is totally up to the development team on how to set up the frontend layer, making it extremely flexible but also development heavy.

With the introduction of the Sitecore Experience Accelerator (SXA), an additional implementation method has been introduced. SXA is a framework that works on top of a regular Sitecore instance. It is a standardized framework out of the box that provides commonly used functionality that would otherwise need to be developed along with standard components.

It allows users to use these standard components to build a UX and build visual identity using CSS and JavaScript-based themes. In this article, I will introduce some of the SXA concepts that are interesting for both UX designers as well as design teams.

Before continuing, let me answer your first question: "Do I need to change my way of working for this?". The answer is simple - No you don't. While SXA offers a wireframe mode, you are not required to use it.

The first thing that you should be aware of is that SXA utilizes a Responsive Web Design (RWD) grid system. The default (and most used) grid system is Bootstrap 4. Bootstrap 3, 960 grid system, and Foundation are also options. While SXA adopts those grid frameworks, SXA does not use their respective component libraries.

Per component, developers/users can decide what the column width of that component will be. They can also set how those components should react to different device sizes.

As you build your wireframes, you will most likely sketch all sorts of ideas and fragments that end up being used on the completed wireframes. Often one idea will become a structural element used on many different completed layouts.

SXA is built with the same philosophy. "Partials" are, quite simple, bits of design -- pieces that can be put together to create a completed layout, or be reused on different layouts. They can even inherit from each other so that you can build increasingly complex designs from a basic set of reusable snippets and manage them all clearly and concisely.

While partial designs allow you to create common parts of your page, page designs will enable you to group them in various combinations and attach them to specific kinds of pages. You can keep the base template equal on every page, while the content may vary.

Let's say that we have a page design called Article page. This page design consists of multiple partials. We have a header, footer, and a three-column partial design. In our three-column partial design we have set up a menu on the left (Navigation component), some content in the middle (Page Content component), and a few "call to action" boxes (Promo components) on the right side.

As mentioned, partial designs can also inherit from one another in order to use them efficiently and to minimize effort in maintenance.

In this example, we have a base partial design with two columns. On the left, our menu and a container on the right side.

Containers are elements in which authors can place their own components. Developers can set permission as to which components are allowed in the specific placeholders. This reduces the chance that authors will place components that are not suitable for that area.

Our "New partial design" inherits from the base partial and adds an image component. This partial design will eventually be used in one or multiple page designs. The benefit here is that we can reuse our base partial design for multiple different partial designs that share the same layout. Whenever we need to make a configuration change to our menu component, we can simply do that on our base partial and all the partials that inherit from that specific base partial will utilize that configuration change.

SXA introduces a set of reusable components that are presented to the author in the Experience Editor. You simply pick them up and place them on the page using the Drag-and-Drop functionality. These components offer a wide range of content needs, from simple text and images to videos and social media plugins. This gives the marketer enormous power to be creative and change the content as they need.

Rather than having lots of different components that are slight visual variations of presentation of the same content, we have rendering variants. These are configurable adaptations of the core components. For example, an article listing might show a thumbnail or some extra metadata: this would be a "variant" of the Page List component. There are a set of out-of-the-box variants that come with all our components, and you can, of course, create your own in the Sitecore Experience Editor. The author simply chooses which variant they want when they place the component.

The HTML output of a component is entirely customizable, but they do have an outer HTML, which is generated by SXA.

In this simple example of the component HTML output, the line with the Hello World text is where your component-specific HTML goes. The component HTML structure is defined within the rendering variants. It can be done by configuring variants in the CMS using Sitecore items, or by a template language called Scriban.

So, what are the key takeaways you need to be aware of when designing an SXA website?

• Follow atomic design principles; components can be placed in multiple areas of a site in various widths. Additionally, components can show the same content in various ways. To fully leverage this power, try to design multiple variants of the same content.
• Explore standard SXA components first to get an overview of existing functionality and keep this in mind when designing components
• SXA has the functionality to reuse fragments of pages in various designs, even with small variations within those fragments.

Follow atomic design principles; components can be placed in multiple areas of a site in various widths. Try to design multiple variants of the same content.