Learn how to prototype web and mobile apps

How to prototype liquid layout elements for your web and mobile app prototypes

In the previous tutorial, we looked at how to prototype adaptive layouts. You can combine this feature with liquid layouts to build responsive websites. In this tutorial, we will look at how to build liquid elements, useful when you need an element to adapt its width to the screen, and how to work with the layout properties of containers like Dynamic Panels.

If you want to have an element that always has the same relative width as the screen, you need to define this with the use of events.

You need to select the element and add an ‘On Window Resize’ + ‘Resize’ event . This action lets you define both the height and the width of the element in four different ways:


  • Current: leaves the height/width as it is at that moment of execution.
  • Fixed: changes the height/width to the value of pixels indicated.
  • Calculated: define the height/width as the result of a calculated expression. You can use the current height or width of the page in that expression.
  • Relative to parent: defines the height/width as a percentage of the one in its parent container. The entire page, a cell or a Dynamic Panel can function as Parent containers.

If you want to have an element that is always as wide as the screen you can choose ‘Relative to parent -> 100%’. If you want its width to always be the same proportion of the screen, you can select ‘Calculated’ and build an expression using the constant ‘Window width’.

If you want to prototype a responsive web or app take a look at the next tutorial, which includes an example for clarification.

Next tutorial: Responsive design in your prototypes


  1. Jennifer

    October 28, 2014 at 1:12 pm

    This has been very useful, however I’m designing a responsive site with a fluid middle column, and two fixed width outside columns. When adding the event, it applies “Relative to parent” to all items on the page.

    Is there any way i can apply it to just the middle column?


    • admin

      December 9, 2014 at 1:07 am

      Yes, you can use a table and force through events that on page resize executes a resize event on those ‘fixed’ columns with a fixed value

  2. SV

    July 9, 2015 at 2:02 am


    Is there a way to convert an existing prototype designed specifically for a version of IOS to be ported to a responsive design, without having to recode the whole set of pages/buttons for liquid layouts? Is there a global variable, or a support tool that would allow me easily convert a static design to a responsive one?

    • Lidia Rodriguez

      July 9, 2015 at 7:55 am

      Hi, you can create a responsive prototype using tables, or an adaptative layout. Currently there is not another way to do so.