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.