Recommendations: Structuring pages

Abstract

Best practices for layout.

In SXA, you build your website with reusable pieces of content and layout. All these pieces together create the layout for your pages.

This topic describes the following recommendations for working with page designs, partial designs, snippets, and composites.

To make the editor’s life easier, design as much as possible using partial designs. Partial designs help create a consistent style, make the editor's work easier, and improve Experience Editor performance. 

What you should know about partial designs:

  • When renderings are placed on partial designs and assigned to a page through page designs, editors need to perform fewer operations when creating generic pages, such as articles.

  • Place an empty Container rendering or another rendering with an empty placeholder on your partial design to give your editors well-defined extension points. Set placeholder restrictions on those placeholders to indicate which components are allowed in those areas.

  • Leverage Snippets and page branches where local customization is needed. Partial designs improve performance.

Related topics

Do not make editors place multiple renderings to create a page that does not need a unique layout. For example, all article pages tend to look the same, which makes them a perfect candidate to define their structure in partial designs. In contrast, landing pages tend to vary a great deal, which makes them good candidates to have a minimal page design with large placeholders giving editors a great deal of flexibility.

Use partial designs when the page layout should be determined ahead of page creation.

If you want the editors to be able to style and change the layout, consider using composites or snippets.

Use composites when you want a group of renderings to have its own layout and you want the editor to be able to design it in the Experience Editor. Consider using snippets when you want to create a reusable group of renderings. A snippet consists of several renderings that can be designed separately in the Experience Editor. In the same way as with partial designs, you can group different kinds of renderings and reuse this group in different locations. The difference between a snippet and a partial design is that snippets are extensible, you can change the styling, and you can use them as often on the page as you want.

Related topics:

If you are not using some renderings and you do not have them styled – consider removing them from the Available Renderings section in the site. A clean toolbox, makes the editor's life a lot easier. It can be frustrating to drop a rendering on a page only to find out that it was not styled and does not fit the branding of your website.

image1.png

To have some control over the renderings that can be placed in a placeholder, you can set placeholder restrictions. Excluding renderings that you never expect to use, or do not want to use, makes the editor's job much easier.

Related topics

All sites in a single Tenant use the same set of templates. Each of them can have separate style items or even use a different grid. Unless you are using a single shared site for the whole tenant as your styles' holder, this can result in broken layouts on some sites.

As an alternative, use partial designs or snippets with sets of preconfigured renderings. Setting your presentation up in this way creates a balance of flexibility, and makes the experience more streamlined and manageable.

If you have designs that you want to share between all sites within a tenant, consider creating shared site functionalitythat contains your page and partial designs so that you can reuse those.

Related topics:

When you create partial designs that only differ from each other slightly, consider creating a base partial design with the common layout elements and then inherit that partial design in the more specific partials. With partials' inheritance, you can maintain the shared aspects of your design in one place and easily propagate those changes to all the different page types that the authors are creating.

For example, if you need two slightly different headers. By taking advantage of partials' inheritance, you can create one base partial design with, for example, the navigation rendering, and then create other partials on top of that one and fill in the differences with different logos, and so on. This way, you avoid the creation of numerous templates with only minor differences.

SXA-base-partial-design.PNG

By default, when you add a rendering to a page, it takes the full width of the column. In the Experience Editor, you can change this in the grid settings of the rendering. To change the default settings permanently, you must change the grid settings in the Content Editor. 

Always consider changing the layout of a rendering first before placing additional splitters on a page. This way, you limit the number of renderings, which makes your page more responsive, and improves the speed of the Experience Editor.

Related topics: