Webdesign

Mobiles Webdesign: Per Gestensteuerung durch Bilder navigieren

12. Oktober 2012
von

Der gängige Weg, Bilder für die mobile Ansicht einer Website vorzubereiten, ist die Skalierung des Bildes auf die jeweilige Breite des Displays. Doch je nach Bildinhalt kann eine starke Verkleinerung des Bildes dazu führen, dass es – gerade bei Grafiken oder detailreichen Fotos – nicht mehr vernünftig wahrgenommen werden kann. Eine Alternative ist, das Bild nicht zu verkleinern, sondern per Gestensteuerung navigierbar zu machen. Wie das geht, zeige ich Ihnen im folgenden Beitrag…

Los geht’s: Das Bild für die mobile Ansicht aufbereiten

Im ersten Schritt muss das Bild per HTML und CSS so aufbereitet werden, dass es bei kleinen Auflösungen beschnitten wird. Dazu setzen wir um das Bild einen Container, der die Gesamtbreite des Displays annimmt und das Bild auf diese Breite beschneidet:

1
2
3
<div style="width: 100%; overflow: hidden">
  <img src="bild.jpg" width="800" height="400" alt="" id="bild" />
</div>

Um das Bild einfach per JavaScript ansprechen zu können, weisen wir dem Bild eine ID zu. So können wir bei Darstellung des Bildes auf einem Gerät, welches kleiner als 800 Pixel in der Breite auflöst, dafür sorgen, dass es am rechten Rand auf die Displaybreite beschnitten wird.

Der schwierigere Part: Gestensteuerung per JavaScript hinzufügen

Im nächsten Schritt fügen wir eine JavaScript-Funktion in den Head ein, welche die Gestensteuerung für das Bild ermöglicht. Voraussetzung ist, dass der Browser das Touch-Event kennt, was bei aktuellen Mobilbrowsern aber mittlerweile der Fall ist:

1
2
3
function gestensteuerung() {
 
  if ("ontouchstart" in document.documentElement) }

Um Fehler bei älteren Browsern zu vermeiden, fragen wir als erstes ab, ob der Event-Handler unterstützt wird. Es folgt die Funktion „bildausschnitt()“, welche dafür sorgt, dass sich durch die Gestensteuerung der Bildausschnitt ändert:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    function bildausschnitt(ereignis) {
 
      ereignis.preventDefault();
      var bewegung = ereignis.touches[0];
 
      if (ereignis.type == "touchstart") {
 
        var start = bewegung.pageX;
 
      } else if (ereignis.type == "touchmove") {
 
        var distanz = start - bewegung.pageX;
        var position = document.getElementById("bild").offsetLeft - distanz;
        var distanz_max = -document.getElementById("bild").offsetWidth + document.getElementById("bild").parentNode.offsetWidth;
 
        if (position < 0 && position > distanz_max) {
          document.getElementById("bild").style.marginLeft = position + "px";
        }
 
      }
     }

Der Variablen „bewegung“ übergeben wir das Touch-Ereignis, welches für jeden Finger, der auf dem Display ermittelt wird, einen Wert in ein Array schreibt. Wir beschränken uns auf den ersten Finger („touches[0]“).

Im nächsten Schritt werden je nach Ereignistyp verschiedene Variablen gesetzt. „touchstart“ beschreibt den Moment, in dem der Bildschirm berührt wird, „touchmove“ den Moment der Bewegung auf dem Bildschirm. In beiden Fällen wird die Position des Fingers per „bewegung.pageX“ abgefragt – im Beispiel beschränken wir uns auf eine Steuerung auf der X-Achse. Bei „touchstart“  wird der Wert in der Variablen „start“ gespeichert.

Während der Bewegung misst das Script die Distanz zwischen „start“ und der aktuellen Fingerposition und speichert sie in der Variablen „distanz“. Die neue Position des Bildes (Variable „position“) ergibt sich aus der Differenz zwischen der aktuellen Bildposition, die mit „offsetLeft“ abgerufen wird, und dem Wert aus „distanz“.

Damit das Bild nie aus dem Display geschoben werden kann, wird eine maximale Distanz errechnet (Variable „distanz_max“). In der anschließenden „if“-Abfrage setzt man das Bild nur dann auf eine neue Position, wenn die Variable „position“ kleiner Null und größer „distanz_max“ ist.

Zuguterletzt muss die Funktion „bildausschnitt()“ noch dem Event-Listener zugewiesen werden, damit sie bei den entsprechenden Ereignissen auch startet:

1
2
    document.getElementById("bild").addEventListener("touchstart", bildausschnitt, false);
    document.getElementById("bild").addEventListener("touchmove", bildausschnitt, false);

Zudem fügen wir die Gesamtfunktion „gestensteuerung()“ dem Event-Listener hinzu, damit sie schon beim Laden der Seite startet:

1
window.addEventListener("load", gestensteuerung, false);

Fertig! Fortan können Bilder per Fingergeste gesteuert und müssen nicht zwingend verkleinert werden.

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

3 Kommentare zu „Mobiles Webdesign: Per Gestensteuerung durch Bilder navigieren
  1. Johannes am 12. Oktober 2012 um 09:28

    Sehr interessant! Danke für den Tipp!

  2. Kai Schwarzmayr am 29. Oktober 2012 um 14:35

    Hört sich gut an, ich bekomme es jedoch nicht zum laufen. Gibt es eine Demo dazu?

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!