Responsive Grid (Simple) Layout

In AwareIM there are two “responsive” layouts, i.e. layouts that can readjust themselves to the amount of screen real estate available on a particular device according to the rules you provide. This is important because you want your application to look good on all types of devices and screen sizes – big screens, smaller screens, tablets, mobile phones.

The first layout is a “simple” one. In this layout you just provide a list of the content panels that your screen will contain. The content panels will be displayed as a grid and you can define the number of rows and columns for this grid for each device type.

For example, let’s say your screen has 12 content panels. On bigger screens you want to maximise the real estate and display these panels as a grid with 3 rows and 4 columns. On smaller screens you would display the layout as a grid with 3 columns and 4 rows. On tablets – 2 columns and 6 rows; and on phones – one column and 12 rows. See the picture below:

To implement this layout in your visual perspective all you have to do is select the Responsive Grid (simple) layout in the Layout dropdown, define your 12 content panels and then go to the Layout Properties tab. In this tab you need to define the number of columns for each device type. You would define 1 for phones (up to 768 pixels wide), 2 for tablets (lup to 992 pixels wide), 3 for medium devices ( up to 1200 pixels wide) and 4 for large devices (wider than 1200 pixels).