Responsive design in your web and app prototypes
In this tutorial, we’ll look at how to prototype responsive apps or webs. To do this, you first need to understand tables (a pre-installed widget that you’ll find in the ‘Special Components’ group), cell layouts and ‘on Window Resize‘ events.
You can download an example here.
First step: define the layout using the ‘Table’ widget
In order to create a responsive prototype like the one in the example above, you need to build the basic layout using a table. Using a table widget is essential for responsive because you need to resize the whole layout in every window width/height change. The greatest thing about resizing a table, is that its cells will always keep their original proportions.
Once you have your table with all your cells, you may also want to define a layout for each cell. Defining a layout for a cell will help you guarantee the position of its content element whilst resizing. Always keep in mind that a table cell is like a container. You will find all the layout options in the Properties panel when a cell is selected.
Second step: using the ‘On Window Resize’ event
In order to control when to show the layout for computers and when the one for mobile, we need to create events that detect when the window size has changed (‘onWindowResize’) and perform the corresponding resize to the elements that need it. To do this, select the screen background and go to the events tab. Add an ‘On Window Resize’ + ‘Resize’ event to the elements that need resize.
Once back to the canvas, click on the ‘Add condition’ button and define a condition like this:
In the example above, the first element to be resized is the main table. We can see an ‘On Window Resize’ + ‘Resize’ applied to the table until it fits the whole window width.
This event will make the whole table and its cells resize when the window gets resized, always matching its width. However, this sole event is not enough. Each cell is resized but the content of each cell still keeps the same size. Therefore, we need to define an ‘onWindowResize’ event for each element inside each cell that says: ‘On Window Resize’ -> ‘Resize’ the element until it fits the whole width of its parent (i.e. the cell). We can do this by defining the element’s height and width as we saw in the tutorial on liquid layouts.
How do the images scale?
Let’s see the width expressions for the large image. It reads: ((windowWidth)-72). The number ’72’ is the margin you want the image to keep from the whole window. Notice that the parent of the Image is a table cell, which has its layout set as ‘horizontal centered’. Hence, ’72’ means that the image will keep a constant margin of ’36’ from the left and ’36’ from the right.
The expression for its height is: ((windowWidth)-72) * 0.62. The first part of the expression is the same used for the width and the last parameter ‘0.62’ it’s a proportional factor. It just means that the image height always has to be 62% of its width. It can be read as: (imageWidth) * (62/100). Just to be clear, if you use a 1 instead of 0.62 you eventually get a square image.