Page Designer - Rows and Nested Rows

This article will address the following:

1. Rows and Nested Rows Overview
2. Settings 
3. Best Practices 

Rows and Nested Rows Overview

Summary: Rows and Nested Rows are only available in the Responsive Design Canvas. This Responsive Canvas feature tab (located top left of the page) allows you to drag rows onto the canvas, add in nested rows and change the variation of columns in each row by selecting one of the layouts. 

Difference between Rows and Nested Rows: Rows serve as containers or display spaces for tiles. The main difference between Nested Rows and Rows is that Nest Rows can only reside within Rows that already exist.

What is the purpose of Nested Rows? In simplest terms, Nested Rows help users organize and structure the elements of the page. As mentioned earlier, rows serve as containers or display spaces for tiles. They also serve as containers for Nested Rows. 

Examples of when you would use Nested Rows: Nested Rows serve many purposes. Here are some examples of when you may consider using a Nested Row:

• If you want more than one content element (tile) within a single row. Most tiles are very specific and do not require an entire row for content to be communicated or interacted with. Nested Rows in this case would assist users in organizing and structuring their elements (or tiles) within that single row. 
• If you want to manipulate (add or delete) tiles within that row, Nested Rows help in that it keeps changes very minimal so that users aren't repeating the same actions. If for instance, there were three elements, equally spaced out, via Nested Row, within a Row. The user wants to get rid of all of the elements within that row but keep the structure of the Row and Nested Row, they can do so easily. Now the user wants to get rid of all of the elements along with the Nested Row but maintain the structure and style of their Row, they can simply delete the Nested Row instead of having to go through each individual tile or content element. 

Still Unsure? For more information and a better understanding, consider the article that discusses Row Settings in more detail. 

Settings

Row: For you to be able to place tiles onto the page, you will need to place rows onto the page. In order to do this, you will need to first select your desired Desktop (and Phone Landscape) layout, then grab the row icon and drag it onto the canvas. This will create a new row and display it in the layout that was chosen.

Nested Row: If you would like to nest a row inside an already existing row, you will be able to do this using the nested row option. To do this, you will need to first select the Desktop (and Phone Landscape) layout, then grab the nested row icon and drag it onto the desired row column that you would like to put the nested row into. This will create a new nested row on the page.

Column buttons: A set of buttons are under each of the responsive size settings. These allow you to choose the number and spacing of the columns for each individual row. This lets you select how many tiles you want to place in a particular row as well as what it will look like on smaller devices.

Number and layout of columns can be set independently between aspect ratios. For example, if you want to set the elements that appear on desktop to appear in a column of three and want the same layout for a tablet, simply select the three column layout for those two aspect ratios. Now when moving between desktop and tablet the three column layout will remain intact and only rearrange once the user drops to a lower aspect ratio. 

The available layouts for a given aspect ratio are displayed at the top left of the tile ribbon. 

Best Practices

• Rows are more than just spaces for tiles, they are primarily spaces for Nested Rows. Nested Rows allow you to place more than one element or tile within a single row. For instance, if you have a Row, you can put in a Nested Row with two equally divided columns. From there, you can drag in unlimited amounts of Nested Rows within the Nested Row with the two columns. Nested Rows can be added to both sides of the column. Although we do not recommend the overuse of Nested Rows within a single Row, having that capability can help in various ways.
• Using Nested Rows also allows you to create neat banded experiences, where your row serves as the primary background, and your nested row serves to center your content. This is for a user friendly mobile experience that looks great on desktop as well.