Off Canvas Responsive Design

Veröffentlicht von in Webdesign

Mobile First!
Off Canvas Responsive Design.

Off Canvas - Responsive Qebdesign

Das Problem: Header, Navigation, Text und Bild, Seitenleisten und andere Elemente finden nur in den seltensten Fällen gemeinsam Platz in einem mobilen Layout.
Die Lösung – Off Canvas Responsive Design: Inhalte von der Website bei Anzeige auf einem Device per Knopfdruck ein- und ausblenden.

Bestimmte Inhalte von der Website verbannen – ohne sie gänzlich zu entfernen? Großformatige Bilder auf Smart Phones anzeigen, Informationstexte präsentieren, bequeme Navigation zur Verfügung stellen? Alles auf einmal kann man auf einem iPhone oder Android/Windows mobile nicht anbieten, oder?

Off Canvas Responsive Design macht das möglich: Bilder, Texte , Navigation, etc. werden in einzelne „Tafeln“ aufgeteilt. Eine dieser Tafeln wird im Sichtbereich des Bildschirms angezeigt. die anderen sind zwar geladen, aber ausgeblendet. Einfach per Knopfdruck werden sie wieder eingeblendet – CSS3 macht es auch attraktive Animationen möglich. Off-Canvas-Layouts lassen sich mit CSS 3, HTML5 und JavaScript realisieren.

Progressive Enhancement (Progressive Verbesserung)
In neueren Versionen des Off Canvas Responsive Design wird mittlerweile Progressive Enhancement eingesetzt:  Das bedeutet, dass auch Nutzer ohne Javascript auf alle Inhalte der Webseite ohne Probleme zugreifen können.

Off Canvas Lösungen: Facebook App

Beispiel: Erste Off Canvas-Layouts wurden in Native Apps wie zum Beispiel in Facebook umgesetzt. Je nach Bildschirmgröße werden links und rechts Sidebar-Navigation-Bereiche untergebracht. Per Klick auf einen Button lassen sie sich ganz einfach ein- und ausfahren (Slide). So wird genug Platz geschaffen für den News-Stream, auf dder linken Seite ist ein Menü untergebracht, auf der rechten Seite lassen sich Kontakte auswählen, Chats führen lassen, etc.

Facebook App auf iPad - nimmt sich den zur Verfügung stehenden PlatzClevere Lösung: Die Facebook App auf dem iPad passt sich dem zur Verfügung stehenden Platz auf dem wesentlich größerem Display an.

 

Off Canvas - Responsive DesignLive-Demo der Off Canvas-Technik: Jason Weaver hat eine Off Canvas Responsive Design Live-Demo erstellt, in der die Technik an Hand eines Beispiel demonstriert wird. Auch technische Hintergründe werden hier gut erklärt und demonstriert:
Zum Beispiel wie Navigation und Inhalte per Off-Canvas-Layouts versteckt werden und sich einblenden lassen.
Mit JavaScript, Media Queries und CSS3-Transitions werden interessante Effekte dargestellt.

>> Zum Live-Demo von Off Canvas Responsive Design

Weitere Artikel

  • Facebook Fanpage erstellenFacebook Fanpage erstellen Facebook Fanpage & Social Media Marketing Facebook und Social Media Marketing gewinnen auch für kleinere und mittelständischen Unternehmen immer mehr an Bedeutung. Mehr und mehr […]
  • Aktuelle Facebook Bildgrößen 2023Aktuelle Facebook Bildgrößen 2023 Alles über die aktuellen Facebook Bildgrößen 2023 in unserer Übersicht. Für Ihre Facebook-Beiträge sehr wichtig: Gut dargestellte Profilbilder, Titelbilder, Highlights & Co ...
  • Die beliebtesten Coworking Spaces DeutschlandsDie beliebtesten Coworking Spaces Deutschlands Berlin hat die Nase im Ranking um die beliebtesten Coworking Spaces in Deutschland vorn, auch wenn es die Pole-Position als europäische No.1 als Freelancer-Hauptstadt an Barcelona abgeben […]
  • Happy New Year | Die Wilde 13Happy New Year | Die Wilde 13 Happy New Year! art supplies wünscht ein Frohes Neues Jahr 2013. Wer sich für dass Jahr 2013 (“Die Wilde 13″) guten Vorsätzen hingegeben hat und einmal ganz von vorne beginnen möchte, […]