Aus dem Off: Navigation und Inhalte platzsparend unterbringen

Für Webdesigner ist es oft eine Herausforderung, alle Inhalte einer Website für Mobilgeräte – vor allem Smartphones – aufzubereiten. Header, Navigation, Text und Bild, Seitenleisten und andere Elemente finden nur selten gemeinsam Platz im mobilen Layout. Off-Canvas-Layouts sind hier die Lösung des Problems. Sie verstauen bestimmte Inhalte dort, wo sie nicht stören – außerhalb des sichtbaren Bereichs.

Die Idee ist, bestimmte Inhalte einfach von der Website zu verbannen, ohne sie gänzlich zu entfernen. Sie verschwinden lediglich außerhalb des Browserfensters beziehungsweise Displays. Per Knopfdruck werden sie wieder eingeblendet – dank CSS3 auch per schicker Animation. Off-Canvas-Layouts lassen sich mit CSS und JavaScript realisieren. Es gibt mittlerweile auch entsprechende Frameworks, die passende Lösungen für unterschiedliche Ansätze bereitstellen.

Off-Canvas-Layouts für Foundation

Die Macher des Responsive-Frameworks Foundation haben vier verschiedene Varianten für Off-Canvas-Layouts entwickelt und bieten diese zum Download an. Bei allen Layouts geht es darum, in der mobilen Ansicht entweder die Navigation zu verbergen und per Klick einzublenden oder Inhalte platzsparend unterzubringen.

Off-Canvas-Layouts mit Foundation

So wird aus einer horizontalen Navigation in der Mobilansicht eine vertikale Navigation, die am oberen oder unteren Bildschirmrand dargestellt wird. Alternativ kann die Navigation auch ganz aus dem Display verschwinden und es wird nur ein Menü-Button eingeblendet, der die komplette Navigation aus dem Off holt. Ein anderes Layout bringt untereinander angeordnete Inhalte platzsparend in Tabs unter.

Der Aufbau der Layouts ist einfach, so dass sie leicht abzuwandeln und für eigene Zwecke einsetzbar sind. Lediglich das Foundation-Framework muss eingesetzt werden, damit die Layouts funktionieren.

Variantenreiche Off-Canvas-Layouts

Webdesigner Jason Weaver hat eine Demo-Seite entwickelt, auf der er sehr schön demonstriert, wie sich Navigation und Inhalte per Off-Canvas-Layouts verstecken und einblenden lassen. Mit JavaScript, Media Queries und CSS3-Transitions werden interessante Effekte dargestellt.

Off-Canvas-Layouts von Jason Weaver

Aus einem dreispaltigen Layout in der Desktop-Ansicht wird so zum Beispiel mit abnehmender Auflösung zunächst ein zweispaltiges und bei geringer Auflösung ein einspaltiges Layout.

Fazit: Dank Off-Canvas-Layouts können alle Inhalte einer Desktop-Website auch sinnvoll auf kleinen Displays, etwa denen von Mobilgeräten, untergebracht werden. Die Entscheidung zwischen abgespeckten Inhalten oder überladenen Sites ist hinfällig.

(dpe)