Responsive Webdesign – Grundlagen

Tabellen darstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Tabellen stellen eine besondere Herausforderung beim RWD dar, denn eine normale Tabelle hat auf einem schmalen Bildschirm einfach kleinen Platz. Aber glücklicherweise gibt es jede Menge kreativer Lösungen ...

Transkript

Tabellen stellen eine besondere Herausforderung beim Responsive Web Design da, denn eine normale Tabelle hat auf einem schmalen Bildschirm einfach keinen Platz. Aber glücklicherweise gibt es eine Reihe von kreativen Lösungen. Ich habe hier mal eine Tabelle. Und wenn ich jetzt einmal hier den Viewport verkleinere und das Browser-Fenster kleiner mache, dann sehen Sie irgendwann schrumpft die nicht weiter, sondern es erscheint einfach so ein horizontaler Scroll-Balken. Und auf diese Art wird das Ganze dann natürlich auch auf einem Smartphone angezeigt werden. Und das ist natürlich sehr irritierend, wenn man jetzt innerhalb der Zeile scrollen muss, weil man dann natürlich auch den Bezug verliert. Also, was hat jetzt nochmal 12 Euro gekostet? Es gibt aber natürlich Lösungen für das Problem und eine möchte ich mal vorstellen, die von Chris Coyier stammt. Hier, auf dieser Web-Seite hat er das Problem mal und die Lösung vorgestellt. Ich aktiviere die Lösung jetzt einmal hier und zeige sie und nachher schauen wir uns dann den Code an. So, wenn ich das aktualisiere und jetzt das Browser-Fenster kleiner ziehe, die Tabelle schrumpft noch. Soweit ist noch alles ok. Und wenn es dann nicht mehr in Ordnung wäre, schaltet sich das automatisch in eine andere Darstellung um, wo immer jetzt hier, das ist der Inhalt einer Tabellenzeile, der so dargestellt wird. Da sehe ich genau, das ist das Produkt, der Preis und dann das nächste Produkt, der nächste Preis. Wie macht man sowas? Sie sehen hier mein HTML-Dokument, was ich vorbereitet habe mit dem Tabellencode hier unten. Schauen wir uns dann einmal den CSS-Code an. Die Tabelle ist kaum formatiert, da gibt es wenig Besonderheiten. Das Entscheidende ist jetzt, das was passiert, wenn eben zu wenig Platz zur Verfügung ist. Und ich habe hier jetzt mal den Wert von 600 Pixeln gewählt, aber das müssen Sie natürlich anpassen auf Ihre Tabelle. Was machen wir dann? Als erstes deaktivieren wir die normale Tabellen-Darstellung. Das heißt, für table, td und tr, das sind ja die Elemente, die eine Tabelle erstellen, für alle drei definieren wir display: block und machen die zu Block-Elementen. Die Überschriften brauchen wir nicht mehr in der schmalen Darstellung. Das heißt, die können wir ausblenden und das mache ich hier über position: absolute und sehr hohen negativen Werten für top und left. Jetzt kommen wir zu einem entscheidenden Punkt, nämlich zur Formatierung der Tabellenzelle. Diese wird relativ positioniert. Die relative Positionierung ist ja immer wichtig, weil wir damit ein Element, was sich dadrinnen befindet, absolut in Relation zu diesem Element positionieren können. Und was ganz wichtig ist, die Tabellenzelle erhält ein padding-left, hier im Beispiel von 30% Diesen Platz brauchen wir, weil wir dann diese Beschriftung hier einblenden wollen. Ok, dann können wir mit erzeugten Inhalten arbeiten. Und wir platzieren jetzt vor jeder Zelle absolut die einzelnen Beschriftungen. Für alle Tabellenzellen definieren wir hier einmal die Position und die Beschriftungen fügen wir dann für die einzelnen Zellen einzeln ein, immer die passende Beschriftung muss es natürlich sein. In der ersten Spalte steht das Produkt. Das heißt, ich lasse hier auch an dem ersten Produkt als Inhalt über erzeugte Inhalte einfügen. Und dann Beschreibung, Pflanzzeit, Blütenfarbe, Verfügbar, Preis, das entspricht verkürzten Versionen dieser Spaltenbeschriftungen in der großen Ansicht. Also, dieses hier lasse ich über erzeugte Inhalte vor dem eigentlichen Tabelleninhalt anzeigen. Zur Auswahl der einzelnen Zellen wähle ich hier den CSS 3 Selektor nth-of-type, womit ich immer das so und sovielte Element dieser Art auswähle. Und welches das sein soll, kann ich hier angeben. Mit diesen ganzen Formatierungen haben ältere IEs Probleme. Im Internet Explorer 10 wird es aber funktionieren und funktioniert es auch. Deswegen sind diese Formatierungen innerhalb eines besonderen konditionalen Kommentars, der diese Formatierungen vor IEs versteckt. Der Internet Explorer 10 hingegen, der das kann, der interpretiert auch konditionale Kommentare nicht mehr, sodass das eine gute Lösung ist. Das hier ist wie gesagt eine nette Lösung für Tabellen, aber es ist natürlich bei weitem nicht die einfache. Eine weitere schöne Lösung kommt von Zurb. Ich zeige sie hier einmal. Da sieht man, wenn das schmaler wird, dann kann man in diesem Bereich hier scrollen. Und der Vorteil dieser Lösung ist natürlich, dass man die Produkte besser untereinander vergleichen kann, als in der Lösung, die ich gerade vorgestellt habe. Und eine weitere schöne Lösung gibt es hierfür, die zeigt, dass man sich ganz davon lösen muss, dass es auch bei allen Viewports immer gleich aussehen muss. Hier haben wir unsere Tabelle bei großem Viewport und wenn ich das hier jetzt kleiner mache, wird stattdessen ein Diagramm, eine Grafik angezeigt. Warum nicht? Ist auch eine Möglichkeit. Die verschiedenen Lösungen für Tabellen bei kleinen Viewports zeigen, dass Kreativität gefragt ist bei den Überlegungen wie eine gute Darstellung bei wenig Platz aussehen kann. Dabei muss man sich oder darf man sich auch ganz von der Darstellung bei großen Viewports lösen. Inhalte müssen nicht gleich aussehen bei verschiedenen Viewports.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!