Smartphones: Wohin mit der Sidebar?

Es ist keineswegs so, dass die Sidebar immer unwichtig wäre – zumindest kann man das nicht pauschal sagen. Oft enthält sie auch Informationen, die aus dem Inhalt herausgestellt wurden, um besser sichtbar zu sein. Aber eben auch nicht immer.

Der Klassiker: Unten anhängen

Das ist in der Regel das einfachste und man kann es auch gut damit argumentieren, dass die Leserichtung eben genauso ist.

Technisch werden Sidebars meist mit float:right am <div id=“sidebar“> realisiert und stehen auch im maschinenlesbaren Code nach dem Hauptinhalt. Somit wird mit einem einfachen float:none, width:100% am Handy quasi nur der „Normalzustand“ hergestellt. Also: alles in Butter.

Einfach „verschwinden lassen“

Auch dies eine häufige Variante, die vor allem dann gut ist, wenn die Sidebar ohnehin auf allen Seiten gleich ist, und entweder peinlich mager oder unübersichtlich üppig ist.

Ein einfaches display:none machts ungesehen.

Als Sidebar lassen

Genauso leicht, wie man am Handy nach unten scrollen kann, kann man auch seitlich scrollen – und da kann man die Sidebar positionieren.

Das Problem dabei: auf die Idee, dass man auch nach rechts scrollen kann, muss man erst einmal kommen. Ein Wink mit dem Zaunpfahl ist es, die Sidebar noch soweit in den Viewport stehen zu lassen, dass Buchstaben sichtbar sind; dass also deutlich sichtbar ist: da ist noch was.

Problem wieder dabei: Das sieht seltsam und störend aus, es wird für einen „Darstellungsfehler“ gehalten.

Mit Schalter einblenden

Das einblenden ist nicht schwer, viel schwieriger ist es, den Schalter dazu so zu positionieren dass man ihn bemerkt, ohne dass er stört.

Den Block positioniert man zunächst per CSS, so wie er sichtbar sein soll und stellt ihn dann mit display:none auf unsichtbar.

Der Schalter stellt dann nur das display none; auf display:block. Wers animiert will, kann jQuery verwenden oder CSS-Transitions. Display erlaubt keine Transitions; hier muss man auf andere Methoden zurückgreifen, etwas position außerhalb des Viewports.

Oben drauf

Diese Option wird man vielleicht wählen, wenn die Sidebar tatsächlich „herausgestellte“ Inhalte hat, etwa die nächsten Termine zu einer Veranstaltung, um die es im Hauptinhalt geht. Handy-Nutzer habens meist eiliger als Desktop-Nutzer und schauen eher auf Termine und Orte.

Wie einfach das technisch ist, hängt davon ab, wie das Gerüst gebaut ist. Im einfachsten Fall funktioniert es genauso wie „unten anhängen“, nur dass eben der Hauptinhalt unten angehängt wird.

In der gelebten Praxis ist es in der Regel nicht immer ganz so simpel. Zwar kann man schnell einmal die Reihenfolge der Blöcke ändern und mit CSS nachjustieren, das stellt allerdings einen heftigen Eingriff dar und könnte zb Google irritieren.

Oft ist es besser, die Inhalte der Sidebar per Javascript in einen leeren Block zu kopieren, das geht sogar mit einfachsten Bordmitteln:

document.getElementById("sidebar_mobile").innerHTML = document.getElementById("sidebar").innerHTML

Achtung: Bildergalerien und ähnliches könnten dann nicht mehr funktionieren, wenn sie vorher durch Skripte gestartet wurden.

Teilweise oben, unten, mittendrin

Zum einen kann man natürlich zb <blockquote> dazu bringen, nicht im Haupttext zu stehen, sondern als Marginalien in der Sidebar. Das bringt man am Handy wieder ganz leicht – nur mit CSS – wieder dort hin, wo es hingehört: Einfach das Gefickel rückgängig machen ;-)

Etwas haarig ist bei dieser Variante, dass sich die Blöcke gerne mal überlappen.

Mit gar nicht mal soviel jQuery kann man einzelnen Bereiche nach oben kopieren und von unten löschen. Etwas alles was die class=“wichtig“ hat. 

Zurück