Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

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)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

3 Antworten auf „Aus dem Off: Navigation und Inhalte platzsparend unterbringen“

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é

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! :)

Schreibe einen Kommentar zu SiGa Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.