Showcase: Off Canvas in responsive Webdesigns

Ellen Bauer

•

18. Dezember 2012

Off Canvas Showcase 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.

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 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.

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.

Off Canvas Design von 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 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.

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.

Off Canvas-Menü auf nixon.com.

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.

Off Canvas Layout von Kershaw Knifes.

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.

Off Canvas in der Live-Demo.

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

Ellen Bauer

Responsive Webdesign

Comments

maverpix

•

18. Dezember 2012

Antworten

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 ;)
Caspar

•

18. Dezember 2012

Antworten

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?
Horst Schulte

•

18. Dezember 2012

Antworten

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?
Burkhard Rosemann

•

18. Dezember 2012

Antworten

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.
Oliver Walther

•

18. Dezember 2012

Antworten

:-)
1000 x Off Canvas gehört, nie Gedanken über die Technik gemacht.

1000 x Danke (nee ist bissl zuviel) für die Erläuterungen
:-)
Jonathan

•

18. Dezember 2012

Antworten

Off Canvas ist eine feine Sache! :-)
Vielen Dank Ellen!

Lieben Gruß
Sven

•

18. Dezember 2012

Antworten

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
Alex

•

8. Januar 2013

Antworten

ICh finden den Artikel sehr interessant. Danke dafür
Isaac

•

29. April 2013

Antworten

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