1323505

Webmaster-Tools für mobile Webseiten/Web-Apps

18.12.2014 | 09:38 Uhr | Hans-Christian Dirscherl

Bis vor einiger Zeit reichte es völlig aus, wenn Sie Ihre Website so optimierten, dass sie in allen gängigen PC-Browsern gut aussah und funktionierte. Doch mit dem Vormarsch der Smartphones haben sich die Anforderungen an Webseiten-Programmierer grundlegend geändert. Jetzt muss eine Seite nicht nur auf dem PC, sondern auch auf dem Smartphone und dem Tablet gut aussehen und sich vor allem auch intuitiv bedienen lassen. Und eben nicht nur auf dem iPhone und dem iPad, sondern auch auf einem Android-Smartphone oder einem Windows Phone-Gerät. Das stellt Webseiten-Betreiber vor erhebliche Probleme. Größere Webseiten stellen deshalb für den Zugriff auf ihr Angebot oft eine separate App bereit, die für die jeweilige Smartphone-Plattform optimiert und in nativen Code erstellt ist. Also in Objective-C für iOS, in Java für Android und in Microsoft .net für Windows Phone.

Web-Apps für iOS, Android und Windows Phone 7

Doch für kleinere Webseiten lohnt es sich in der Regel nicht eine separate App für mehrere verschiedene Smartphone-Plattformen zu erstellen. Die Lösung hierfür lautet: Eine spezielle Version der Website zu erstellen, deren Design und Funktionalität für Smartphones angepasst ist und die dem Besucher wie eine App vorkommt. Deshalb spricht man hierbei auch von Web-Apps.

Der Screenshot zeigt eine Website, die wir für Smartphones optimiert haben. Die Hauptarbeit erledigt das CSS dieser Seite. In unserem Beispiel wird unsere Website auf einem Android-Smartphone mit Android 2.2 im Standard-Browser dargestellt.
Vergrößern Der Screenshot zeigt eine Website, die wir für Smartphones optimiert haben. Die Hauptarbeit erledigt das CSS dieser Seite. In unserem Beispiel wird unsere Website auf einem Android-Smartphone mit Android 2.2 im Standard-Browser dargestellt.

Diese mobile Website respektive Web-App soll also auf kleinen Bildschirmen mit den gängigen Smartphone-Auflösungen passabel aussehen, die typischen Designmerkmale von iPhone und Android-Apps bieten und die typischen Navigationselemente eines Smartphones (beispielsweise Zurückbutton in der Titelleiste oder Telefonnummern, die man direkt anrufen kann) bereit stellen.

Derartige Websites lassen sich auch auf dem Homescreen eines Smartphones ablegen und von dort aus direkt starten. Und zwar ohne dass der Smartphone-Browser sichtbar gestartet wird. iOS unterstützt hierfür spezielle Meta-Tags im HTML-Quellcode, mit denen sich der Safari-Browser ausblenden lässt. Der Besucher einer derartigen Web-Apps bekommt also nicht einmal die Bedienelemente des Safari wie beispielsweise das URL-Eingabefeld zu Gesicht.

JQuery Mobile und JQTouch zum Erstellen von Web-Apps

Web-Apps werden mit HTML, CSS und Javascript erstellt, wobei die neuen Features von HTML5 sich hier besonders anbieten. Damit Sie den Code für eine mobile Website nicht zeitaufwändig und fehleranfällig komplett von Hand erstellen müssen, gibt es Frameworks, die viele fertige Design-Merkmale und Funktionalitäten sozusagen schlüsselfertig in ihren Bibliotheken bereitstellen. JQT dürfte das bekannteste Framework für das Erstellen von mobilen Seiten sein. JQT /ehemals: JQTouch) wird nicht allein verwendet, sondern ist eine Erweiterung für das bekannte und weit verbreitete Javascript-Framework JQuery Mobile . JQTouch erweitert die Javascript-Bibliotheken-Sammlung JQuery Mobile um spezifische Elemente, wie man sie für Smartphones benötigt. Um mit dem Gespann JQuery und JQTouch arbeiten zu können, müssen Sie beide Frameworks auf ihren Servern herunterladen und dort entpacken. Danach müssen Sie Verweise auf diese beiden Javascript-Frameworks in die Header ihrer mobilen HTML-Seiten einbauen.

Um eine mobile Seite während der Entwicklung überprüfen zu können, benötigen Sie entweder einen Emulator oder echte Smartphones. Sie können aber mitunter die Smartphone-Darstellung einer Webseite auch im Browser auf dem Desktop-PC simulieren. Dafür müssen Sie aber den User Agent ändern – der Desktop-Browser muss dich gegenüber dem Server, der Ihre mobile Seite ausliefert, als Smartphone-Browser ausgeben. Den User Agent können Sie im Apple Safari direkt umstellen, bei anderen Browsern wie Firefox benötigen Sie dafür beispielsweise ein Addon wie User Agent Switcher.

Fazit zu Webmaster-Tools für Web-Apps

Zielgruppe: Hobby-Seiten-Betreiber und professionelle Seiten-Betreiber Einsatzzweck: Webseiten, die Cross-Plattform-Inhalte unter anderem auch auf mobile Geräte ausliefern wollen Vorteil: Seiten sind auf nahezu allen Geräten les- und nutzbar Nachteil: Erhebliches Plattform-übergreifendes Know-How erforderlich, Programmier- und Debugkenntnisse nötig, insbesondere in Javascript. Unterschiedliche Testgeräte zur Überprüfung der Website nötig

PC-WELT Marktplatz

0 Kommentare zu diesem Artikel
1323505