Introducing Sitecore Experience Accelerator

Version: 9.3

Web development teams use Sitecore Experience Accelerator (SXA) to speed up the production of websites and to reuse components, layouts, and templates across a variety of sites.

SXA separates structure from design, so front-end designers, creative designers, content authors, and developers can work in parallel and you can deploy and maintain multiple sites quickly and cost effectively. Once a basic user experience plan is in place, everyone can get started on the platform.

SXA website development process

SXA is a flexible tool and there are several different ways to run an SXA project workflow. All workflows have their own benefits and greatly depend on the skill set of the team. Go to the best practices section to view an infographic that describes a workflow for SXA projects that we have found to be successful and efficient for an implementation at a full service agency.

With SXA you can:

  • Accelerate the delivery of sites using standard functionality with minimum-to-no CMS development.

  • Enable different work streams to run in parallel.

  • Assemble sites using responsive and reusable renderings.

  • Use themes to enable brand consistency.

  • Choose between different grid systems.

The following graphical overview lists the platform elements and how they are integrated.

SXA platform elements

Tenants and sites

Sitecore SXA supports multitenancy by providing  a folder structure to create and assign security roles to isolate content, the ability to create and assign security roles at the tenant level, and the ability to enable or disable features for each tenant. You can create page templates at the tenant level, so that the Page item can have different fields from one tenant to another.

You  create tenants and sites by using a wizard.

Create a tenant wizard.

Toolbox

To make it easier to construct your page, SXA comes with a toolbox with reusable renderings that you can drag and drop onto your page. The renderings vary from simple text and images, to videos, and social media plugins.

SXA toolbox

Grid and column layout

SXA pages use a responsive grid layout. The grid divides pages into equal columns. By using row and column splitters or by changing the grid settings of the renderings on the page, you can decide how to divide the available columns on your page.

Show grid

Pluggable themes

SXA separates structure (HTML) from design (CSS) to make it easier to change the design of websites. To enable easy customization, SXA uses themes. A theme consists of style sheets, script, and images. You can add pluggable themes to SXA to enable changing the styling of a site quickly. Users can begin developing a site using the wireframe theme. When they finish a design, they can use Creative Exchange to import the new theme and re-skin the site.

Page designs and partial designs

Partial designs contain parts of a layout that a site uses in multiple places. A page design is the presentation definition for a page and consists of partial designs and renderings.

Page design

Creative Exchange

You can export a static representation of a site and send it to a creative agency to work with. The export file is a .zip that contains the site pages, the site assets, and the site theme. The agency can edit the exported site using their favorite tools and when they have finished, you can import the improved design back into the site.

You can also modify themes and other site content without having to import the files back into the site. Creative Exchange Live works with Gulp tasks that enable you to make changes to themes and other content and synchronize to the Sitecore environment immediately.

Share content and presentation

As well as sharing presentation and data sources between sites in the same tenant, you can also share pages. Sharing content as a delegated area lets you control the content from one central location in the content tree.

Asset Optimizer

You can improve site performance by optimizing CSS styles and JS scripts with SXA's Asset Optimizer. When enabled in a production environment, the Asset Optimizer improves overall site performance by reducing the amount of data that needs to be transferred.

Data modeling

SXA enables you to model your data in JSON (JavaScript Object Notation). The JSON feature provides a JSON API to access the SXA content. The content for the site is accessible via a web-service API in JSON format. You can use the special renderings to build JSON layout but if your website uses default renderings, you can use the SXA Layout Service to return placeholders and data source items in JSON.

Do you have some feedback for us?

If you have suggestions for improving this article,