--- title: "Showcase: Off Canvas in responsive Webdesigns" author: "Ellen Bauer" date: 2012-12-18 lang: de source: https://elmastudio.de/showcase-off-canvas-in-responsive-webdesigns/ --- # Showcase: Off Canvas in responsive Webdesigns ![Off Canvas Showcase](https://elmastudio.de/wp-content/uploads/2012/12/off-canvas-showcase.png) Die ersten Off Canvas-Layouts wurden in Native Apps wie Path oder Facebook umgesetzt. Doch spätestens seit Luke W diesen Sommer in seinem Artikel ["Off Canvas Multi-Device Layout"](https://www.lukew.com/ff/entry.asp?1517) auch Webdesigner und Entwickler auf diese neue Technik im responsive Webdesign aufmerksam gemacht hat, ging das Tüfteln los. Inzwischen sieht man immer mehr Webseiten mit der Off Canvas-Technik im Einsatz und es wird deutlich, welch tolle neue Möglichkeiten sich für responsive Webdesigns mit Off Canvas-Layouts auftun. ## Die Off Canvas-Technik erklärt Statt die Webseiten-Inhalte in der Version für kleine Bildschirmgrößen wie bisher einspaltig untereinander zu platzieren, kann man mit der Off Canvas-Technik (übersetzt ungefähr "außerhalb des Bildes/der Leinwand") auch auf mobilen Geräten Webseiten-Inhalte rechts und links vom Haupt-Inhalt der Seite platzieren. Da es aber nur wenig Platz hat, werden diese Neben-Inhalte (z.B. Navigationen oder Sidebars) auf kleinen Bildschirmen standardmäßig verborgen und nur wenn benötigt, mit einem Button in den sichtbaren Bereich der Webseite geschoben. Eines der bekanntesten Off Canvas-Beispiele in Native Apps ist Facebook. Hier kann je nach Bildschirmgröße eine linke und (auf Smartphones) rechte Sidebar-Navigation "aufgeslidet" werden. ![Die Facebook iOS-App auf dem iPad.](https://elmastudio.de/wp-content/uploads/2012/12/facebookapp-off-canvas.png) *Die Facebook iOS-App auf dem iPad.* Doch auch immer mehr responsive Webseiten nutzen die praktische Off-Canvas Technik, um so mehr Übersichtlichkeit und ein aufgeräumteres Layout auf mobilen Geräten zu schaffen. ## Off Canvas in responsive Webdesigns ### 1. Disney.com Auf [Disney.com](https://www.disney.com/) wird die Navigation der Webseite auf mobilen Geräten Off Canvas angezeigt. Ein kleineres Disney-Logo und der linksbündige Menü-Button werden dabei in einer dunklen Navigations-Leiste oben auf der Webseite angezeigt. Wenn der Nutzer den Menü-Button bedient, slidet eine umfangreiche Navigation ins Bild. Der Hauptinhalt rutscht nach rechts, wird abgedunkelt und kann nicht mehr gescrollt werden. ![Off Canvas Design von disney.com.](https://elmastudio.de/wp-content/uploads/2012/12/disney-off-canvas.png) *Off Canvas Design von [disney.com](https://www.disney.com/).* Die Untermenü-Punkte des Off Canvas-Menüs können dann noch einmal extra in einem Accordion-Menü aufgeklappt werden. So kann auch auf einer großen Webseite wie Disney.com eine übersichtliche Navigation auf mobilen Geräten geschaffen werden. ### 2. Mashable Erst seit ein paar Tagen ist das neue Webdesign von [Mashable.com](https://mashable.com/) offiziell im Einsatz und auch hier wird die Off Canvas-Technik eingesetzt. Mashable hat ebenfalls das Problem sehr viele Inhalte und Menü-Punkte unterbringen zu müssen. Die Off Canvas-Technik hilft, diese Problematik auch sehr kleinen Bildschirmen elegant und benutzerfreundlich zu lösen. ![Off Canvas Design von mashable.com](https://elmastudio.de/wp-content/uploads/2012/12/mashable-off-canvas.png) *Off Canvas Design von [mashable.com](https://mashable.com/).* Die blaue Navigations-Leiste bietet neben dem Platz fürs Logo außerdem Platz für eine Suche und Social-Media Icons. Die Haupt-Navigation von Mashable wird auf mobilen Geräten in einem linksbündiges Off Canvas-Menü angezeigt, das auch hier wieder den Menü-Button sichtbar gemacht werden kann. ### 3. The Next Web [The Next Web](https://thenextweb.com/) ist ebenfalls eine große Magazin-Webseite. Die Off Canvas-Technik wird hier im responsive Design verwendet, um neue und beliebte Artikel des Magazins anzuzeigen. ![Off Canvas auf thenextweb.com](https://elmastudio.de/wp-content/uploads/2012/12/tnw-off-canvas.png) *Off Canvas auf [thenextweb.com](https://thenextweb.com/).* Der Off Canvas-Inhalt ist bei The Next Web fixed positioniert, die Inhalte können über eine zusätzliche Scrollbar angeschaut werden. ### 4. Weitere Off Canvas Beispiele Auf der Webseite des [Nixon.com](https://www.nixon.com/) Onlineshops wird Off Canvas genutzt, um die Haupt-Navigation auf mobilen Geräten anzuzeigen. Bei den Untermenüs wird sogar eine zweite Ebene im Off Canvas-Menü genutzt. ![Off Canvas-Menü auf nixon.com](https://elmastudio.de/wp-content/uploads/2012/12/nixon-off-canvas.png) *Off Canvas-Menü auf [nixon.com](https://www.nixon.com/).* Die Webseite von [Kershaw Knifes](http://kershaw.kaiusaltd.com/) ist ebenfalls mit einem Off Canvas-Menü ausgestattet und beim Bedienen des Menü-Icons auf mobilen Geräte wird die Haupt-Navigation auf einem dunklen Hintergrund angezeigt. ![Off Canvas Layout von Kershaw Knifes.](https://elmastudio.de/wp-content/uploads/2012/12/kershaw-off-canvas.png) *Off Canvas Layout von [Kershaw Knifes](http://kershaw.kaiusaltd.com/).* Die Kershaw-Webseite ist auch ein Onlineshop und durch das "versteckte" Hauptmenü kann der Warenkorb-Button sehr schön gefeatured werden. ### Live-Demo der Off Canvas-Technik Im Zusammenarbeit mit Luke W hat der Web-Developer Jason Weaver eine [Off Canvas Live-Demo](http://jasonweaver.name/lab/offcanvas/) erstellt, in der die Technik noch einmal sehr schön in einem einfachen Beispiel demonstriert und auch technische Hintergründe erklärt. ![Off Canvas in der Live-Demo.](https://elmastudio.de/wp-content/uploads/2012/12/off-canvas-demo.png) *Off Canvas in der [Live-Demo](http://jasonweaver.name/lab/offcanvas/).* Die Umsetzung von Jason Weaver achtet auch auf [Progressive Enhancement](https://alistapart.com/article/understandingprogressiveenhancement/) (Progressive Verbesserung). Das bedeutet in diesem Fall, dass auch Nutzer ohne Javascript auf alle Inhalte der Webseite ohne Probleme zugreifen können. ### Wie ist deine Meinung? Gefällt dir die Off Canvas-Technik und kennst du noch weitere Webseiten-Beispiele, die diese neue Vorgehensweise in responsive Webdesigns bereits einsetzt? Über dein Feedback und weitere Link-Tipps freue ich mich sehr! #### Tipps zum Weiterlesen - [Off Canvas Multi-Device Layout](https://www.lukew.com/ff/entry.asp?1569) von Luke W - [Off Canvas-Layouts in responsive Webdesigns](https://elmastudio.de/off-canvas-layouts-in-responsive-webdesigns/) auf Elmastudio