Practical examples: Responsive design

1. 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, 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. Using the example of the Projects applications, that can be found in our demo portal "Event4Teams", we would like to provide you with an insight into the development of this 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.



In our document Application design: Style guide, you will find the model depicted above for the optimal application structure. The headings used in these practical examples use the same letter and number combinations from this document (e.g. A1 for the Overview page).

2. Creating the Overview page A1

2.1. Small

2.2. Medium

2.3. Large

2.4. Grid

2.5. Elements

3. Creating the Details page A2

3.1. Small

3.2. Medium

3.3. Large

3.4. Grid

3.5. Elements

An image gallery is used on the page at the points marked with the symbol. This control has custom styles that are not included by default.





If you would like to display a picture as well as the name of the developer, the container needs to be structured as shown below.

4. Creating the Edit page E2 "Task"

4.1. Small

4.2. Medium

4.3. Large

4.4. Grid

4.5. Elements

5. More information

Responsive layout
Application design: Style guide