Skip to main content

Sitecore SXA - Getting started with development without designs in place

Introduction

Before discussing much about Sitecore Experience Accelerator, let start with the traditional way of working with the websites.

Below are few of the high-level steps that one should take while working with websites after getting the requirements

  1. Create wireframes that has all the web page elements
  2. Create Visual Designs
  3. Create HTMLs, CSS based on the Visual Designs
  4. Development of the functionality
  5. Content Authoring

One of the major problems with this approach is that it wouldn’t allow the stakeholders to start working in parallel. (Though, it might be possible in some cases where one can expect good amount of rework which might vary case by case)

To overcome the above problem, Sitecore has come up with a solution that allows us to start the work in Parallel and reduce the time to market. Sitecore has released a new module, Sitecore Experience Accelerator (SXA) which is compatible from Sitecore Experience Platform (XP) 8 – Update 1 onwards.

Below is the depiction of how one can work using Sitecore Experience Accelerator.

Source: https://doc.sitecore.net/sitecore_experience_accelerator/getting_started_with_sxa/introducing_sitecore_experience_accelerator

SXA Components

Below are the components that SXA uses.

1. SXA Toolbox

SXA offers us a toolbox (much like the toolbar available in Visual Studio IDE) using which you can just drag & drop the built-in components into the Sitecore SXA pages. These components are called as rendering and each rendering might optionally have rendering variants. For example, if listing is a rendering then displaying the list in detailed list or thumbnail list are rendering variants.

2. Responsive Grid & Column Layout

You might already be familiar with 12-column responsive grid (960px) if you have worked with Bootstrap. Yes, it’s the same in the SXA context. You can drag and drop your variants in the SXA grid and even create the Grid right from the Sitecore CMS admin panel.

3. Pluggable Themes

You can have multiple themes and opt to apply any of the themes to the website at any point of time.

4. Creative Exchange

One of the great features of SXA is to start the development of the website using a theme called Wireframe theme.

Create Exchange allows us to export the site theme which can be sent to Front End UI Designers who can apply the Styles and provide us (Sitecore developers) back with the updated assets and HTMls. Sitecore developers can import the updated them back to the site by importing the theme using Creative Exchange.

5. Assets Optimizer

If you are .NET developer, you might already be aware of Bundling and Minification. At a high level, in a similar way, Assets Optimizer would also optimize the CSS files and other assets like images etc. before rendering the response to the browser which would improve the performance of the website.

6. Page & Partial Designs

Partial designs help using to achieve UI reusability. Once designed, you can use them in multiple pages through the website.

Common Queries on SXA (FAQs) on Sitecore Experience Accelerator

  1. Does the SXA module ships with the default Sitecore XP instance?
  • No, it doesn’t ship with the default Sitecore XP instance. You need to download and install the SXA package separately.
  1. Does SXA package has any dependencies?
  • Yes, you need to install PowerShell extensions for Sitecore.
  1. Can I install SXA package on Azure Platform as a Service using Azure App Services?
  • Yes, you need to have Sitecore 8.2.1 update and Sitecore Experience Accelerator 1.2.0 rev. 161216 and later.
  1. Does a Front-end developer need to understand any special SXA specific syntax?
  • Yes, The Front end developer need to understand the default html tags that Sitecore adds along with the templates that are added where they could write the custom CSS

Share this post

Comments (0)

Leave a comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.