MaestroThe UI design product. | Form Builder | All versions This feature is related to all versions.
A layout is a way to arrange Journey Maestro components on a form, so they are laid out according to device or browser screen sizes.
The layout allows you to configure the following aspects of components on the form.
A good component layout is extremely important for creating a good user journey. A layout can be the difference between a positive or a negative user experience, so it’s crucial to choose the most appropriate component layout for each of your forms.
You can use the following powerful techniques for creating good component layouts:
The layout configuration is shown below.
In this example, a text field takes up half the available space on larger devices. However, on smaller devices, the user is likely having issues reading the field labels or being able to enter data into the small field areas. Hence the default size on smaller devices is to take up all the space on a row. This is also why the default location of the field’s label is always on the top of the field – this ensures that the label and field don’t spread out too much on narrower devices.
The breakpoints for screen sizes are determined at the template level. These are set to appropriate defaults which usually cover the standard screen sizes that are available in the market today, but your Template Designer may change them if desired.
In several of the Avoka-approved templates, the breakpoint between a small screen and medium is 400 pixels (px), between medium and large is 560px and large to full screen is 780px. This means that any screen size under 400 pixels is considered a small screen, screen sizes between 400px and 560 is medium, 560px to 780px is large and anything over 780 is an extra-large screen.
The screen size will always equate to 12 columns, no matter the actual pixel width. So 400px equals 12 columns, 560px equals 12 columns, and so on. The only thing that changes is the width of the columns. Dividing 12 columns across 560 pixels would mean that the columns are wider than when you divide 12 columns across 400 pixels.
Basically, each row in your form contains 12 columns. When designing a form, you can decide how the 12 columns are divided. To get two equal text fields on one line you would need to change both text fields to 6 columns: 6 + 6 = 12.
If you don’t want them to be equal, you could set one to 7 columns and the other to 5 columns: 7 + 5 = 12.
Another possibility with the 12-column grid is to use multiple blocks on a row to give more flexibility.
In the screenshot below, there are two blocks on a row, each block containing components. The blocks are both set to 6 columns wide. The components within the block have their own 12 column grid which allows them to be arranged within the available space of the block. In block one there are two text fields both set to 6 columns wide. In the second block, there are three text fields, all three set to 4 columns wide.
The following examples illustrate several different Journey Maestro component layouts.
Next, learn how to validate a component layout.