Responsive Webdesign
Responsive Webdesign, das sich Bildschirmgrößen flexibel anpasst, ist im Zeitalter der schier unendlich vielen Displayabmessungen zum Standard der Webseitengestaltung geworden. Dabei gibt es immer wieder neue Konzepte dafür, wie man bei unterschiedlichen Ausgabe-Screens navigiert und die Webseiteninhalte am Bildschirm zur Verfügung stellt. „Off Canvas“ heißt eine aktuelle Lösung, die besonders kompakt und platzsparend ist.
Oben: Das Prinzip von Off Canvas anhand eines Smartphone-Bildschirmes erläutert. Für den Anwender scheint es so, als wären links und rechts neben dem Hauptscreen zunächst „versteckt“ weitere Seiten, die per Gestensteuerung mit Fingerwisch oder über die Navigation oben abrufbar sind und sich dann über die Hauptseite aufklappen.
Per Fingerwisch: Responsives Gestalten auf kleinstem Raum
Off Canvas ist eine Lösung, die durch die Nutzung in großen Sozialen Netzwerken wie Facebook inzwischen weit verbreitet ist, gerade bei mobilen Seiten, die neu aufgesetzt werden. Off Canvas heißt frei übersetzt „außerhalb des Bildschirms“ oder aber „ausgeschaltete Seite“. Das bedeutet, dass die Webseiteninhalte nicht mehr als langer Streifen untereinander erscheinen und man ewig scrollen muss, sondern dass Seiten über eine Navigation am oberen Rand meist über der Hauptseite ausklappen oder von links oder rechts mit dem Finger auf den Screen gewischt werden können.
Oben: Ein Off-Canvas-Beispiel aus dem Facebook-Seitenmanager. Über die Navigation oder per horizontalem Fingerwisch erscheinen die Seiten nebeneinander. In der Mitte des Screen-Bildbeispieles sieht man den Wechsel von der Seite links zu der rechts.
Horizontales Scrollen von nebeneinander angeordneten Seiten
Man kennt das von Facebook, wenn man in der Navigation oben auf Kontakte oder Kommentare geht. Was bei einem sozialen Netzwerk Sinn macht, greift auch bei herkömmlichen Webseiten um sich – gerade auch, wenn diese komplexer verschachtelt sind und viele verschiedene Inhalte bzw. Rubriken zu bieten haben. Off Canvas ist also eine kompakte, schnelle, übersichtliche und platzausnutzende Möglichkeit, eine Webseite zu strukturieren und auf kleinen Bildschirmen darzustellen.
Oben: Die aktuelle Mashable-Seite in der Desktop-Version, die – siehe rote Markierungen – in drei Rubriken auf der Hauptseite gegliedert ist. Und so sieht die Seite auf dem Smartphone aus:
Oben: Zwei Screens von Mashable am mobilen Gadget. Links die Startseite. Geht man dort ganz oben links auf den Navigationspunkt, öffnet sich neben der Startseite ein Menü. Eine Besonderheit ist das Untermenü „Hot/Rising/New“, das weitere Off-Canvas-Seiten nebeneinander öffnet und so die Rubrizierung der Desktopversion auf schmalen Bildschirmen mit wenig Platz umsetzt.
Zwei unterschiedliche Modelle: Vom Parallax Scrolling zu Off Canvas
Ursprünglich war der Ansatz von Responsive Webdesign, die Desktopseite so zu flexibilisieren, dass die sich auf mobilen Devices umbricht, das heißt stufenweise an kleinere Bildschirme anpasst und dabei vertikal übereinander schichtet. Auch das hippe Parallax Scrolling, bei dem man in die Webseitenbereiche gelangt, indem man von oben nach unten scrollt, verteilt die Inhalte vertikal. Bis man also alles erfasst hat, dauert das seine Zeit. Die klassische nicht-responsive Webseite ging von einer Navigation aus, die meist links saß und im Laufe der Entwicklung immer öfter nach oben gewandert ist. Von dieser platzsparenden Hauptnavigation, die von der knappen Bildschirmbreite nichts wegnimmt, geht Off Canvas aus.
Oben: Die Techseite „The Next Web“ links mit der Desktopvariante und rechts mit der Off-Canvas-Umsetzung für kleine Bildschirme.
Fazit zur Off-Canvas-Konzeption
Zusammenfassend kann man sagen, dass mit Off Canvas das Web kompakter wird und dass über einfache Navigationselemente Seiten mehr übereinander oder nebeneinander liegen, als das in der Vergangenheit der Fall war. Die langen Streifen sind damit vorbei: Verschachtelung ist angesagt.
