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

  • EarthriseEarthrise "Oh, mein Gott! Seht euch das an!" - "Hey, nicht fotografieren, das ist nicht vorgesehen." (Gelächter)  - "Hast du einen Farbfilm, Jim?" - "Gib mir den." - "Oh man, das ist großartig!"- […]
  • Drupal 8 – mobil bis in den KernDrupal 8 – mobil bis in den Kern Die Vorteile der kommenden neuen Version von Drupal. - Update - >> Lesen Sie meinen neueren Artikel: Drupal 8 erscheint voraussichtlich im September 2015. Mitte Februar […]
  • WordPress Backdoor findenWordPress Backdoor finden WordPress Backdoor in einer WordPress-Site entdecken und beheben. Wie Sie sich vor der Gefahr eines WordPress-Hacker Angriffes schützen können.
  • Google Kolibri UpdateGoogle Kolibri Update Im August 2013 wurde das Google Kolibri Update online gestellt, gab der Google Senior Vice President Amit Singhal anlässlich des fünfzehnten Google Geburtstages auf einer Pressekonferenz […]