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

  • E-Mail Verschlüsselung – Sicherheit beim E-MailversandE-Mail Verschlüsselung – Sicherheit beim E-Mailversand Wie schützen Sie sich gegen Prism & Co. Software zur E-Mail Verschlüsselung für Mac OSX & Windows. Sicherheit beim E-Mail-Versand.
  • 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 […]
  • 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, […]
  • Google verschlüsselt Keyword-SucheGoogle verschlüsselt Keyword-Suche Google gibt bekannt: “Wir haben die SSL-Verschlüsselung für eingeloggte User bereits in 2011 eingeführt, genau wie Anfang des Jahres für Nutzer von Chrome Omnibox. Nun arbeiten wir daran, […]