Responsive Objects Ordering. How to properly organize content across different views?

Compatibility:

WebSite X5 Evo and Pro

When creating a Responsive Website, defining an effective content hierarchy is essential. It is not enough to decide which elements to include on a page: it is equally important to determine how these contents should reorganize themselves when the available space decreases.

The goal of responsive ordering is to ensure that texts, images, and Objects maintain a consistent, readable, and functional layout when moving from desktop view to tablet and smartphone.

With WebSite X5, this is managed through the Responsive Settings window, where you can control the order in which Objects will adapt to different resolutions.

Why Object ordering is important

Correctly defining the content order allows you to:

• set priorities among elements;
• improve readability and usability;
• avoid disorganized layouts;
• control mobile linearization;
• make the layout more effective across different breakpoints.

In practice, ordering determines how the page behaves when the desktop structure is no longer sustainable.

Where to manage ordering in WebSite X5

WebSite X5 automatically assigns an initial order to Objects, but this does not always correspond to the most effective solution. For this reason, it is recommended to:

• check the proposed ordering;
• evaluate the content hierarchy;
• manually adjust it when necessary.

To modify the content ordering, proceed as follows:

• Go to Step 4 - Pages.
• Open the desired page.
• Click the Responsive button.
• Access the Responsive Settings window: it displays a Responsive Bar with the list of active breakpoints.
• On the Responsive Bar, select the Desktop view: now the Grid shows the Objects present, numbered according to their current order.
• Click the Ordering button: inserted Objects become semi-transparent and selectable ones are highlighted with a red border.
• Choose the first Object among those highlighted in red and click to select it. The selected Object becomes fully opaque again and displays its assigned number. All other Objects remain semi-transparent and, if necessary, their numbering is updated.
• Click on all the other Objects on the page following the order you want to be used in the page content linearization process.
• To speed up the process, if the initial series of Objects does not need to be modified, you can open the menu available from the Ordering button and select Continue ordering from an Object: in this case, click on the Object from which you want to continue ordering. All previous Objects are confirmed, while you must click on the following Objects to define their position in the sequence.
• To complete the ordering procedure you must:
  • click on the last Object on the Page;
  • use the command Ordering > Complete ordering: ends the procedure by confirming the current order;
  • use the command Ordering > Cancel ordering: ends the procedure by canceling the changes made and restoring the initial order.

#tip - The goal of the ordering process is to arrange all the Objects on a page so they can be properly linearized. The program evaluates all possible ordering options and highlights in red only the Objects that can be selected without causing discontinuities that would prevent correct linearization.

Ordering strategy

Depending on which Object you click during the ordering process and how all Objects are arranged in the layout Grid, the selectable Objects highlighted in red will change each time, determining which Object can be chosen next in the sequence.

To better understand this step, consider the following example:

Image 1. Initial structure

With this Page configuration, when the Ordering mode is activated, the program highlights in red all the Objects in the first row because only these can be selected as the first item in the sequence.

By clicking on Object 1, the Grid changes as follows:

Image 2. Click on 1: choose between 2, 3, and 4

As shown, clicking on Object 1 confirms its position and the program asks you to select the second Object from among Objects 2, 3, and 4.

This is only one of the possible orderings: depending on the content, it might have been more appropriate to choose any of the other Objects in the first row as the first element.

Continuing with the example, suppose you have confirmed the positions of Objects 1, 2, and 3. At this point, the program allows you to choose whether to click on Object 4 or Object 5.

Image 3. Choice between 4 and 5

Choosing Object 4 instead of Object 5 has consequences for the next steps. In the first case, it results in a Page structure arranged in rows; in the second case, a structure arranged in columns.

Image 4. Click on 4: row-based structure

Image 5. Click on 5: column-based structure

Object Blocks

During the ordering procedure, it is possible to create structures where Object Blocks are formed: in Image 5, for example, Objects 1, 2, 3, and 4 form one Block, just as Objects 5 and 6 form another. An Object Block behaves as if it were a single Object and, for clarity, it is displayed on the Grid as soon as it is created.

Image 6.

Image 7.

Images 6 and 7 show how different ordering choices create different Object Blocks, which ultimately determine alternative Page structures.

In general, an Object Block does not necessarily remain the same across all Views.

Image 8. Object Block in Desktop view

Image 9. By making Object 4 invisible, the Block no longer forms in the next view

In Image 8, for example, Objects 1, 2, and 3 form a Block because they are aligned alongside Object 4, which spans both rows. However, as shown in Image 9, if a row break is inserted between the Block and Object 4 (possible in the Pro edition) or if Object 4 is made invisible, then in the next View Objects 1, 2, and 3 are no longer adjacent to other Objects and no longer form a Block.

Indivisible Blocks

When an Object Block remains unchanged across all Views (except for the Smartphone view, where the Page is fully linearized) and there is no way to break it apart, it is defined as an Indivisible Block. Indivisible Blocks are also displayed on the Grid and highlighted with a different color compared to regular Blocks.

Image 10. Example of an Indivisible Block

Image 10 shows an example of an Indivisible Block. As you can see, the “flower-like” arrangement of the Objects does not allow a clear row or column structure to be identified. This significantly limits ordering possibilities, prevents the insertion of Row Breaks between the involved Objects (a feature available in the Pro edition), and does not allow one Object to be hidden without automatically hiding all the others in the Block. Therefore, although they can still be managed, when Indivisible Blocks occur it is advisable to review the arrangement of the Objects in order to simplify it and gain greater flexibility.

Best practices

It is not possible to say in general that one ordering is more correct or better than another: everything depends on the content and the results you want to achieve. 

To avoid issues:

• prefer simple structures;
• avoid overly complex compositions;
• always check how blocks are formed;
• limit indivisible blocks.

Use Preview to check how the Page appears at each breakpoint. If the contents remain well-organized, it means the chosen ordering works correctly and can be kept.

In summary

Object ordering is one of the most important aspects of responsive design because it determines how content adapts to different resolutions.

With WebSite X5, you can control this process visually, creating a more effective, readable, and strategic structure without working directly on the code.

A good ordering improves usability, flexibility, and the overall quality of the project.