Praxisbeispiele Responsives Design

1. Vorwort

Mit dem Einzug des digitalen Arbeitsplatzes (Digital Workplace) steigen die Anforderungen, Applikationen für verschiedene Endgeräte gleichermaßen bereitzustellen. Durch responsives Design folgen Funktion, Design und Inhalt der jeweiligen Bildschirmauflösung des verwendeten Desktop, Tablet oder Smartphone. Auch mit Intrexx können Anwender seit der Version 8.0 Applikationen responsiv gestalten und entwickeln. Aus diesem Grund haben wir für Sie eine Praxisanleitung zur Entwicklung von responsiven Applikationen mit Intrexx verfasst. Am Beispiel der Projekte-Applikation, die Sie in der Online-Portalvorlage "Event4Teams" finden ist, möchten wir einen Einblick in die Entwicklung dieser Applikation geben. Wir zeigen Ihnen, wie einzelne Applikationsseiten erstellt wurden, welche Raster-Eigenschaften dafür benötigt werden und welche CSS-Styles die Kontrollelemente bekommen müssen, damit eine responsive Applikation entstehen kann. Wir hoffen allen Applikationsentwicklern damit unter die Arme greifen zu können und freuen uns auf viele responsive Applikationen.



In unserem Application Design Styleguide finden Sie das oben abgebildete Schema für den optimalen Aufbau der Struktur einer Applikation. In den Kapitel-Überschriften der Praxisbeispiele werden die Buchstaben- und Zahlenkombinationen verwendet, mit denen auch die Seitentypen in der Struktur gekennzeichnet sind (z.B. A1 für die Übersichtsseite).

2. Umsetzung der Übersichtsseite A1

2.1. Small


2.2. Medium


2.3. Large


2.4. Raster






2.5. Elemente








3. Umsetzung der Detailseite A2

3.1. Small


3.2. Medium


3.3. Large


3.4. Raster




3.5. Elemente

In der folgenden Abbildung wird an der mit einem Stern gekennzeichneten Stelle eine Bilder-Galerie verwendet. Dieses Element hat eigene Styles, die nicht im Standard enthalten sind.





Wenn an der in der Abbildung oben mit einem Stern gekennzeichneten Stelle zusätzlich zum Namen des Entwicklers auch ein Bild angezeigt werden soll, muss die Konfiguration wie folgt aussehen:



4. Eingabeseite E2 "Aufgabe erfassen"

4.1. Small


4.2. Medium


4.3. Large




4.4. Raster




4.5. Elemente


5. Weitere Informationen

Responsives Layout
Styleguide Application Design