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“ 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.
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 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.
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 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.
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 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.
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 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.
Die Webseite von Kershaw Knifes 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.
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 erstellt, in der die Technik noch einmal sehr schön in einem einfachen Beispiel demonstriert und auch technische Hintergründe erklärt.
Die Umsetzung von Jason Weaver achtet auch auf Progressive Enhancement (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 von Luke W
- Off Canvas-Layouts in responsive Webdesigns auf Elmastudio
Hello Ellen,great article! I think it’s a technique that we will be seeing a lot more of in the near future and congratulations on being among the first WordPress theme developers to incorporate it into a theme design.
One of the first places I noticed it in use was the Google home page on my Android phone,pretty sure it’s the same on iOS as well,I think you have to be logged in for it to work though. They have also been using it for quite a while in their Google+ app.
Keep up the good work ;)
Ich finde den Ansatz von Off Canvas sehr interessant und irgendwie so schön „freidenkerisch“: Hey, nutzen wir doch einfach den Raum, der gerade nicht da ist!
Da sich die Umsetzung ja in der Regel an mobile Geräte richtet, finde ich es allerdings auch extrem wichtig, dass die Darstellung der versteckten Bereiche unter mobilen Bedingungen exzellent performt. Da ruckelt es bei den Beispielen, die ich bisher gesehen habe, teilweise schon noch ziemlich – selbst mit einer DSL-Verbindung über WLAN.
Ein wichtiges (wenngleich nicht unverzichtbares) Feature wäre aus meiner Sicht die Unterstützung von Swipe-Gesten. Da gibt es z.B. dieses geforkte Plugin hier: https://github.com/torkiljohnsen/swipe
Getestet habe ich es noch nicht, aber das Demo performt auf meinem ollen iPad 1 schon sehr flüssig. Sicher hängt das aber auch damit zusammen, dass der Inhalt in dem Demo ein statisches Dokument ist. Ich vermute, wenn man Off Canvas swipen und eine gute Performance will, bekommt die Optimierung der ausgelieferten Inhalte (Caching, Kompression, responsive images usw.) noch einmal zusätzliches Gewicht.
Auf meinem iPad 1 habe ich auch bemerkt, dass Tatami nicht zu swipen ist. Hast du bewusst auf die Unterstützung von Swipe-Gesten verzichtet? Oder ist das nur bei mir so?
Danke für den tollen Artikel. Wäre es eigentlich mit dieser Technik vereinbar, den Off Canvas Header in einen Frame zu legen? Dann hätte man die Sidebars immer im Zugriff. So muss man nicht nach unten aber -je nach dem- immer noch oben scrollen. :-) Nur so eine Frage. Wahrscheinlich lässt sich ein Frame mit dieser Technik nicht vereinbaren. Oder?
Ich finde Off Canvas klasse. Das ist auch das beste an eurem neuen Themen meiner Meinung nach. Oft Canvas wird sich im mobilen Webdesign durchsetzen. Ich habe es selbst leider noch nicht geschafft, aber werde es bald mal in Angriff nehmen.
:-)
1000 x Off Canvas gehört, nie Gedanken über die Technik gemacht.
1000 x Danke (nee ist bissl zuviel) für die Erläuterungen
:-)
Off Canvas ist eine feine Sache! :-)
Vielen Dank Ellen!
Lieben Gruß
In Verbindung mit Swipe-Gesten halte ich Off Canvas für die derzeit beste Menulösung für Smartphones.
Die Technik ist übrigens auch Bestandteil des aktuellen Zurb Foundation-Frameworks:
http://www.zurb.com/playground/off-canvas-layouts
ICh finden den Artikel sehr interessant. Danke dafür
Ich grüße,
ich halte diesen Artikel (so wie viele auf diesem Blog) für ausgesprochen gut geschrieben, verständlich und natürlich interessant :)
Ich selbst bin ebenfalls zur Zeit daran mich in das Responsive Design und die Off-Canvas Techniken einzuarbeiten. Ich finde diese Technologien so interessant, das mich das Webdesign mal wieder so richtig gepackt hat.
Ich finde es sehr wichtig, dass eine Webseite so viele Ausgabemedien unterstützen kann wie eben möglich und dabei weder eine Zumutung an den User darstellt noch durch zu aufwändige Technik die Performance zum einbrechen bringt.
Mit den besten Grüßen
Isaac