Responsives Layout

1. Was ist ein responsives Layout?

Eine responsiv aufgebaute Seite ermöglicht eine Darstellung der Inhalte, die sich an die Größe des Browserfensters anpasst. Anordnung, Design und Sichtbarkeit einzelner Elemente lassen sich individuell beeinflussen. Hierdurch ist es möglich, Inhalte einer Seite für verschiedene Bildschirmgrößen benutzerfreundlich zu präsentieren. Intrexx lässt die Definition von Gestaltungsregeln für die drei unterschiedlichen Displaygrößen zu.

Dem Prinzip mobile first folgend wird eine responsive Seite zuerst für das kleinste Ausgabegerät konzipiert. Gestaltungsregeln für die kleinste Displaygröße werden automatisch auch für größere Displays angewendet. Die Regeln werden also von klein nach groß vererbt, sofern diese nicht explizit überschrieben werden.

Seiten, die für kleinere Displaygrößen konzipiert wurden, können auch auf größeren Geräten verwendet werden. Da dort jedoch mehr Platz zur Verfügung steht, kann dieser über die Möglichkeiten des responsiven Layouts besser genutzt und um weitere Inhalte ergänzt werden. Elemente können dazu neu angeordnet werden.

2. Welche Elemente spielen eine Rolle im responsiven Layout?

Das Element Raster finden Sie im Modul Applikationen. Es kann für ein responsives Layout der Applikationsseiten eingesetzt werden. Sein Pendant, das Raster, das für die Gestaltung von Portalseiten eingesetzt werden kann, finden Sie im Modul Design. Das selbe Prinzip finden Sie in den Grid-Einstellungen für Portlets auf Portalseiten. Grundelement einer responsiven Seite ist immer ein Raster mit 12 nebeneinander liegenden Einheiten. Im Raster werden Container angeordnet. Ein Container kann 1-12 Einheiten eines Rasters in seiner Größe einnehmen und wird immer als div-Element umgesetzt.

Mit einem div-Element können mehrere Elemente wie Text, Grafiken oder Tabellen in einen gemeinsamen Bereich eingeschlossen werden. Das div-Element beginnt stets in einer neuen Zeile des Fließtextes. Damit können Bereiche erzeugt werden, die mit Hilfe von CSS formatiert werden können.

Das Raster-Element kann beliebig oft verschachtelt werden und bietet dadurch eine Vielzahl an Gestaltungsmöglichkeiten. Raster und Container können auf einer Seite auch zusammen mit nicht responsiven Elementen verwendet werden. Es können beliebig viele Container, jedoch mindestens einer, in einem Raster untergebracht werden. Es wird versucht, die Container der Reihe nach im Raster zu platzieren. Wird die zwölfte Einheit überschritten, wird der betreffende Container in eine neue Zeile bei Rastereinheit 1 positioniert.

3. Wie werden responsive Seiten konfiguriert?




Für den Aufbau einer responsiven Applikationsseite kann das Raster aus dem Elemente-Bereich per Drag & Drop auf der Arbeitsfläche positioniert werden. Bei der Anlage des Elements finden Sie bereits zwei Container (Container 1, Container 2) im Raster. Ein Doppelklick auf einen der Container öffnet den Zoom-Bereich.



Der Zoom-Bereich ist eine eigene Arbeitsfläche für jeden einzelnen Container, auf der Sie die Elemente anlegen können, die Sie im aktuell ausgewählten Container sehen wollen.



Auf der Arbeitsfläche wird eine Vorschau der Container mit den enthaltenen Elementen angezeigt. Auch von hier aus lässt sich der Eigenschaftendialog der Elemente mit einem Doppelklick auf das Element, hier z.B. das Eingabefeld, öffnen. Neue Elemente können auch hier angelegt werden. Der Eigenschaftendialog des Rasters wird mit einem Doppelklick in den Randbereich geöffnet.



Auf der Symbolleiste finden Sie die Schaltflächen S, M und L, hier rot markiert, mit denen Sie in die Vorschau der verschiedenen Bildschirmgröße umschalten können. Das Rasterelement auf der Arbeitsfläche wird dann jeweils in der entsprechenden Vorschau angezeigt.

Bildschirmgröße S

Alle Einstellungen, die für die Bildschirmgröße S (SMALL, z.B. für Smartphones) definiert werden, gelten auch für die Bildschirmgrößen M (MEDIUM, z.B. für Tablets) und L (LARGE, z.B. für Desktop-PCs), solange für diese Ausgabegrößen keine eigenen Einstellungen gesetzt wurden. Die Einstellungen aus der Bildschirmgröße S werden an die Bildschirmgrößen M und L vererbt.



Hier sind im Eigenschaftendialog des Rasters auf dem Container-Reiter drei Container definiert. Mit der Breite wird vorgegeben, wie viele Einheiten der 12 Einheiten, die ein Raster pro Zeile zur Verfügung stellt, belegt werden sollen. Wählbar ist eine Breite von 1 bis 12. Wird hier wie bei Container 1 keine Breite vorgegeben, so nimmt der Container automatisch alle 12 Einheiten des Rasters ein. In der Vorschau unten im Dialog sehen Sie immer die aktuelle Verteilung der Container im Raster.

Bildschirmgröße M




Für die Bildschirmgröße M ist hier für die ersten beiden Container eine Breite von 6 vorgegeben. Jeder der beiden Container nimmt also, wie in der Vorschau angezeigt, die Hälfte des Rasters ein. Container 3 erbt hier die Breite aus der Bildschirmgröße S, da keine abweichende Breite eingetragen wurde.

Bildschirmgröße L




Für die Bildschirmgröße L wird hier für alle drei Container eine Breite von 4 vorgegeben. Jeder Container nimmt je ein Drittel des Rasters ein.

4. Allgemeine Eigenschaften des Rasters

Alle Informationen zum Thema finden Sie hier.

5. Container-Einstellungen

Alle Informationen zum Thema finden Sie hier.

6. FAQ

Warum hat das Raster zwölf Einheiten?

Zwölf Einheiten sind im Bereich Webdesign weit verbreitet und bieten die größtmögliche Flexibilität bei der Gestaltung der Seiten.

Was ist der Unterschied zwischen mobilen und responsiven Seiten?

Responsive Seiten sind kein Ersatz für mobile Seiten. Welcher Aufbau sinnvoll ist, ergibt sich aus dem jeweiligen Anwendungsfall. Hier die Vor- und Nachteile von mobilen und responsiven Seiten:

Mobile Seite Responsive Seite
+ Geringeres Datenvolumen, da weniger CSS- und JavaScript-Dateien übertragen werden - Auch ausgeblendete Container werden übertragen
- Es müssen gesonderte Seiten für Desktop-PCs und mobile Endgeräte erstellt werden + Ansichts- und Eingabeseiten müssen nur einmal erstellt werden
+ Automatische Anpassung an verfügbare Displaygröße
+ Gut geeignet bei schlechter mobiler Datenanbindung, z.B. kein WLAN + Gut geeignet, wenn alle Clients über optimale Datenanbindung, z.B. WLAN, verfügen
- Anpassungen müssen auf mehreren Seiten durchgeführt werden + Geringerer Wartungsaufwand
- Höherer Konzeptionsaufwand, da die Seite für drei Bildschirmgrößen entworfen werden muss
+ Design und Inhalt kann optimal an die Bildschirmgröße angepasst werden
+ Jederzeit parallel zu einer bestehenden Desktop-Version realisierbar

Warum ist der letzte Container im Raster immer ganz rechts positioniert und wie kann ich das ändern?

Dieses Verhalten ist der Anpassung an unterschiedliche Browser geschuldet. Soll auch der letzte Container im Raster direkt beim Vorgänger positioniert werden, so können Sie in den Container-Einstellungen die Einstellung "Letzten Container immer am rechten Rasterrand positionieren" deaktivieren. Wenn Innenabstände nicht entfernt oder eine gleiche Spaltenhöhe erzeugt wird, wird der letzte Container direkt an seinem Vorgänger positioniert.



Hier sehen Sie in der Vorschau im unteren Bereich des Dialogs drei Container, jeweils zwei Rastereinheiten breit und gleichmäßig im Raster angeordnet, wenn die Einstellung "Letzten Container immer am rechten Rasterrand positionieren" aktiviert ist.



Und hier die Anordnung, wenn die Einstellung "Letzten Container immer am rechten Rasterrand positionieren" deaktiviert ist.

Wie kann ich einen Container auf einer Seite zentrieren und welche Auswirkungen hat das?

Alle Informationen zu diesem Thema finden Sie hier.

Wie werden Abstände zwischen Containern definiert und welche Auswirkung hat die Einstellung "Versatz"?

Über die Einstellung "Versatz" können ein Container und alle nachfolgenden um eine definierte Anzahl Rastereinheiten nach rechts verschoben werden.



Hier sehen Sie fünf Container, jeweils zwei Rastereinheiten breit.



Hier die gleiche Containeranordnung, jeweils zwei Rastereinheiten breit. Für Container 3 wurde ein Versatz von einer Rastereinheit vorgegeben.



Die selbe Containeranordnung, jeweils zwei Rastereinheiten breit. Für Container 3 wurde ein Versatz von einer Rastereinheit vorgegeben. Die Einstellung "Letzten Container immer am rechten Rasterrand positionieren" wurde deaktiviert.

Warum sehe ich auf meinem Desktop-PC keine Container, die ich für die Bildschirmgröße SMALL ausgeblendet habe?

Einstellungen wie z.B. Sichtbarkeit, die für die Bildschirmgröße SMALL definiert werden, gelten auch für die Bildschirmgrößen MEDIUM und LARGE, solange für diese Bildschirmgrößen keine eigenen Einstellungen getroffen wurden.

Warum braucht ein Tooltip feste Breiten, wenn es aus einem Container heraus geöffnet wird?

Wenn ein Tooltip aus einem Container heraus geöffnet wird, benötigt dieses zwingend eine feste Breitenangabe, da das Tooltip sonst nur so breit ist wie der Container, aus dem heraus es geladen wird. Wenn sich beispielsweise ein Container nur über eine Rastereinheit erstreckt, ist das Tooltip auch nur so groß wie die prozentual errechnete Breite der Rastereinheit. Die Breite eines Tooltips kann festgelegt werden, wenn Sie den Eigenschaftendialog der Schaltfläche, die das Tooltip lädt, öffnen. Auf dem Aktionen-Reiter finden Sie die Zielseitenoptionen. Klicken Sie dort auf Positionierung des Tooltips konfigurieren.

Wie können einzelne Container für unterschiedliche Bildschirmgrößen umsortiert werden?

Den Containern können die Eigenschaften "Push" oder "Pull" zugewiesen werden. Diese Eigenschaften ermöglichen es, einen Container um eine bestimmte Anzahl Rastereinheiten nach rechts bzw. links zu verschieben. Im Gegensatz zu der Versatz-Option werden dabei nachfolgende Container nicht verschoben. In der Regel werden die Push- und Pull-Eigenschaften zum Vertauschen von Containern gleicher Größe eingesetzt. Dabei erhält ein Container die Eigenschaft Push - Verschieben nach rechts - und der zweite Container die Eigenschaft Pull - Verschieben nach links.

Container können sich bei ungünstigen Werten für Push bzw. Pull überlappen, was in der Regel zu unerwünschten Ergebnissen führt.




Hier sehen Sie vier Container, jeweils drei Rastereinheiten breit, in der Bildschirmgröße MEDIUM. Container 1 und 4 sollen in der Ansicht LARGE ihre Position tauschen.



Dazu wird für Container 1 die Eigenschaft Push auf den Wert 9 gesetzt. Für Container 4 wird Pull auf den Wert 9 gesetzt.