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

  • 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 […]
  • Smart Device Simulator – Responsive Webdesign im SchnelltestSmart Device Simulator – Responsive Webdesign im Schnelltest Interessanter Websservice, um einen schnellen & kostenlosen Check Ihrer Webseite auf immerhin sechs unterschiedlichen Smart Devices durchzuführen.
  • Responsive WebdesignResponsive Webdesign Responsive Webdesign: Anpassungsfähige Website-Layouts, die sich automatisch an das genutzte Ausgabegerät oder an unterschiedlichen Auflösungen anpassen.
  • Mobile Friendly SiteMobile Friendly Site Google hat am 21. April 2015 ein umfassendes Update durchgeführt. Ab sofort werden Websites auch nach ihrer Fähigkeit bewertet, ob sie auf so genannten Mobile Devices - also zum Beispiel […]