Beispiele für die Touchoptimierung von Webseiten mit Hilfe der Webseiten-Optionen

Einleitung

Die mit B12-Touch Version 3.7 eingeführten Webseiten-Optionen der Browser-App ermöglichen eine Anpassung Ihrer Internetseiten an die Touchbedienung, ohne dass dafür auf Ihrem Webserver eine alternative Version des Inhalts gehostet werden muss.

Übersicht

Dieser Artikel behandelt beispielhafte Anwendungsfälle, die die Funktionalitäten der Webseiten-Optionen näher beleuchten und als Leitfaden für die Anpassung der eigenen Inhalte dienen können. Dafür sind jedoch Grundkenntnisse im Bereich der regulären Ausdrücke und Webentwicklung (HTML, CSS, Werkzeuge) notwendig. Andernfalls kann das B12-Touch Team gerne die Optimierung an Ihrer Webseite übernehmen und stellt Ihnen dann die notwendigen Optionen als Import zur Verfügung.

Werkzeuge

In den verwendeten Beispielen wird der Browser Google Chrome eingesetzt, um die CSS-Selektoren für Hover- und Mouse Modus herauszufinden. Natürlich kann dies auch mit den zur Verfügung stehenden Funktionen des Internet Explorers oder Mozilla Firefox erledigt werden.

Themengebiete

Folgende Themen werden behandelt:

  1. Generelles Vorgehen bei der Anpassung von Internetseiten
  2. Menü einer Internetseite anpassen (Hover Mode)
  3. Slider-UI-Komponente unterstützen (Mouse Mode)
  4. Webspecial mit Vollbild-Scrollverhalten (Mouse Mode)
  5. Manipulation der Seiteninhalte mittels eines Onload-Skripts
  6. Automatische Authentifizierung mittels Basic Auth

 

1. Generelles Vorgehen bei der Anpassung von Internetseiten

Zunächst kopieren wir uns die URL der Internetseite, die wir anpassen möchten, wie wir sie im CMS für die Browser-App hinterlegt haben. In unserem Fall ist dies also https://b12-touch.de/.


Bild 1: Lesezeichen im B12-Touch CMS

Die Website-Optionen sind in Regeln eingeteilt. Bei jedem Aufruf einer Webseite, auch wenn der Nutzer auf weiterführende Links klickt, prüft der B12-Touch Browser von oben nach unten jede Regel durch, bis er einen Treffer (sogenannter "Match") dafür findet. In diesem Fall passt die aufgerufene URL zu einer der Regeln, und die dort definierten Einstellungen werden angewendet.

Ein Match findet statt, wenn der in der ersten Zeile eingetragene reguläre Ausdruck zu der URL passt. Wir tragen die oben kopierte URL als Regel ein, und verändern sie entsprechend, damit ein valider regulärer Ausdruck entsteht.


Bild 2: Eingetragene Regel im B12-Touch CMS

In diesem Fall lautet der reguläre Ausdruck inklusive der gesetzten Zeichen /^http(s)://b12-touch\.de/.*/. Zum genaueren Verständnis:

  • /^ bedeutet, dass auf den Anfang der URL getestet wird. In unserem Fall also: "Die URL beginnt mit..."
  • http(s) zeigt an dass sowohl http als auch https Treffer generieren
  • \.de wurde "escaped", da der Punkt ein Funktionszeichen der regulären Ausdrücke ist. In der Regel müssen u.A. folgende Zeichen escaped werden:
    .\+*?$[]{}()|
  • .* steht für "und alles weitere", d.h. nach b12-touch.de/ dürfen noch beliebige weitere Zeichen, also Unterseiten, folgen. Für alle diese Seiten gilt die Regel ebenfalls.
    Fehlen diese Zeichen am Ende, dann würde diese Regel nur auf die Start-, jedoch auf keine der Unterseiten, beispielsweise https://b12-touch.de/funktionen/einfuhrung/ angewendet werden!

 

2. Menü einer Internetseite anpassen (Hover Mode)

Wir möchten am Beispiel unserer Produktseite von B12-Touch das Menü für die Touchbedienung optimieren. Mit Maus-Bedienung wird das Untermenü beim Darüberfahren eingeblendet, diese Art der Interaktion ist auf Touchgeräten nicht möglich. Ohne Website-Optionen würde eine Touch-Interaktion auf Eindrücke direkt einen Klick auslösen, mit den Optionen werden wir auf Touch-Klick zunächst das Untermenü einblenden.


Bild 3: Screenshot des Menüs von b12-touch.de

URL der Webseitehttps://b12-touch.de/

Regel-Ausdruckhttp(s)://b12-touch\.de/.*

Lösung: Einrichtung eines Hover-Mode Selektors

Sogenannte Hover-Mode CSS-Selektoren ermöglichen der Browser-App, ursprünglich für einen Hover-Effekt vorgesehene Elemente einer Internetseite zu erkennen und entsprechend zu behandeln. Um die notwendige CSS-Klasse oder -ID zu finden, kann man sich der Entwicklertools diverser Browser bedienen:


Bild 4: Rechtsklick-Menü des Google Chrome

Da wir die Menü-Elemente manipulieren wollen, rufen wir über Rechtsklick Element untersuchen die Entwicklertools auf und lassen uns das Element im HTML-Kontext anzeigen:


Bild 5: HTML-Code des Menüs

Es muss jetzt eine Kombination aus Element-IDs und -Klassen gefunden werden, die nur für die gewünschten Menü-Elemente zutrifft, die ein Untermenü haben. In unserem Fall erkennen wir folgende Struktur

  • Oberklasse: menu
  • Verwendete Klasse für Elemente mit Untermenü: menu-item-has-children

Daraus lässt sich folgender CSS-Selektor bilden:

.menu > .menu-item-has-children

Dieser kann jetzt im CMS in den Website-Optionen für die angelegte Regel eingetragen werden:


Bild 6: Hover-Mode Selektoren im B12-Touch CMS

Nun wird (auch in der Preview im Maus-Modus) kein Hover-Effekt mehr angezeigt, stattdessen erscheint das Menü erst auf (Touch-)Klick.

 

3. Slider-UI-Komponente unterstützen (Mouse Mode)

Eine UI-Komponente der Internetseite erfordert beispielsweise Drag & Drop zur korrekten Bedienung, in unserem Beispiel der jQuery Slider. Standardmäßig ist Touchinteraktion immer an das Scrollverhalten der Seite gebunden, mit den Website-Optionen lässt sich das umgehen.


Bild 7: Beispiel Slider der jQuery UI

URL der Webseitehttps://jqueryui.com/slider/

Regel-Ausdruckhttps://jqueryui\.com/slider/

Lösung: Einrichtung eines Mouse-Mode Selektors

Sogenannte Mouse-Mode CSS-Selektoren ermöglichen der Browser-App, den Maus-Modus für ein bestimmtes Element zu aktivieren und das Scrolling-Verhalten zu deaktivieren. Erneut kontrollieren wir den HTML-Code mittels Entwicklertools:


Bild 8: HTML-Code des Slider-Elements

Es lässt sich hier die vermutlich eindeutige Klassenzuweisung ui-slider-handle identifizieren, die im CMS eintragen wird:


Bild 9: Mouse-Mode Selektoren im B12-Touch CMS

Nun ist in der Browser-App die Slider-Komponente wie gewohnt auch per Touchbedienung nutzbar.

 

4. Webspecial mit Vollbild-Scrollverhalten (Mouse Mode)

Am Beispiel dieses Webspecials soll die Vollbild-Darstellung ohne Scrolling sowie das Draggen eines 3D-Modells im B12-Touch Browser ermöglicht werden. Mittels Website-Optionen wird das Scrollverhalten der Seite deaktiviert und ein Dragging des Autos ermöglicht.


Bild 10: Mercedes Webspecial CLA Shooting Brake

URL der Webseitehttp://cla-shootingbrake.mercedes-benz.com/de_DE

Regel-Ausdruckhttp://cla-shootingbrake\.mercedes-benz\.com/de_DE

Lösung: Deaktivierung der Standard-Interaktionen, Einrichtung eines Mouse-Mode Selektors

Zunächst wollen wir das Interaktionsverhalten auf der Webseite verändern. Folgende Funktionen stehen dafür zur Verfügung:

  • Scroll: Scrolling der Webseite bei Touchinteraktion
  • Bouncing: Ausfedern am oberen und unteren Ende der Webseite
  • Zoom: Vergrößerung und Verkleinerung der Inhalte mit der Zoomgeste


Bild 11: Konfiguration der Interaktion im B12-Touch CMS

Als nächstes prüfen wir, welcher CSS-Selektor für die Wahl des Mouse-Mode Selektors in Frage kommt.


Bild 12: HTML-Code des Bereichs zum Draggen

Der CSS-Selektor highlight-overview scheint für unsere Zwecke geeignet zu sein.


Bild 13: Mouse-Mode Selektoren im B12-Touch CMS

 

5. Manipulation der Seiteninhalte mittels eines On-Load-Skripts

Zur beispielhaften Darstellung der Onload-Skripte soll die jQuery Sortable Komponente mittels Onload-Skripten auf Touchbedienung angepasst werden. Diese Anpassung ist ebenfalls mit den schon vorgestellten Mouse-Mode Selektoren umsetzbar.


Bild 14: Beispiel der Sortable UI von jQuery

URL der Webseitehttps://jqueryui.com/sortable/

Regel-Ausdruckhttps://jqueryui\.com/sortable/

Lösung: Onload-Skript, alternativ Mouse-Mode Selektoren

Mittels Drag & Drop können die einzelnen Elemente in der Reihenfolge geändert werden. Wir wollen dafür folgendes Skript beim Laden der Seite ausführen:

var elements = document.evaluate("//*[@id=\"sortable\"]/li", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

for (var i = 0; i < elements.snapshotLength; ++i) {
     elements.snapshotItem(i).className += " b12touch_mouse_action";
}

Zunächst wird mittels XPath eine Liste elements erstellt, die alle oben gezeigten Elemente des DOM-Baumes enthält. Jedem dieser Elemente wird dann eine Klassen-Konstante zugewiesen, die den oben beschriebenen Mouse-Mode automatisch aktiviert. Folgende Klassen-Konstanten werden von unserem B12-Touch Browser automatisch interpretiert:

  • b12touch_mouse_action für die Aktivierung des Mouse-Mode
  • b12touch_hover_action für die Aktivierung des Hover-Mode

Das Skript wird in der definierten Regel als Onload-Skript hinzugefügt:


Bild 15: Hinzufügen eines Onload-Skript im B12-Touch CMS

Im gewählten Beispiel gibt es noch eine Besonderheit: die Komponente wird in einem iframe dargestellt. Skripte müssen immer in einem Kontext ablaufen, und ohne Einrichtung der Frame-Url Eigenschaft ist dieser das Hauptfenster. Um Elemente der Sortable-Komponente zu manipulieren, ist aber der iframe-Kontext notwendig. Dieser ist ebenfalls aus den Entwicklertools ablesbar und wird dann als .*/resources/demos/sortable/default.html mit eingetragen.


Bild 16: IFrame-Source im HTML-Code

 

6. Automatische Authentifizierung mittels Basic Auth

Auf Messen werden oft Prototypen für neue Internetseiten vorgestellt, die Sie natürlich mit einem Kennwort vor unerlaubtem Zugriff schützen wollen. Eine Authentifizierung mittels Basic Auth kann als Teil einer Website-Optionen Regel definiert werden.


Bild 17: Google Chrome Zugangsabfrage

Für die Seite muss eine Regel definiert werden, bei der dann der erforderliche Benutzername und das Passwort eingetragen werden kann. Das ist die einzige Möglichkeit, wie Sie mit Basic Auth im B12-Touch Browser eine Anmeldung vornehmen können.


Bild 18: Authentifizierung im B12-Touch CMS

 

 

Haben Sie Fragen? Anfrage einreichen