Off Canvas im Responsive Web Design

Was mittlerweile bei nativen Apps auf Smartphones und Tablets immer mehr zum Standard wird, kommt auch immer öfter beim Gestalten von Responsive Websites zum Einsatz: Die Off Canvas Darstellung. Eine Mechanik, die die Meisten von der Facebook App her kennen dürften.

Responsive Web Design heißt ja, eine Website so zu bauen, dass sie sich dem jeweiligen Endgerät und seiner Bildschirmauflösung automatisch anpasst. Was bisher meist so gelöst wurde, dass sich die Elemente, etwa auf Smartphones unter- statt nebeneinander anordneten. So entstand eine lange scrollbare “Wurst” aus Navigation, Inhalten, Bildergalerien, Sidebar-Elementen …

Mit dem Off Canvas Ansatz dagegen werden nebensächliche Elemente, wie Navigation oder Sidebar ganz einfach außerhalb des sichtbaren Bereichs auf dem Bildschirm gelegt. Nur bei Bedarf werden sie dann mit einem Klick auf einen Button oder einer Geste in den Bildschirm hereingezogen. Der Hauptinhalt nimmt per default die ganze Seite ein und rutscht beim Hereinziehen der Off Canvas Flächen jeweils zu Seite.

Durch diese elegante Lösung bleibt mehr Platz für den eigentlichen Inhalt und die Seite wirkt dadurch aufgeräumter.

Websites, die bereits Responsive Web Design mit Off Canvas Elementen verwenden, sind etwa mashable oder auch der Auftritt von Googles neuesten Zukauf nest:

Dabei muss Off Canvas nicht auf kleine Screens beschränkt sein. Auch Seiten, die viel mit großen Bildern, Typografie oder Freiräumen arbeiten, können es nutzen, um das Design noch deutlicher zu reduzieren und dem Wesentlichen noch mehr Aufmerksamkeit zukommen zu lassen. Zu sehen etwa auf der Homepage des Fotografen Patrick Katzmann, oder der Seite des norwegischen Kaffeerösters jacu.

Technisch umgesetzt wird das Ganze mit CSS3, Javascript, jQuery und MediaQueries.