Tutorial: Off Canvas Elemente und Responsive Design – Webdesign 2013
Kommentare

Responsive Design ist in aller Munde. Doch was ist, wenn die eigene Website so komplex ist, dass manche Inhalte vertikal angeordnet werden müssen. Das hat zur Folge, dass Besucher manchmal eine gefühlte Ewigkeit scrollen müssen, um an den gewünschten Inhalt zu kommen – eine schlechte User Experience!

Eine Lösung des Problems sind die sogenannten Off Canvas Layouts, bei denen die wichtigsten Inhalte im sichtbaren Bereich liegen, und zweitrangiger Content vom Nutzer bei Bedarf manuell eingeblendet werden kann.

Ein typisches Beispiel dafür ist die Facebook-App. Hier befindet sich die Chronik im Zentrum, Favoriten und Anwendungen nehmen hingegen jeweils links oder rechts der Chronik Platz, bleiben also zunächst unsichtbar und lassen sich mit einem Fingerwisch bei Bedarf aufrufen. Während native Apps dieses Design-Konzept anwenden, kristallisieren sich Off Canvas Layouts auch immer mehr zum Liebling von Responsive Websites. Ein weiterer Vorteil dieser Technik ist, dass dank CSS und Media Queries weitere Layout-Spielereien möglich sind.

Wie Ihr selbst ein Off Canvas Layout mit Zurb Foundation 3.0 erstellen könnt, zeigt folgendes Tutorial von Tutsplus.com. In Code-Beispielen und insgesamt 21 Schritten wird unter anderem erklärt, wie Ihr das Small Viewport Navigation Menu oder den Footer gestalten könnt.

tutorial webdesign

Bildquelle Screenshot: Tutsplus.com

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -