Off Canvas Layouts in responsive Webdesigns
Kommentare 35

Off Canvas-Layouts in responsive Webdesigns

Da die Bildschirmgröße auf mobilen Geräten begrenzt ist, werden Inhalte auf Smartphones und Tablets in den meisten Fällen in einem einspaltigen Layout untereinander angeordnet. Das kann bei viel Inhalt auf einer Seite allerdings dazu führen, dass der Nutzer sehr lange Inhaltsblöcke herunterscrollen muss, um zum gewünschten Inhalt zu gelangen. Um dies zu vermeiden, nutzen Native Mobile Apps wie Facebook oder Path sogenannte Off Canvas-Layouts. Bei Off Canvas-Layouts werden Inhalte auf mobilen Geräten außerhalb des sichtbaren Bildschirm-Bereiches (bzw. rechts und links) angelegt. Per Button-Klick können diese Inhalte dann vom Nutzer sichtbar gemacht werden, wenn sie benötigt werden.

Off Canvas Layouts in Mobile Apps

Off Canvas Layout Standard-Ansicht und nach Menü-Button-Klick.

Doch Off Canvas-Layouts eignen sich nicht nur für Native Apps, auch im responsive Webdesign kann diese Technik sehr praktisch sein. So können Inhalte auf kleinen Bildschirmen zuerst außerhalb des sichtbaren Bereiches angelegt werden, auf größeren Bildschirmen werden sie dann schrittweise sichtbar gemacht.

Off Canvas Layouts im responsive Webdesign

Off Canvas-Layout auf dem Smartphone, Tablet hoch und quer und auf einem Laptop.

Wie in der Skizze gezeigt, passt sich das Off Canvas-Layout entsprechend der Bildschirm-Breite an. Auf einem Smartphone sind zusätzliche Inhalte (z.B. eine Seiten-Navigation oder Widgets) standardmäßig verdeckt. Der Nutzer muss sie per Button-Klick öffnen. Wenn zusätzliche Inhalte angezeigt wird, schiebt sich der Hauptinhalt entsprechend nach links oder rechts aus dem sichtbaren Bereich heraus. Zurück in die Standard-Ansicht kommt der Nutzer ebenfalls wieder per Button-Klick.

Auf einem Tablet mit etwas mehr Bildschirm-Breite kann dann das Layout angepasst werden und die zuvor verdeckten Bereiche werden standardmäßig sichtbar. Ist der Bildschirm auf einem Laptop oder Desktop-Computer letztendlich breit genug, wird das gesamte Layout angezeigt.

Die Skizze zeigt natürlich nur eine Variante eines Off Canvas-Layouts. Mit Hilfe von CSS und Media Queries können mit dieser Technik auch noch jede Menge weitere Layout-Varianten erstellt werden.

Off Canvas Layouts von Foundation by Zurb

Zurb bietet beispielsweise seit der Version 3 des Foundation Frameworks vier vorbereitete Off Canvas-Layouts an, die du dir auf der Zurb-Seite anschauen und zur freien Nutzung downloaden kannst.

Off Canvas Layouts von Zurb

Indem du dein Browser-Fenster in den Live-Demoansichten verkleinerst, kannst du das Verhalten des jeweiligen Layouts sehen. Die beste Vorstellung bekommst du aber natürlich, wenn du die Demo direkt auf einem mobilen Gerät aufrufst. Zurb bietet als Layout-Varianten eine Version mit Footer Navigation auf mobilen Geräten, eine mit Top-Navigation, eine mit Tabs und eine weitere mit einer Off Canvas-Sidebar auf mobilen Geräten.

Weitere hilfreiche Ressourcen und Live-Demos

Luke W, einer der Vorreiter in Sachen responsive Webdesign überhaupt, hatte im März und Juni diesen Jahres einige hilfreiche Artikel über Layout-Muster in responsive Webdesigns veröffentlicht, die den Begriff “Off Canvas” weitgehend geprägt haben. Im ersten Artikel “Multi-Device Layout Patterns” beschreibt Luke W verschiedene beliebte Layout-Techniken für responsive Webdesigns. Im Folge-Artikel “Off Canvas Multi-Device Layouts” beschreibt Luke W dann ausschließlich verschiedene Off Canvas Layout-Techniken. Der Artikel beinhaltet außerdem hilfreiche Live-Demos von Jason Weaver.

Inspiriert von der Zusammenarbeit mit Luke W hat Jason Weaver eine weitere Demo-Seite erstellt, die den Off Canvas-Effekt sehr schön demonstriert.

Off Canvas Demo von Jason Weaver

Off Canvas Live-Demo und Code von Jason Weaver.

Ein praktisches Tool, um sich die Demo im Desktop-Browser anzuschauen, ist übrigens Screenfly. Du musst einfach die URL der Off Canvas-Demo eingeben und dann die verschiedenen Devices (Desktop, Tablets oder Mobile) unten auswählen.

Off Canvas Demo in Screenfly

Jason Weavers Off Canvas Demo in der Tablet-Ansicht.

Unter dem Punkt Technical erklärt Jason in seiner Demo Schritt für Schritt den benötigten Code und seine Vorgehensweise bei der Erstellung der Demo. Und da für die Off Canvas-Technik JavaScript benötigt wird, ist es vor allem wichtig, dass auch Nutzer auf älteren mobilen Geräten oder bei deaktiviertem JavaScript dennoch Zugriff auf alle Inhalte behalten.

Deine Meinung zu Off Canvas?

Wie gefällt dir die Off Canvas-Technik und kennst du weitere Webseiten-Beispiele oder Mobile Apps, die diese Technik bereits nutzt? Über dein Feedback und weitere Beispiele von Off Canvas-Layouts in Aktion freue ich mich sehr!

35 Kommentare

  1. Hallo Ellen!

    Ich muss gestehen, ich hab den Artikel nur überflogen :-) hab aber schon die von dir genannten Artikel gelesen…

    Ich finde die Idee an sich sehr gut. Jedoch sollte man es sich hier sehr gründlich überlegen, ob es Sinn macht, diese Technik anzuwenden.
    So finde ich es z.B. bei einem Blog, für einen Artikel selbst, absolut fehl am Platz. Ich denke jetzt wirklich an das Lesen an sich. Beim Lesen scrollt man sowieso immer langsam weiter, egal wie lange der Artikel ist. Ich finde dieses Scrollen gehört einfach zum “Lesefluss” dazu. Stellt man jedoch den Artikel in Form eines OffCanvas Designs bereit, wird man meiner Meinung nach aus dem Lesefluss “gerissen”.
    Interessant ist es bei den Kommentaren – hier ergeben sich sicher tolle Möglichkeiten.

    Jedenfalls ein toller Artikel – auch im Schnelldurchgang ;-)

  2. Wahnsinn!!!
    Vielen Dank für die Anregungen und Links. Das ist mal wirklich cooles Zeug. Werde ich in einem nächsten Projekt mal ein- und umsetzten.
    Habe schon ein paar Ideen wie man das nützlich einsetzen kann.

    Gruß
    Matthias

  3. brun

    früher (so in den 80ern :-) nannten wir das “off screen” rendering. du renderst ja so oder so in ein canvas. nur welcher teil/welches canvas auf dem screen ist, wird unterschieden.

  4. Das klingt für mich alles ziemlich interessant, da mir genau dieses Vorgehen schon in vielen Apps für iOS, wie Twitter oder Facebook aufgefallen ist. Vielleicht also doch mal ein wenig herumexperimentieren?

  5. Ich bin immer wieder überrascht, wie schnell die Entwicklung im Webdesign vorangeht. Ich habe immer noch eine statische html Seite und bin irgendwie froh drum. Diese ganzen neuen Entwicklungen, ich glaube das fängt gerade erst an.

  6. Ich stehe dieser Technik nicht so wirklich positiv gegenüber. Da die Benutzer bei “Off Canvas” ein neues Konzept zur Bedienung erst erlernen müssen.
    Bisher sind sie bei Smartphones gewohnt zu zommen und sich dann auf der Seite zu bewegen (rechts-links und hoch-runter), dabei haben sie aber davor ein Übersicht über die Seite bekommen. Oder es ist eine mobile Seite, die sich anpasst und bei der man nur nach unten scrollen muss. Bei dieser Technik befinden sich auf einmal versteckte Inhalte auf der rechten und linken Seite.
    Vielleicht okay für technische oder lifestyle Seiten, aber bei Seiten für den Otto-Normal User würde ich doch eher vorsichtig sein mit “Off Canvas”.

    Grüße
    Tobias

  7. Hallo,
    ich halte auch nicht soviel davon. Bei Apps wie Facebook usw. kann dies zwar praktisch sein, weil es einfach soviele Funktionen sind, bei Websiten finde ich es aber nervig. Selbst ich muss manchmal suchen oder schauen, wo diese Funktion versteckt ist. Und ich will dann nicht wissen, wie es Leuten geht, die nicht so technik-/Internetaffin sind.

  8. Rob

    Hallo erstmal :)

    Ich denke dass es immer Kunden- und Situationsabhängig (Situation = Art des Angebots auf der Webseite des Kunden).

    Ich kann mir sogar vorstellen dass auf jede Seite einer Internetpräsenz einen off-canvas Bereich eingebunden werden kann mit Sub-Inhalte oder spezifische Details.

    Die usability liegt wohl in unseren Händen :) Mann muss es so visualisieren dass der Usr sofort mitbekommt dass “da was ist”.

    Von mir auch im Fließtext. Wenn dann im Text etwas angesprochen wird was noch ein Subthema oder mehrere Facetten/Details hat, fände ich es nicht verkehrt diese “reingleiten” zu lassen (vielleicht farblich highlighted).

    Aber wie bereits gesagt liegt das immer am Kunden und am Thema.

    Aber andere Ansatzweisen sind immer spannend :)

    Beste Grüße aus Berlin,

    Rob van Linda

  9. Pingback: Die besten meiner geteilten Links auf Twitter im Oktober 2012 | pixelstrol.ch

  10. Pingback: Showcase: Off Canvas in responsive Webdesigns | Elmastudio

  11. Pingback: Optik?! Eine Umfrage! | —ZoomLab—

  12. Pingback: Reading List: Off-Canvas Responsive Menus | The Pending Draft

  13. Das Off Canvas-Layout erinnert *ein wenig* an Panorama Apps in Windows Phone. Wenn sich das Bedienkonzept mal richtig durchsetzt, kann man so einige nette Dinge erschaffen, aber bis es im Web soweit ist, dauert es glaube ich noch einige Zeit :/

  14. Hallo Ellen,

    habe mir gestern Abend Tatami zugelegt. Spezielle wegen responsive Webdesign – gefällt mir alles sehr gut. Habe im Moment auf http://www.test.trekking24.com Tatami installiert. Bin noch etwas am Testen bevor ich meine Seite http://www.trekking24.com umstelle.
    Auf meinem Smartphone gefällt es mir auch gut – allerdings wäre es SUPER wenn Off Canvas oben FIX steht und beim scrollen nicht weg läuft.

    Herzliche Grüße
    Mane

  15. Alex

    Hallo,
    ich finde dieses Konzept sehr gewöhnungsbedürftig und nicht sehr benutzerfreundlich. Ich bin auf diesen Artikel gekommen, da er rechts bei den beliebten Artikeln steht. Wird der Bildschirm etwas kleiner, ist auf einmal diese Leiste weg und ich finde nirgends die Inhalte. Das sich dann der Inhalt unter dem großen Plus verbirgt, gefällt mir nicht so gut und ist nicht gerade so intuitiv.

  16. Pingback: Websites That Feel Like Apps | CWP Design Studio

  17. Ich persönlich finde diese Technik zu einschränkend, da ich mich beim Desktoplayout immer an die gleiche Struktur halten muss.

    In meinem Theme “Kombinat Drei” (http://testunit.htmlkombinat.com/) habe ich den gleichen Effekt. Gelöst habe ich das allerdings mit jQuery und zwei zusätzlichen Containern, die sich rechts und links des Contents positionieren, wenn die Auflösung kleiner/gleich 1024px ist. Diese Container werden dann mit der Navigation und der Sidebar gefüllt. Das lässt ein unabhängiges Design zu und sieht auf dem Smartphone oder dem Tablet trotzdem trendy aus ;)

    Viele Grüße

    Alex

      • @Rob

        Das Theme auf testunit ist noch nicht ganz fertig und es war auch der falsche Link. Richtig wäre http://kombinat-drei.htmlkombinat.com.

        Trotzdem funktioniert es bei beiden Themes auf identische Art und Weise. Das jQuery-Script liegt im Ordner wp-content/themes/kombinat-drei/js/init.js. Im Quellcode findest Du vor dem schließenden Body-Tag zwei leere Divs. Die werden einfach rechts und links des Viewports positioniert. Die beiden Divs könnte man auch mittels jQuery und nur bei Bedarf erzeugen. Das wäre noch etwas smarter.

        Viele Grüße

        Alex

Schreibe eine Antwort