Practical examples: Responsive design

Foreword

With the rise of the digital workplace, the need to be able to provide applications uniformly for various end devices is growing. With responsive design, the functions, design and content are adjusted accordingly to the respective display size of the used desktop, tablet or smartphone. Since version 8.0, users can also design and develop applications with responsive design with Intrexx. For this reason, we've created a practical guide for developing responsive applications with Intrexx. We would like to give an insight into the development of this application using the example of a project application. We'll show you how individual application pages were creates, which grid settings were necessary and which CSS styles the control elements need to be provided with, so that a responsive application can be created. With this, we're hoping to provide all application developers with a helping hand and are already looking forward to many responsive applications.

The headings used in these practical examples use the same letter and number combinations from this document (e.g. A1 for the Overview page).

Creating the Overview page A1

Small

Medium

Large

Grids

Elements

Creating the Details page A2

Small

Medium

Large

Grids

Elements

In the following illustration, an image gallery is used at the location marked with an star. This control has custom styles that are not included by default.

If an image is to be displayed in addition to the name of the developer at the position marked with an asterisk in the figure above, the configuration must be as follows:

Input page E2 "Enter task"

Small

Medium

Large

Grids

Elements

More information

Responsive layout