Responsive Tabellen, Formulare und IFrames

31. Jan 2013

Während einfache Elemente, wie z.B. Bilder oder Texte mit wenig bis gar keinem Aufwand für Responsive Webdesign angepasst werden muss, sind bei Elementen wie Tabellen, Formularen und IFrames grundsätzliche Anpassungen notwendig.

Während einfache Elemente, wie z.B. Bilder oder Texte mit wenig bis gar keinem Aufwand für Responsive Webdesign angepasst werden müssen, sind bei Elementen wie Tabellen, Formularen und IFrames grundsätzliche Anpassungen notwendig, um diese auf den unterschiedlichen Bildschirmgrößen optimal nutzen zu können.

Die BASE beinhaltet inzwischen alle Elemente für Responsive Webdesign optimiert. So können Sie bestehende Projekte in vielen Fällen durch ein Update auf den aktuellen Stand bringen. Ältere oder angepasste Elemente lassen sich meist rein über CSS auf den neuesten Stand bringen.

Responsive Tabellen

Auf der einen Seite passen sich Tabellen mit width=100% wunderbar an die Breite an, auf der anderen Seite werden sie weder dadurch, noch durch max-width="100%" auf die Breite des Inhaltscontainers beschränkt, falls der Inhalt mehr Platz benötigt. Die Zellen mit einem Blockelement zu füllen und per JavaScript kleiner machen, ist meist auch keine Lösung, da die Inhalte so oft nicht mehr lesbar sind. Je nach Tabellenaufbau bietet es sich an, die Inhalte per JavaScript unterhalb einer bestimmen Auflösung anders anzuordnen. Hierfür gibt es bereits etliche jQuery-Module, die diese Aufgabe übernehmen.

Nun aber zum reinem CSS-Ansatz: Eine zu breite Tabelle wird über den eigentlichen Inhaltsbereich hinausgehen, sobald dieser nicht die notwendige Breite vorhält. Ob sie dann sichtbar ist oder verdeckt wird, hängt vom CSS des umschließenden Blocks ab.

Ein einfacher Ansatz ist nun, das DIV.elementTable mit overflow:auto zu versehen. So kann eine Tabelle auch bei schmalem Inhaltsbereich vollständig angezeigt werden. Wichtig in diesem Fall kann allerdings sein, dass zusätzlich darüber informiert wird, wie der gesamte Inhalt sichtbar gemacht werden kann. Mobile Geräte zeigen oft keine Scroll-Balken an und so kann es sein, dass der Besucher nicht erkennt, dass die Tabelle gescrollt werden kann. Über ein Responsive-Container lässt sich eine Info anzeigen, wenn die Breite einen definierten Wert unterschreitet. Zu beachten ist bei dieser Lösung auch, dass nicht jeder Benutzer weiß, wie man ein Element auf einem Touch-Gerät scrollen kann (bei Apple mit zwei Fingern). In diesem Fall hilft die zusätzliche Angabe -webkit-overflow-scrolling:touch. Damit kann die Tabelle mit einem Fingerwisch gescrollt werden.

Formulare

Grundsätzlich stellen Formulare keine besondere Schwierigkeit bezüglich Responsive Webdesign dar, solange Felder nur untereinander dargestellt werden sollen. Sobald zwei Felder hintereinander bzw. nebeneinander dargestellt werden sollen, wird die Sache schon etwas komplizierter. In diesem Fall muss generell mit relativen Breiten und Abständen gearbeitet werden. Eigentlich würde das schon genügen. Da die Rahmen allerdings den Breiten addiert werden, stimmt die Berechnung nicht mehr. Sie müssen dazu noch das Box-Modell über die CSS Angabe box-sizing:border-box anpassen. In diesem Fall werden die Rahmen nicht zur relativ angegebenen Breite der Eingabefelder hinzugezählt.

IFrames

Beim Einsatz von IFrames, wie sie z.B. bei Google Maps oder Youtube-Videos genutzt werden, stellt sich das Problem der Höhenanpassung bei geänderter Breite. Eine Höhe kann leider nicht relativ zur Breite definiert werden. Aus diesem Grund geht man den Weg über eine Padding-Angabe. Das Element wird absolut positioniert, während umschließende DIV relativ positioniert ist und die Höhe über eine relative padding-bottom Angabe festlegt. Über padding-bottom von 100% würde man also eine quadratische Darstellung erhalten. Bei Youtube-Videos erhält man mit padding-bottom:56.25% ein 16:9 Verhältnis.