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)
0 Antworten
Ich habe das Foundation-Framework schon verwendet und finde es überzeugend. Schön, dass ihr es hier immer wieder mal zum Thema macht! Und immer wieder interessant, wie sich die ganze responsive/mobile Geschichte entwickelt. Ich hab mir die Off-Canvas-Layouts direkt zum Testen heruntergeladen – danke für diesen Artikel, sehr nützlich! 🙂
Ja in der Tat sehr schön der Artikel. Könnt Ihr vielleicht bei solchen Artikel die das Responsive Design, bzw. Design für Mobilgeräte kurz mal eben ein QR -Code mit der Seite einbauen? Ich surfe oft mit dem PC ( ja sowas soll es nocht geben ) und dann nehme ich mir das Smartphone und tippe die URl noch einmal ein um zu sehen wie sich das auf dem Ziel gerät verhält.
Mit so einem QR code wäre das um einiges einfacher…
Gruß André
@Andre
es gibt einige addons/bookmarklets für deinen use case
zb
http://blog.pansapiens.com/2009/01/02/qr-code-bookmarklets/
VG!