Pia Melina4.5.2 Wechsel zwischen Desktop- und mobiler Version
Autorin: Pia Melina Rolf
In den User-Stories vom Projekt ist unter den Nicht-funktionalen Anforderungen der Punkt Responsive Design aufgenommen. „Der Begriff Responsive Webdesign oder Responsive Design bedeutet, dass das Layout einer Internetseite automatisch auf das Ausgabemedium angepasst wird, um auf verschiedenen Endgeräten zuverlässig ein gutes Nutzererlebnis sicherzustellen.“ (Heinrich Eickhoff, 24.03.2023, Hubspot) Damit wurde ein Ziel in den User-Stories festgelegt, welches auch mit Entwürfen unterlegt wurde und in der Umsetzung in zwei Erscheinungsvarianten der Website umgesetzt ist. Beim Desktop-Design werden drei Fenster gleichzeitig angezeigt, die die Karte, ein 3D-Viewer und einen Steckbrief beinhalten. Die Fenster können ausgetauscht werden, sodass die Reihenfolge und die Fenstergröße leicht anpassbar sind. Als zweite Variante der Website kann in einem Menü ausgewählt werden, welches der 3 Fenster angezeigt werden soll. Das jeweilig ausgewählte Fenster wird dann auf dem Bildschirm angezeigt und kann jederzeit durch ein anderes Fenster ausgetauscht werden. Die zweite Variante wird bei kleinen Geräten standardmäßig angezeigt und bei größeren Bildschirmen besteht die Möglichkeit auf diese zu wechseln.
Grundsätzliche Funktionsweise
Umgesetzt ist die Anforderung mittels verschiedener HTML-Dateien, in welchen sich die entsprechenden Container befinden, die für die jeweiligen Versionen gebraucht werden. Je nach Bildschirmgröße oder Auswahl des/der Benutzers/Benutzerin werden die Container in die verwendete HTML-Datei geschrieben und somit die Website verändert. Bei einer window.innerWidth < 500 wird immer die mobile Version angezeigt, indem die Container der indexSM.html in die index.html gefügt werden und falls an der Url noch kein Hash-Code dran hängt, der Hash-Code #map an die Url angehangen wird. Damit bei der mobilen Version nur ein Fenster angezeigt wird, werden alle Container der Fenster auf display: none gesetzt und nur das Fenster dessen Name in der Url als Hash-Code steht wird angezeigt.
Bei der Version für große Bildschirme (>500px Breite) wird entsprechend die indexBIG.html verwendet. In dieser ist zusätzlich ein Button mit dem man über die Methode activateMobileVersion() auf die mobile Version springen kann. Damit kann die nutzende Person auch auf einem großen Gerät die mobile Version mit nur 1 Fenster nutzen. Falls dann doch wieder zurück auf die Einstiegsversion gewechselt werden soll, besteht im Menü die Möglichkeit Desktop Version auszuwählen. Beim Auswählen dieses Menüpunkts wird zurück auf die Desktop Version gewechselt. Wichtig zu erwähnen ist, dass der Menüpunkt Desktop Version nur im Menü angezeigt wird, wenn der Bildschirm auch die entsprechende Breite hat.
Konfiguration des Schaltflächensymbols
Der erwähnte Button zum Wechseln auf die mobile Version -wenn man auf der Desktop Version ist- ist ein einfacher Button mit der class=“mobilVerBtn“, welcher über den Klassennamen im CSS angesprochen werden kann oder direkt im HTML noch verändert werden kann.