Introduction to Sitecore Experience Accelerator (SXA)

Sitecore Experience Accelerator (SXA) is used by Web development teams to speed up the website’s development process and reuse components, layouts, and templates for various sites. Sitecore SXA splits development from design, so that the front-end designers, creative designers, content authors, and developers can work parallelly, while you deploy and maintain multiple sites quickly and cost-effectively. Once basic SXA tenant and site structure are in place, the resources across different teams can start work on the platform. With the latest Sitecore SXA, your teams are empowered to create/edit and publish/deploy content faster, across different channels.

 

Quick Look into Benefits of Sitecore Experience Accelerator (SXA):

• SXA allows you to quickly develop/create pages using SXA drag and drop functionality
• Fast-track site delivery using standard built-in functionality with minimum-to-no CMS development
• Develop sites using responsive and reusable renderings
• Pick from a different build-in different grid systems
• Creative designer design can be imported as Themes and can be easily switched
• SXA Themes help in achieving brand consistency
• Enable different work streams to run in parallel
• Reduce time to market
  

  

Elements of Sitecore SXA Platform

1. Tenants and Sites
Sitecore SXA supports multi-tenancy. This can be achieved by using Tenant Folder and Tenant functionality. With the help of Tenant, we can build multiple sites within a single instance. Its benefit is that we do not need to do any additional configuration, which we used to do in the normal Sitecore instance to implement multi-tenancy. This brings us the ability to enable or disable features for each tenant.

2. Toolbox
Sitecore SXA has introduced ‘Tool box’, where you can find all reusable renderings. This makes the content editor’s life easy when they build pages using experience editor. Content editor can simply drag and drop components/renderings onto your page. The renderings vary from default built-in SXA to custom rendering and from simple text and images, to complex.

3. Grid and column layout
Sitecore SXA pages use a prebuilt-in a responsive grid layout. 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. Also, SXA allows you to create your own custom grid and column layout and assign the same to your Tenant/Sites.

4. Themes
SXA Themes differentiating structure (HTML) from design (CSS), to make it easier to change the design of websites. A theme consists of style sheets, script, and images. SXA pluggable themes enable us to change the styling of a site rapidly. SXA comes with pre-built wireframe themes,  that let us develop a website, and later, these designs are imported as a new theme using SXA creative exchange.

5. Page and Partial Designs
Sitecore SXA introduced Partial and Page Designs. In simple terms, Partial Designs contain parts of a layout that a site uses in multiple places; and Page design is the presentation definition for a Page and consists of one or many Partial Designs and renderings.

Partial Designs are smallest and reusable block.  Partial Designs allow planning and creation of common collection of renderings and associated data, for consistent appearance across the site.
Page designs are the bond between Partial Designs and actual Page instances of a site. Page designs can be assigned zero or more Partial Designs, which overlay each other into a Page.

6. Creative Exchange 
Creative Exchange is one of the greatest features in SXA, which makes a front-end developer’s life easy. It allows front-end developers to work on static HTML, CSS, and JS files, enabling them to export static site or pages and send them to creative designers to work on these independently. Once the designer finishes the work, it can be imported to the enhanced design back into site.

7. Asset Optimizer
SXA site can be improvised by optimizing CSS styles and JS scripts. This can be achieved with SXA’s Asset optimizer functionality. The Asset Optimizer improves overall site performance by reducing the amount of data that needs to be transferred. This can be enabled/disabled from sitecore content tree.