Responsive Retrofitting Teil 2
Diese kleine Serie gibt ein paar Beispiele, wie man ein paar knifflige Aufgaben beim „responsive-fähig-machen” einer Desktop-Seite lösen kann.
Wie schon in Teil 1 zum Thema „Responsive Tabellen“, nochmals vorab der Hinweis, dass man bei einer umfangreicheren Seite mit neuer Code-Basis im Mobile-First-Modus starten sollte.
Ein häufiges Problem beim sogenannten „Responsive Retro Fitting”, also bestehende Desktop Webseiten „responsivefähig” zu machen, ist die visuelle Neuordnung von Inhalt, wenn man am bestehenden Markup nichts ändern kann/darf.
Ein kleines Beispiel dafür:
Auf einer Desktopseite ist das User-Login-Formular in der „rechten” Spalte. Linearisiert man jetzt das Layout, so dass die Inhaltscontainer nicht mehr nebeneinander floaten, würde das Login-Formular erst unter dem Hauptinhalt kommen. Das kann ja durchaus so gewollt sein, meist möchte man aber das Login-Formular als ersten Inhaltsbereich auf der Seite sehen, um sich schnell einloggen zu können und nicht erst lange scrollen zu müssen.
Ein anderes Beispiel: „Aktuelle News” in der rechten Spalte, News-Listenansicht in der „linken Spalte” – die aktuellen Nachrichten erwartet man in der Smartphone-Ansicht eher oberhalb der alten News.
Ein typisches Markup
<div class="container">
<div class="col-left">
left content
</div>
<div class="col-right">
right content
</div>
</div>
Gesetzt den Fall, dass man die Elemente bereits fluide mit prozentualen Breiten ausgestattet hat, könnte man für kleine Bildschirme (wir nehmen hier kleiner als 600px an) folgendes CSS zuweisen um die Reihenfolge der Spalten zu verändern.
CSS
@media screen and (max-width: 600px) {
.container {
display: table;
}
.col-left {
display: table-footer-group;
}
.col-right {
display: table-head-group;
}
}
Hierbei kommt ein kleiner Trick zum Einsatz, der eigentlich für das Styling von Tabellen gedacht ist, nämlich das Setzen einer Display-Eigenschaft für Table-Head bzw. Table-Foot. Das ist zwar ein wenig dirty, aber es funktioniert.
Dieser Trick wird von allen modernen Browsern verstanden, selbst der IE8 würde das machen – der bekommt aber normalerweise keine Smartphone-/Tablet-View, da nur auf Desktop-Geräten im Einsatz, wenn er überhaupt noch was bekommt…
Allerdings begegnet uns hier ein kleines Problem – table-footer-group nimmt kein padding an, da es eigentlich nur als Container ohne Eigenschaften agiert.
Eine alternative Variante:
@media screen and (max-width: 600px) {
.container {
display: table;
}
.col-left,.col-right {
display: table-caption;
padding: 1em;
}
.col-left {
caption-side: bottom;
}
.col-right {
caption-side: top;
}
}
Wir nutzen hier wieder CSS-Eigenschaften, die für das Stylen von Datentabellen gedacht waren, caption-side: top/bottom ist eigentlich für die Anordnung der Tabellenbeschreibung (<caption>) gedacht. So ist es möglich den Spalten auch ein padding zuweisen.
Anordnung mit Flexbox
Besser geeignet und für solche Anwendungsfälle gedacht, ist die Eigenschaft flex-direction: column-reverse im Flexbox-Kontext.
Flexbox column-reverse Beispiel
@media screen and (max-width: 600px) {
.container {
display: flex;
flex-direction: column-reverse;
}
.col-left,.col-right {
padding: 1em;
}
}
Hier werden die Elemente, die innerhalb des Container liegen als Spalte in umgekehrter Reihenfolge gestapelt. Die direkten Kindelemente vom Flexbox-Container (display: flex/inline-flex) werden in ihrer Reihenfolge umgekehrt angezeigt.
Angenommen man hat mehr als zwei Elemente, ist es ratsam mit der Flexbox-Eigenschaft order zu arbeiten, um genauer definieren zu können, welche Spalte an welcher Stelle kommt.
Flexbox Order Beispiel: HTML
<div class="container">
<div class="col-left">
left content
</div>
<div class="col-middle">
middle content
</div>
<div class="col-right">
right content
</div>
</div>
CSS
@media screen and (max-width: 600px) {
.container {
display: flex;
flex-direction: column;
}
.col-left {
order: 3;
}
.col-middle {
order: 2;
}
.col-right {
order: 1;
}
}Mit order kann man ganz genau bestimmen welches Element wann kommt.
Browser-Support
Der Browser-Support für Flexbox ist mittlerweile sehr gut. Allerdings sollte man für ältere Browser, die eine ältere Spezifikation von Flexbox implementiert haben oder noch Vendor-Prefixe verwenden ( Android, iOS, IE10, … ) und die dementsprechenden Eigenschaften verwenden. Zudem sollte man auf die Flexbugs-Liste ein Auge werfen, ob nicht ein Browser doch noch ein Bug mitliefert.
Für die Generierung des alten Flexbox-Syntax mit Browser-Prefix empfehle ich Autoprefixer. Wer Sass verwendet, aber kein Autoprefixer, dem sei das Flexbox Mixin ans Herz gelegt. Besser wäre aber Autoprefixer in seinen Workflow zu integrieren.
Happy Retrofitting!