Judith's WebWi-Lernblog

„Runtastic bietet Produkte und Dienstleistungen rund um die Erfassung und Verwaltung von Sportdaten an, um Menschen zur Sportausübung zu bewegen und mit Gleichgesinnten zu vernetzen. (…) Alle relevanten Sportdaten (Zeit, Tempo, Kalorienverbrauch, Puls) können mit Hilfe von Smartphone –Apps (zB auf iPhone, Android, BlackBerry, Windows Phone) erfasst und direkt in das Fitnessportal www.runtastic.com (soziales Netzwerk für Sportler) übertragen werden.“[1]

Bei Runtastic handelt es sich demnach um ein Internet-Unternehmen, welches sowohl Software-Applikationen als auch Hardware anbietet. Das Unternehmen wurde im Oktober 2009 von vier Studenten aus Österreich gegründet. 5 Jahre später können sie sich mit 100 Millionen App-Downloads weltweit als Marktführer im mobilen Gesundheits- und Fitnesssegment bezeichnen. Zudem hat sich im Laufe der Zeit im eigenen sozialen Netzwerk „Runtastic.com“ eine aktive Community mit insgesamt 50 Millionen registrierten Usern entwickelt.[2]

Insgesamt sind auf der Webseite des Unternehmens 18 Apps für alle gängigen, mobilen Betriebssysteme zum Download verfügbar. Nun stellt sich allerdings die Frage, wie funktionieren diese Apps und woher haben sie die Informationen, welche sie den User später auf attraktivere Art und Weise weitervermitteln? Hierzu benötigt es Unmengen an intelligenten Schlüsseltechnologien, welche ich im Folgenden näher betrachtet werde.

GPS-Tracking / Geotagging

Die GPS-Tracking, daher die Bestimmung des Standorts, ist eine der wesentlichsten Funktionen, welche Runtastic nutzt. Beispielsweise nutzt die originale Runtastic App „Runtastic Laufen & Fitness“ das Global Positioning System (GPS) um in Echtzeit den Standort des Smartphones (GPS-Empfänger), auf welcher die App ausgeführt wird, zu bestimmen und zu verfolgen. Durch die Integration von Google Maps in der App, erhält der User während und nach seiner Sport- und Fitnessaktivität (z.B. Laufen oder Radfahren) eine detaillierte Darstellung seiner aktuellen Position und der zurückgelegten Strecke (siehe Abbildung 1). Weiters stellt Runtastic durch das GPS-Signal auch Informationen zu Höhenmeter, Distanz oder Geschwindigkeit (in Verbindung mit Zeit) bereit. Durch die Übertragung der Position in Echtzeit, erkennt die App zudem, wenn beispielsweise eine Pause eingelegt wird (keine Fortbewegung wird verzeichnet) und kann zur Vermeidung von Verfälschungen bezüglich Geschwindigkeiten o.ä., die Zeit stoppen.[3]

Abbildung 1 - Screenshot aus Runtastic Laufen & Fitness

Außerdem bietet „Runtastic Laufen & Fitness“ sowie auch einige weitere Runtastic-Apps eine direkte Verknüpfung zur Kamera des Smartphones. Dadurch entsteht die Möglichkeit, während der Aktivität Fotos von der Umgebung aufzunehmen und diese den aktuellen Standort-Daten zuzuordnen. Mithilfe dieses sogenannten Geotagging, daher die Zuweisung von fotografischen Aufnahmen zu geografischen Koordinaten[4], können später die Fotos in Kombination mit der hinterlegten Strecke angesehen werden.

Touch-Display

Die Runtastic-App „Push Ups“ soll den Nutzer dabei unterstützen, Liegestütze (engl. Push Ups) zu trainieren. Die App dient dazu die Anzahl der getätigten Liegestütze zu erfassen und Statistiken zu absolvierten Trainingseinheiten zu erstellen. Bei der Erfassung der absolvierten Liegestütze spielt das Touch-Display häufig eine wichtige Rolle. Durch Berühren des Displays mit der Nase wird somit die Anzahl an Liegestütze verzeichnet. Bei neueren Smartphones (mit qualitativen Näherungssensoren) wurde diese Art der Informationserfassung allerdings bereits durch Nutzung der Sensorik ersetzt, wodurch das Berühren des Displays nicht mehr zwingend notwendig ist.[5] Auf das Thema Sensorik wird erst etwas weiter untern näher eingegangen.

Abbildung 2 - Push-Up-App nutzt Touch-Display

Kamera

Die Smartphone-Kamera kommt beispielsweise bei der Runtastic-App „Heart Rate“ als Schlüsseltechnologie ins Spiel. Die App soll zeigen, in welcher Frequenz das Herz des Nutzers aktuell schlägt. Hierfür muss der User, nach Start der App, einfach seinen Finger, am besten bei aktiviertem Blitzlicht, auf die Kamera des Smartphones halten. Die Messung des Pulses gelingt dabei „mittels Lichtabsorption und –remission bei Durchleuchtung der Haut“.[6] Laut Testberichten funktioniert die Messung überraschenderweise tatsächlich sehr gut.

Sensorik

Die Sensorik spielt für eine Menge Runtastic-Apps eine wesentliche Rolle. Die sogenannte „Fitness App Kollektion“ von Runtastic umfasst insgesamt vier Apps – Push-Ups (Liegestütze), Sit-Ups, Squats (Kniebeugen) und Pull-Ups (Klimmzüge) – und würde ohne Smartphone-Sensoren gar nicht funktionieren. Die erstgenannte App, Push-Ups, nutzt beispielsweise den Näherungssensor. Das ist ein Sensor, der Objekte auch ohne physischen Kontakt erkennt, sobald sie sich in der Nähe befinden. Er befindet sich meist an der Vorderseite des Smartphones, weshalb das Gerät beispielsweise bei Liegestützen unter das Gesicht gelegt wird. Jedes Mal, wenn das Gesicht sich dem Gerät nähert, wird durch den Näherungssensor automatisch ein Liegestütz gezählt (bei älteren Smartphones muss das Display mit der Nase berührt werden – siehe weiter oben).[7]

Die restlichen drei Apps aus der „Fitness App Kollektion“ nutzen den eingebauten Beschleunigungssensor von Smartphones. Dieser hat die Aufgabe, festzustellen, in welche Richtung und zudem in welchem Winkel das Gerät ausgerichtet ist. Durch den Beschleunigungssensor können demnach Beschleunigung gemessen werden. Ob Sit-Ups, Klimmzüge oder Kniebeugen, überall muss der Nutzer das Gerät dementsprechend in die Aktivität einbinden (z.B. auf- und abbewegen), dass der Beschleunigungssensor die Bewegung messen kann.[8]

Natürlich nutzen auch noch viele weitere Apps von Runtastic unterschiedliche Sensoren um ihre Funktion zu erfüllen, jedoch unterscheiden die sich meist nur geringfügig, weshalb hier nicht näher auf die verschiedenen Apps eingegangen wird.

Bluetooth

Runtastic bietet neben Software-Applikationen auch zahlreiche Hardware-Erweiterungen an (z.B. Brustgurt mit Herzfrequenzmesser, Pulsuhr, Sensoren für das Rad, etc.). Diese Hardware-Tools arbeiten mit den Apps zusammen und stellen ihnen relevante Informationen zur Verfügung. Verbunden werden App und Hardware mittels Bluetooth 4.0, auch Bluetooth Smart (Ready) genannt.[9]

Zusammenfassung

Runtastic nutzt mit seinen zahlreichen Apps wie beschrieben unterschiedliche Schlüsseltechnologien. Die folgende Tabelle fasst diese nochmals zusammen:

Geschäftsmodell

Runtastic bietet alle seine Apps als kostenlose Version an, häufig allerdings lediglich mit eingeschränkter Funktionalität. Bei der „Runtastic Laufen & Fitness“-App bedeutet dies beispielsweise keine Möglichkeit, bereits getätigte Routen abzuspeichern. Die „Heart-Rate“-App kann hingegen in kostenloser Version nur 3-mal täglich genutzt werden. Will man den vollen Funktionsumfang der Apps nutzen, kann (bei den meisten Apps) gegen Entgelt auf die „Pro“-Version upgradet werden. Diese kosten zwischen 2 und 5 Euro pro Download, wodurch Runtastic Einnahmen generiert. Zusätzlich werden Einnahmen aus dem Webportal (Werbung) und den verkauften Hardware-Produkten generiert.

Präsentation

Den folgenden Blogbeitrag möchte ich dem Thema „Responsive Webdesign“ (kurz RWD) widmen. Während ich dabei die grundlegenden Fragen in Bezug auf Definition, Nutzung, Entstehung und Notwendigkeit klären möchte, greift meine Kollegin Claudia Ganglberger in ihrem Blogbeitrag etwas tiefer und beschäftigt sich mit der den Vor- und Nachteilen, der möglichen Lösungsansätze und Herangehensweisen, etc. Dieser Beitrag kann hier aufgerufen werden.

Veränderungen erfordern Anpassungen

Mobile Endgeräte wie Smartphones und Tablet gewinnen zunehmend an Bedeutung in Bezug auf die Internetnutzung. Die folgende Grafik veranschaulicht die Entwicklung der weltweiten Internetnutzung in Abhängigkeit vom jeweilg benutzten Endgerät von 2010 bis 2014.

Abbildung 1 - Internetnutzung nach Endgerät (Source: StatCounter, 10/14)^[1]

Hierbei ist ersichtlich, dass global gesehen etwa ein Drittel der Internetzugriffe von mobilen Endgeräten stammt. Wie rasch diese Entwicklung (Grafik seit 2010) voranschreitet, ist ebenfalls zu erkennen.

Was heißt diese Veränderung in Bezug auf Webseiten?

Die Bedürfnisse mobile Internetnutzer in Bezug auf Webseiten stimmen nicht mehr mit jenen der traditionellen Internetnutzer überein. Allein die Tatsache, dass mobile Endgeräte im Hoch- und Querformat gehalten werden können und Touch Screens Finger-Friendly (daher kein Mouse-Over möglich) sein müssen, stellt Webseiten-Entwickler vor große Herausforderungen.^[2] Zudem wollen mobile Internetnutzer meiste kurze, prägnante Informationen, wo hingegen PC-Nutzer nähere Details zur selben Thematik suchen.

Mögliche Anpassungsansätze^[2]

·         Doppeltippen

Um das Problem der verschiedenen Bildschirmgrößen zu lösen (oder zu umgehen) gibt es die Möglichkeit für mobile Internetnutzer doppelt auf die Seite zu tippen, wodurch der Inhalt herangezoomt wird. Da dadurch allerdings sowohl das Navigieren als auch das Erfassen der Inhalte erschwert wird, handelt es sich dabei nicht um die optimalste Lösung.

·         Der kleinste gemeinsame Nenner

Um das eben genannte Problem des Zoomens zu umgehen, können Webseiten-Entwickler auch das Design auf die kleinste Auflösung anpassen (im heutigen Fall wäre es das Smartphone) und dieses für alle Endgeräte ausliefern. Für Nutzer mit hoher Auflösung und großen Screens fällt das Ergebnis danach allerdings ebenfalls suboptimal aus.

Abbildung 2 - Anpassungsansatz: Der kleinste gemeinsame Nenner^[2]

·         Designer-Ansatz

Der Ansatz des „kleinsten gemeinsamen Nenners“ kann auch in die umgekehrte Richtung passieren. Häufig ist dies der Fall, wenn Designer (welche meist auf hochauflösenden Geräten sitzen) die Webseite auf ihren eigenen Screen anpassen. Hier kommt es in der Folge dazu, dass auf kleinen Screens (Smartphones) kaum noch etwas zu erkennen ist.

Abbildung 3 - Anpassungsansatz: "Designer-Ansatz"^[2]

·         Unterschiedliche Webseiten

Eine etwas bessere (und noch immer weit verbreitetete) Lösung ist jene, dass für jedes Endgerät eine eigene Webseite entwickelt wird. Erkennen kann man diese Webseiten auf mobilen Endgeräten durch den Zusatz „m“ statt „www“ (Bsp.: m.facebook.com). Das Problem bei diesem Ansatz ist der enorme Aufwand für die Programmierung, da für jedes Endgerät eine eigene Webseite programmiert werden muss (nicht nur PC und Smartphone, auch Tablet, etc.)

·         Responsive Webdesign

Genau hier kommt Responsive Webdesign als beste Lösung ins Spiel.

Was ist also Responsive Webdesign?

Responsive Webdesign bedeutet so viel wie „reagierendes Webdesign“.Es handelt sich dabei um eine Art der Webseitengestaltung, wobei sich der strukturelle Aufbau der Webseite an die Bildschirmauflösung des jeweilig benutzen Endgeräts anpasst.^[3] Das bedeutet also, dass sich der grafische Aufbau einer „responsiven“ Website anhand der Anforderungen des jeweiligen Gerätes, mit dem die Site betrachtet wird, anpasst.^[4] Dadurch soll jede Webseite auf jedem Endgerät optimal dargestellt werden.

Abbildung 4 - Responsive Webdesign^[2]

Mithilfe von RWD werden Inhalt und Design automatisch an den Nutzer angepasst. Die Inhalte (Bilder, Tabellen, Texte,…) müssen demnach flexibel und skalierbar sein. Wie genau die Umsetzung von RWD funktioniert bzw. wie man am besten an die Sache herangeht, erkärt mein Kollegin Claudia Ganglberger in ihrem Blogbeitrag.

Fazit

In Anbetracht der Entwicklung mobiler Endgeräte als Internetnutzungsplattformen, scheint es als unumgänglich für Webseiten-Entwickler auf die Bedürfnisse von mobilen Nutzern einzugehen. Wie beschrieben, stehen den Entwicklern dabei zwar unterschiedliche Möglichkeiten zur Verfügung, allerdings scheint nur eine tatsächlich praxis-trauglich zu sein. Responsive Webdesign ist meiner Meinung nach kein „Nice-to-Have“-Feature mehr, sondern sollte bereits für jede Webseite umgesetzt oder zumindest geplant sein. Die Entwicklung dahingehend wird sich auch in den Absprungraten der Webseiten bemerkbar machen.