You want to create dynamic page layouts with WebIQ? You want to make your web visualization responsive? Experience the most important dynamic basic layouts with this WEBIQ BEST PRACTICE DEMO and understand how you can use them for your own layouts.

Why are dynamic layouts important in web visualization?

The classic visualization is pixel-oriented. That means: all widths and heights, as well as positions of the widgets are statically defined with pixels. Consequently, the HMI is static. It has no possibility to adapt to other screen sizes, resolutions or orientations. It works only for the one screen size and resolution for which it was designed.

In Web Visualization with WebIQ, you have access to the most advanced and powerful layout technology for HMI design: layout containers. You build your layout with different layout containers, parameterize them accordingly and place your widgets in them. This allows you to create your web HMI so that it automatically adapts to different screen sizes and orientations.

Pixel-oriented vs. dynamic layout example on different screen sizes

Dynamic layout is a prerequisite if you want to display your web HMI on different screen sizes (Responsive Design).

What does the WebIQ Layout Demo include?

The demo includes several basic layouts that we have created for you using WebIQ’s layout containers. This includes

Basic layouts of the WebIQ Layout Demo

You can export and use these basic layouts for your HMI project. You can see in the examples which layout containers we used to create the base layouts and how they are configured. You can create almost any dynamic layout by nesting two or three layouts together.

How did we make the base layouts with WebIQ?

We created the basic layouts using our two layout containers:

Layout Container Vertical Flex
Layout Container Horizontal Flex

You can find them in the Widget List under the category “Layout Container”. Best of all, you don’t need to know how to program to use them. Clicking and configuring is enough.

Dimensions: Fixed, Percentage or Flex

For the layout containers, the setting of the dimensions (i.e. the width or the height) is crucial. You can enter a width or height as follows:

In pixels
Percentage
Or flexible

Let’s look at widths of layout containers for the following basic layout:

Two-column, 1st column: 25%, 2nd column: 75%

The width of the first layout container, which represents the first column, is set to 25%. The width of the second layout container, which represents the second column, is – logically – set to 75%.

Now comes the trick with the flex-shrink

If you now insert a margin of for example 8 px. between the layout containers, or a margin from the left and right edge, you will notice that the layout does not work anymore. Why? Because 8px. + 25% + 8px. + 75% + 8 px. are more than 100%! As a result, the two-column layout sticks out on the right. This is not good.
What to do? Quite simple: you define that one of the two columns or layout containers may also shrink a bit. And for this you use the setting “flex-shrink”. Set this to 1 and now the layout works perfectly. A percentage width of 75% and flex-shrink = 1 means that the respective layout container is always about 75% large. But not exactly, because it shrinks in width to compensate for the spacing of 8 px. This is the trick.

Width of the layout containers for two-column layout with 25% / 75% column width.

And now let’s take a look at the following basic layout:

Two-column, 1st column: 250 px. (fixed), 2nd column: flexible

The width of the first layout container, which represents the first column is set to – you guessed it – 250 px. This means that the width is always 250 px. Now we tell the second container to use the remaining space. For this we set “flex-grow” and “flex-shrink” both to 1. This means that the container can grow or shrink in both directions.

Width of layout containers for two-column layout with 250 px. (fixed) + flexible column width

With this information you can look at the different basic layouts and understand how we created them. By mixing and nesting layout containers you then have the full range of layout possibilities.

All roads lead to Rome

In the WebIQ Layout Demo we present you with the simplest possible setting, a recipe that always works. You can also use other settings, e.g. with flex-grow. You can also use it to create interesting effects and layout behaviors. There are endless combinations and behaviors to discover here. But we don’t want to confuse in this demo.

If you want to know more, you can search the internet for “flex container” and watch the relevant tutorials.

Note: Styling of Layout Containers

You can style the layout containers with a border, but you don’t have to. In our WebIQ layout demo, we have set the layout containers off from the light background with a subtle gray. To do this, select the container, go to the “IQ STYLING” section in the Style Cockpit and set the background color to the appropriate light gray. You can also color the background gray and set the layout containers in white. Just play around with the possibilities.

Now it’s your turn

Just try it yourself. Take a look at the Live Demo of the WebIQ Layout Demo and load it into WebIQ Designer ( > Download). Here you can see how we made the layouts and get your own experience with the layout containers.

If you haven’t downloaded WebIQ yet, click below to register and download the free trial version of WebIQ!

And now have fun with the layouting!