Responsive Webdesign

Übersicht
"Responsive Webdesign" hat das Ziel, Webseiten so zu gestalten, dass sie sich dynamisch an das jeweilige Ausgabemedium anpassen (Desktop, Tablet, Smartphone) und auf jedem Gerät gut bedienbar sind.

Das S10 Framework bietet hierzu passende Mittel an, die in der Regel auch ausreichen. Zusätzliche Techniken, zum Beispiel ein eigenes CSS-Stylesheet mit "Media Query" oder "Grid Design", sind bei Bedarf mit dem S10 Framework kombinierbar.

Beispiel
Die gleiche Liste sieht auf unterschiedlichen Geräten wie folgt aus:

Desktop

Smartphone Querformat

Smartphone Hochformat

In diesem Beispiel sehen wir die wesentlichen Ideen:

"Fluid Layout"
Im Filterbereich der Tabelle (Selektion von Kunde, Zeitraum...) belegen die einzelnen Elemente den zur Verfügung stehenden Platz. ohne dass eine feste zeilenweise Aufteilung definiert ist. Die Größe der Elemente bleibt fix.
Dynamische Spaltenauswahl
Nur im Desktop-Format werden der Kundenname und die Auftragsart angezeigt. Im Smartphone-Hochformat entfallen zusätzlich die Währung und die Kundenreferenz.
Dynamische Spaltenbreiten
Die Spalte "Nettowert" ist auf dem Desktop etwas breiter als auf dem Smartphone.

1. Fluid Layout
Legen Sie die einzelnen Blöcke als <div> Element der CSS-Klasse "infoblock" an, z.B.

<div class="infoblock">
<label class='label output' name='matnr'></label><br />
<input class="input valuehelp range" name="matnr_range" style="width:150px" />
</div>

Damit wird ein fester Block aus Label und Eingabefeld definiert:

Der gesamte Bereich enthält eine Reihe solcher "infoblock" Elemente, die nacheinander ohne Zeilenvorschübe aufgeführt werden:

<div>
<div class="infoblock"> ... </div>
<div class="infoblock"> ... </div>
<div class="infoblock"> ... </div>
</div>

Der gesamte zur Verfügung stehende Bereich wird bei der Anzeige mit den Infoblöcken gefüllt, wobei die Aufteilung sich je nach Format automatisch anpasst:

Smartphone Querformat

Smartphone Hochformat

Für jeden Block können Sie optional eine eigene Breite und Höhe angeben, z.B.

<div class="infoblock" style="width:160px; height: 50px;">

Unterschiedliche Höhen der Infoblöcke innerhalb eines Bereichs sollte man allerdings vermeiden, da das Layout andernfalls sehr unruhig wirkt.

Neben class="infoblock" gibt es im S10 Standard noch die vordefinierten ähnlichen Klassen "infoblock2" und "infoblocktext", die auch gemeinsam innerhalb eines Bereichs verwendet werden können.

class="infoblock"
Meist ausreichend für ein Eingabefeld

class="infoblock2"
Etwa doppelt so breit, für besonders lange Eingabefelder

class="infoblocktext"
Für die Ausgabe von kleinerem Fließtext geeignet. Breite wie infoblock2, aber variable Höhe.

Falls Sie abhängig von dem Geräteformate einzelne Infoblöcke ganz unterdrücken möchten, können Sie zusätzliche eine der folgenden Klassen angeben:

"portrait"
DIe Ausgabebreite des Geräts, oder Window-Breite falls Desktop, ist unter 620px.

"landscape"
DIe Ausgabebreite des Geräts, oder Window-Breite falls Desktop, ist über 620px.

"desktop"
DIe Ausgabebreite des Geräts, oder Window-Breite falls Desktop, ist über 1200px.

"noDesktop"
DIe Ausgabebreite des Geräts, oder Window-Breite falls Desktop, ist unter 1200px.

Beispiel:

<div class="infoblock landscape">
<label class='label'>Auftragsgrund</label><br />
<span class="output" name="augru@text"></span>
</div>

Der Infoblock "Auftragsgrund" wird nur im Fall "landscape" ausgegeben, d.h. nicht für Smartphone im Hochformat.

Die jeweiligen Grenzwerte sind für die gängigen Geräte ausreichend zur Unterscheidung der Formate. Wenn der Benutzer sein Gerät vom Hochformat zum Querformat dreht, wird sofort die entsprechende Darstellung aktiv.

Tipp
Zum Test der Darstellung können Sie z.B. im Chrome Browser, F12-Entwicklermodus, unter einer Reihe von Gerätegrößen wählen.

2. Dynamische Spaltenauswahl
Hierzu setzen Sie bei der Definition der Spalten eine der Klassen "landscape" oder "desktop" hinzu, falls die Spalte nur in dem betreffenden Format angezeigt werden soll.

Bitte beachten: Die Klasse sowohl bei der Spaltenüberschrift als auch bei der Spalte selbst hinzuzusetzen, sonst verschieben sich die Überschriften gegenüber den Tabellenspalten.

Beispiel:

Hierdurch wird die Spalte mit dem Text zur Auftragsart nur im "desktop" Format angezeigt.

3. Dynamische Spaltenbreiten
Hierzu verwenden Sie folgende Angaben, auch wieder sowohl bei der Spaltenüberschrift als auch der Tabellenspalte

--portrait-width
--landscape-width
--desktop-width

Diese übersteuern dynamisch die Angabe width. Wenn der Benutzer zum Beispiel sein Gerät von "portrait" nach "landscape" dreht, können einige Spalten breiter dargestellt werden.

Neben einer absoluten Breite können Sie hier auch prozentuale Breiten angeben sowie Rechenausdrücke mit der CSS-Funktion calc(). Wenn Sie zum Beispiel im "landscape" Fall einige Spalten mit fester Breite der Gesamtbreite 420px definiert haben und einer weiteren Spalte den gesamten noch zur Verfügung stehenden Platz einräumen wollen, geht das durch

--landscape-width: calc(100% - 420px);

Falls Sie den gesamten restlichen Platz auf zwei weitere Spalten gleichmäßig aufteilen wollen, wäre es

Ein passendes Design der Spaltenbreiten ist auch mit diesen Hilfsmitteln etwas knifflig. Bewährt hat sich folgende Vorgehensweise:

A Mit gleicher Spaltenbreite beginnen
Definieren Sie alle Spalten in der gleichen Breite, z.B. width: 100px; sodass Sie die Anwendung testen können und die richtigen Werte in der Tabelle erscheinen. Die nächsten Schritte sind mit realistischen Testdaten erheblich einfacher.

B Optimales Design für Desktop wählen
Definieren Sie jetzt mit width: ein optimales Desktop-Layout. Falls Sie sich bei einigen Spalten für prozentuale Werte entscheiden, ist es meist gut, hier durch max-width: eine maximale Breite hinzuzunehmen, damit bei sehr breitem Window die Tabellenspalten nicht unnötig weit auseinandergezogen werden.

C Der "landscape"-Fall
Als nächstes den "landscape Fall definieren. Die erste Entscheidung sollte sein, auf welche Spalten Sie ganz verzichten wollen, beispielsweise einen Text zur Auftragsart. Falls Sie pro Tabellenzeile eine Detailsicht vorsehen, können derartige Zusatzinformationen in der Detailsicht untergebracht werden, damit sie auch in den kleineren Formaten für den Benutzer mit einem Klick erreichbar. Geben Sie diesen Spalten die Zusatzklasse desktop, damit sie nur dort erscheinen.

Als nächstes die Spalten durchgehen, bei denen eine Mindestbreite erforderlich ist. Es macht z.B. bei Materialnummern und Kundennummern wenig Sinn, nur die ersten 6 Stellen anzuzeigen, dagegen kann ein Ort in der Regel aus den ersten 15 Buchstaben erschlossen werden, auch wenn es Orte mit vielen Buchstaben gibt.

Für die restlichen Spalten nun mit -landscape-width eine sinnvolle Breite definieren, so dass Sie zu der gewünschten Gesamtbreite kommen. Das Ganze testen, z.B. in Chrome mit F12. Auf dem Desktop können Sie auch die Window-Breite kleiner ziehen und beobachten, welche Spalten entfallen oder schmaler werden.

Bei Textspalten eventuell eine prozentuale Aufteilung der noch zur Verfügung stehenden Breite definieren.

D Der "portrait"-Fall
Das Vorgehen C müssen wir nun noch für das "portrait" Format durchführen. Die Überlegungen sind fast gleich. Sie tragen nun die Klasse landscape ein, um Spalten zu unterdrücken, und setzen die Spaltenbreite mit -portrait-width. Hier kommt es nun fast auf jedes Pixel an. Falls Sie wissen, dass die Geräte aller Benutzer im Portrait-Modus über eine bestimmte Breite verfügen, können Sie diese Grenze beachten. Ansonsten stellt sich die Frage, welche älteren Geräte mit geringerer Breite unterstützt werden sollen. Im Web findet man bei der Suche mit z.B. "smartphone display size" die Screen-Dimensionen gängiger Geräte.

Die Entscheidung, auf einige Spalten zu verzichten, wird hier im Unterschied zu dem landscape-Modus dadurch erleichtert, dass der Benutzer ja nur das Gerät drehen muss, um weitere Spalten anzuzeigen.

Komponente: S10 Framework