Resizable Interfaces


When you publish an interface to the web, it can be viewed by anyone with a web browser. This includes people using computers, tablets, and phones. Having an interface that will resize will allow you to let people with all these devices use your interface without having to scroll or deal with overcrowded display areas.

To make your interface resizeable

Open the Interface Settings Properties Panel by clicking on an empty portion of your interface. In this panel, select the option to have pages rescale.

That's it.

To optimize the resizing experience

In the default resizing mode, every object on the page will be repositioned and resized as the overall page size changes. The location of all objects is effectively a percentage of the page size. This simple approach to managing sizes on different devices works reasonably well for as long as the adjustments are not too big, but it can lead to buttons and other objects that are overly crowded or seem out of place.

Rather than letting all of the objects float, as they do by default, you can anchor them to different quadrants of the page - top, bottom, left, and right. When an object is anchored, it maintains its position (in pixels) relative to the side it's anchored against. When you anchor an object to one side, it will also stop changing size in that dimension. For example, if you anchor it to the bottom, then the height of the object will not change, but the width will. If you anchor it to the left and the bottom, neither the width nor the height will change. If you anchor it to opposite sides, for example, the top and bottom, the size will change in order to keep the distance to the edge of the screen constant.

To set the anchors, open the Styles Tab, and click on the anchors to toggle them on or off:

You'll need to experiment with your object settings to achieve the desired effects.

To test your resizing settings

Open Windowed Presentation mode from the build toolbar. As you resize the window the interface layout will adjust. The effects should be the same as you will see after publication. You can also test the published sight by resizing the browser window you are displaying you interface in.

Remember, most people will not resize their browser window. The initial size of their browser window will determine the layout of the page. Thus the adjustment from one size to another is not as important as the way it looks for different sizes.

Note Changing the page size will not move any of the objects you have laid out. The objects are placed on a page of the size you set, then adjusted after publication. Thus picking a page size that is similar to what you expect users to have is still very useful.