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
SMALL (z.B. Smartphones)
MEDIUM (z.B. Tablets)
LARGE (z.B. Desktop-PCs)
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.
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.