Sitecore Experience Accelerator (SxA)

Slides for my presentation at the Sitecore User Group in December 2016

1. Sitecore Experience Accelerator (SXA) Ruud van Falier Co-founder & Senior Consultant @ ParTech Sitecore MVP 2012-2016

2. 2 Who am I? Ruud van Falier Co-founder ParTech (2011) Sitecore MVP (2012 – 2016) E-mail: [email protected] Twitter: @ BrruuD

3. 3 What is SXA? Building a page Page & partial designs Themes Creative exchange HTML structure SXA renderings Overview

4. What is SXA? “ It’s Sex’ay !” - Reinoud van Dalen

5. 5 Out-of-the-box component library Out-of-the-box local datasource support Extended Experience Editor (drag & drop!) Wireframe design Helix-based architecture Increase productivity by working in parallel What is SXA?

6. 6 Working in parallel

7. 7 Working in parallel

8. Building a page in SXA

9. 9 Building a page in SXA

10. Page & partial designs

11. 11 Partial design: Presentation template that pre-populates placeholders with components Page design: Merge several partial designs into one design Can be assigned to content items (page items) Page & partial designs

12. 12 Page & partial designs

13. 13 Page & partial designs

14. Themes

15. 15 Consists of custom CSS, JS and Media Stored in the Media Library Don’t forget to check ‘Create new theme’ during site creation Themes

16. Creative exchange

17. 17 Export a theme to HTML, CSS, JS & Media (images, fonts) Modify the styling (not the HTML) Import the modified theme Allows front-end developers without any knowledge of Sitecore to apply styling to your website. Creative exchange

18. 18 Design process with out-of-the-box components: Create site with new theme Create partial designs (wireframe) Create page designs (wireframe) Create page item for each page design Export theme using creative exchange In parallel: Front-end developer applies styling to the theme Content editor creates pages and content Import theme using creative exchange Creative exchange

19. HTML structure

20. 20 All regular renderings can be placed in the following containers: h eader c ontent f ooter Meta renderings can be placed on Meta Partial Designs in the following containers: h ead b ody-top body-bottom HTML structure

21. 21 HTML structure

22. 22 HTML structure Grid system 960 pixels wide Divided over max 12 columns

23. 23 Grid system Row splitters <div class='row'></div> <div class='row'></div> Column splitters <div class='row'> <div class='grid-6'></div> <div class='grid-6'></div> </div> HTML structure

24. 24 SXA renderings <div class='component component-name '> <div class='component-content '> <!-- component html --> </div > </ div > HTML structure

25. 25 More details at https://doc.sitecore.net HTML structure

26. SXA renderings

27. 27 Tag cloud Search (with facets, sorting, paging) RSS feed Share buttons Login Carousel SXA renderings Image gallery Video player Maps (Google, Bing) WFFM wrapper Event calendar Language selector Site selector Just to get an idea of what comes out-of-the-box… Social login Simple content (Rich-Text, Title, Promo) Navigation (link list) Breadcrumb Splitters (layout structures ) Accordion

28. 28 Conclusion Improved Experience Editor experience (drag & drop, finally) Save back-end development time (out-of-the-box components) Shorten the development cycle in general by working in parallel Front-end developers require no Sitecore knowledge and less support from back-end developers

29. Thanks! Contact me: @ BrruuD [email protected]