Das größte Thema in der Webentwicklung ist aktuell die mobile Optimierung von Webseiten und Onlineshops. Man spricht im Allgemeinen von einem Responsive Design für Internetseiten. Eine neue Technik etabliert sich in der Welt des Responsive Webdesigns: Das Off Canvas Design.
Was ist Responsive Webdesign?
Responsive Webdesign ist die Optimierung einer Internetseite auf mobile Endgeräte wie Smartphones und Tablets. Die mobile Ansicht ist neben der Benutzerfreundlichkeit unverzichtbar für eine gelungene Suchmaschinenoptimierung. Suchmaschinen prüfen, ob eine Internetseite eine für mobile Endgeräte optimierte Version anbieten kann und wenn ja, werden Sie dadurch einen positiven Einfluss auf Ihr Ranking in Suchmaschinen verzeichnen. Oftmals ist es so, dass mobile Webseiten Teilinhalte einer Internetseite anders darstellen, als in der Desktopvariante. Meist wird der Content einfach untereinander dargestellt, da Smartphones und Tablets eine andere Bildschirmbreite als Desktops aufweisen. Neben dem selektiven Anzeigen von gewünschten Inhalten ist die Ladezeit einer Internetseite auf dem mobilen Endgerät extrem beschleunigt. So garantieren Sie, dass Ihre User orts- und geschwindigkeitsunabhängig Ihre Website lesen können. Wenn man nun neben der rasanten Ladezeit auch auf nur punktuell wichtige Elemente verzichtet, hat man eine ideale Grundlage in der Welt der mobilen Web-Entwicklung geschaffen. Genau hier setzt sich das Off Canvas Responsive Webdesign mit einer für Webdesigner interessanten Technik durch.
Was genau ist das Off Canvas Responsive Webdesign?
Beim Off Canvas Responsive Webdesign werden dezidierte Inhalte einer Website außerhalb des Sichtbereichs gelegt und erst manuell auf Benutzerwunsch eingeblendet. Das erspart dem Programmierer aufwendige Designarbeiten und bietet Ihnen als Benutzer die Möglichkeit, alle Inhalte ohne störende Elemente lesen zu können. Die Technik des Off Canvas Responsive Designs kennen wir etwa durch populäre Webseiten wie Facebook oder Disney. Dort werden Menüs, Navigationsleisten und Inhalte erst per Knopfdruck ein- und ausgeblendet. Stellen Sie sich vor, dass einzelne Inhalte der Website auf Tafeln geschrieben werden. Erst wenn man eine Tafel sehen möchte, wird der Inhalt eingeblendet. Off Canvas Design ist eine anwenderfreundliche Alternative in der Mobilen Webentwicklung geworden. Besonders dadurch, dass viele Internetuser die Technik des Off Canvas Responsive Webdesigns bereits durch Apps wie Facebook kennen, ist die Benutzung intuitiv und bereits vertraut.
Bei Pinterest werden weitere Elemente erst geladen, wenn der User das Fenster nach unten scrollt.
Mobile Optimierung oder Off Canvas Responsive Webdesign – (k)ein Vergleich!
In der klassischen mobilen Optimierung einer Internetseite werden systematisch alle Inhalte untereinander aufgelistet. Es fängt meist mit dem Header an (eine Kopfgrafik, etwa ein Logo), es folgt die Navigation und darunter kommen Text und Inhalt. Sie müssen als Benutzer also mit Ihrem Smartphone oder Tablet viel Scrollen und Wischen, bevor Sie zum gewünschten Ergebnis kommen. Nutzen Sie das Facebook-App? Dann sehen Sie tagtäglich den Vorteil der Off Canvas Responsive Designmethode, denn dort wird das Menü links oder rechts per „Tafel“ eingeflogen, wenn Sie es brauchen und bedienen müssen. Die gesamte Ansicht konzentriert sich auf das, was Sie sehen wollen: Den Inhalt.
Entwicklung des Off Canvas Responsive Webdesign
In der Vergangenheit wurde bevorzugt mit JavaScript entwickelt. Dies barg die Gefahr, dass nicht alle Benutzer und Anwender in den Genuss der modernen Optimierung kommen konnten. Mittlerweile ist es möglich, eine mobile Optimierung mit dem Off Canvas Design ausschließlich durch CSS zu realisieren. Das bedeutet für Sie, dass Ihre Website und alle Inhalte von jedem Benutzer gesehen werden können, ohne von einem installierten Plugins abhängig zu sein.
Fazit
Off Canvas Design ist eine reife Technik des Webdesigns, die in der mobilen Optimierung von Websites großen Nutzen bringen kann. Richtig eingesetzt erleichtert Off Canvas Design dem Benutzer die Bedienung einer Website auf seinem mobilen Endgerät und schafft Raum für das Wichtigste Element jeder Internetpräsenz: Den Inhalt.