© istockphoto.com/tapilipa
PHP Magazin
jQuery-Plug-ins für Responsive Websites erstellen

JavaScript goes Responsive

Bei „Mobile Commerce“ und „Responsive Webdesign“ handelt es sich schon lange nicht mehr um neumodische Trends. Vielmehr sind es etablierte Werkzeuge, um zum Beispiel die Konversionsrate in einem Onlineshop zu steigern. Diese Steigerung erhält man aber nur, wenn die Bedienung so intuitiv wie möglich ist und stets ein konsistentes Design und somit ein Wiedererkennungswert der Corporate Identity über alle verfügbaren Endgeräte hinweg zur Verfügung steht.

Stephan Pohl


Dennoch gibt es neben der optischen Komponente auch technische Hindernisse, die es z. T. erschweren, ein Responsive Webdesign mit einer optimalen Usability zur Verfügung zu stellen. Vor allem bei größeren und komplexeren Webprojekten wie zum Beispiel Onlineshops, die eine Vielzahl von Möglichkeiten und Funktionen bieten, stößt man teilweise an Grenzen und muss auf Workarounds zurückgreifen.

Platzmangel macht erfinderisch

Ein Responsive Webdesign lebt vom Grundgedanken „One codebase to rule them all“, womit so viel gemeint ist wie die Unterstützung aller verfügbaren Endgeräte mit einer Codebasis – unabhängig von der jeweiligen Bildschirmauflösung, Eingabemöglichkeit oder Pixeldichte. Leider mussten wir im Prozess der Erstellung eines Responsive-Templates für unsere neueste Version Shopware 5 sehr schnell feststellen, dass dies nur die halbe Wahrheit ist. Beispielsweise besteht auf einem Smartphone das Problem, dass sehr wenig Platz vorhanden ist, um etwa eine komplexe Kategoriestruktur abzubilden. Zur Lösung dieses Problems gibt es eine Vielzahl an Komponentenmustern wie ein „Offcanvas“-Menü – oder auch „Burger“-Menü genannt (Abb. 1). Diese Komponente ist bei Smartphonenutzern etabliert, da sie dieses Muster aus diversen Apps kennen.

Abb. 1: Klassisches Offcanvas-Menü

Auf Desktoprechnern ist ein Offcanvas-Menü hingegen oftmals nicht notwendig, da reichlich Platz zur Verfügung steht, um alle Elemente wie gewünscht darzustellen. Es stellt sich also die Frage, wie man verschiedenen Geräteklassen eine optimierte Usability zur Verfügung stellen kann.

Stateful JavaScript

Was man benötigt, ist eine Möglichkeit, gewisse Funktionen je nach Bildschirmauflösung zu aktivieren bzw. zu deaktivieren. Dazu haben wir innerhalb der Storefront von Shopware einen so genannten „StateManager“ eingebaut. Dieser prüft stetig die Bildschirmbreite des Browsers und führt Callback-Methoden aus, sobald sich diese durch das Drehen des Geräts oder durch das Verkleinern des Browserfensters verändert. Um eine Konsistenz zu schaffen, wurden zudem so genannte „States“ registriert, die über eine minimale und maximale Breite definiert wurden. Die Benennung wurde auf Basis von Konfektionsgrößen durchgeführt, damit kein direkter Verweis zu einem spezifischen Endgerät bzw. zu einer Gerätegruppe wie zum Beispiel Tablets vorliegt. Die Definition eines States über den StateManager sieht wie folgt aus:

StateManager.init([{ state: 's', enter: 30, // 480px exit: 47.9375 // 767px}]);

Nachdem die Regi...

PHP Magazin
jQuery-Plug-ins für Responsive Websites erstellen

JavaScript goes Responsive

Bei „Mobile Commerce“ und „Responsive Webdesign“ handelt es sich schon lange nicht mehr um neumodische Trends. Vielmehr sind es etablierte Werkzeuge, um zum Beispiel die Konversionsrate in einem Onlineshop zu steigern. Diese Steigerung erhält man aber nur, wenn die Bedienung so intuitiv wie möglich ist und stets ein konsistentes Design und somit ein Wiedererkennungswert der Corporate Identity über alle verfügbaren Endgeräte hinweg zur Verfügung steht.

Stephan Pohl


Dennoch gibt es neben der optischen Komponente auch technische Hindernisse, die es z. T. erschweren, ein Responsive Webdesign mit einer optimalen Usability zur Verfügung zu stellen. Vor allem bei größeren und komplexeren Webprojekten wie zum Beispiel Onlineshops, die eine Vielzahl von Möglichkeiten und Funktionen bieten, stößt man teilweise an Grenzen und muss auf Workarounds zurückgreifen.

Platzmangel macht erfinderisch

Ein Responsive Webdesign lebt vom Grundgedanken „One codebase to rule them all“, womit so viel gemeint ist wie die Unterstützung aller verfügbaren Endgeräte mit einer Codebasis – unabhängig von der jeweiligen Bildschirmauflösung, Eingabemöglichkeit oder Pixeldichte. Leider mussten wir im Prozess der Erstellung eines Responsive-Templates für unsere neueste Version Shopware 5 sehr schnell feststellen, dass dies nur die halbe Wahrheit ist. Beispielsweise besteht auf einem Smartphone das Problem, dass sehr wenig Platz vorhanden ist, um etwa eine komplexe Kategoriestruktur abzubilden. Zur Lösung dieses Problems gibt es eine Vielzahl an Komponentenmustern wie ein „Offcanvas“-Menü – oder auch „Burger“-Menü genannt (Abb. 1). Diese Komponente ist bei Smartphonenutzern etabliert, da sie dieses Muster aus diversen Apps kennen.

Abb. 1: Klassisches Offcanvas-Menü

Auf Desktoprechnern ist ein Offcanvas-Menü hingegen oftmals nicht notwendig, da reichlich Platz zur Verfügung steht, um alle Elemente wie gewünscht darzustellen. Es stellt sich also die Frage, wie man verschiedenen Geräteklassen eine optimierte Usability zur Verfügung stellen kann.

Stateful JavaScript

Was man benötigt, ist eine Möglichkeit, gewisse Funktionen je nach Bildschirmauflösung zu aktivieren bzw. zu deaktivieren. Dazu haben wir innerhalb der Storefront von Shopware einen so genannten „StateManager“ eingebaut. Dieser prüft stetig die Bildschirmbreite des Browsers und führt Callback-Methoden aus, sobald sich diese durch das Drehen des Geräts oder durch das Verkleinern des Browserfensters verändert. Um eine Konsistenz zu schaffen, wurden zudem so genannte „States“ registriert, die über eine minimale und maximale Breite definiert wurden. Die Benennung wurde auf Basis von Konfektionsgrößen durchgeführt, damit kein direkter Verweis zu einem spezifischen Endgerät bzw. zu einer Gerätegruppe wie zum Beispiel Tablets vorliegt. Die Definition eines States über den StateManager sieht wie folgt aus:

StateManager.init([{ state: 's', enter: 30, // 480px exit: 47.9375 // 767px}]);

Nachdem die Regi...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang