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

  • Suchmaschinenoptimierung – ein EinstiegSuchmaschinenoptimierung – ein Einstieg Was können Sie tun, damit ihre Seite bei Google & Co. gefunden werden kann? Eine Anleitung, wie sie einfach und kostenlos nach vorne kommen.
  • Kostenfreie BilderKostenfreie Bilder Es rauscht im digitalen Blätterwald. Getty Images bietet kostenfreie Bilder für Blogger & Konsorten. Das Unternehmen hat ein neues Geschäftsmodell vorgestellt und bietet Millionen von […]
  • WordPress SpamWordPress Spam WordPress Usern ist das Problem schon länger ein Dorn im Auge: WordPress Spam ist ein beständig wachsendes Übel. WordPress Spam ist ein wirklich großes Problem, den insbesondere WordPress […]
  • 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 […]