Besser surfen mit iPhone und Android

Profi-Tools für mobile Websites

03.11.2011 von Manfred Bremmer
Diese Werkzeuge und Services helfen Ihnen bei der Entwicklung und beim Monitoring mobiler Websites.

Smartphone- und Tablet-Nutzern einen speziellen, an die Charakteristika ihrer Endgeräte angepassten Zugang zu Websites zu bieten ist kein Hexenwerk. Neben allgemeinen Regeln zu Darstellung und Inhalten einer mobilen Website gibt es eine Reihe von Tools, die Entwickler bei ihrer Arbeit unterstützen.

Mobilisierungs-Tools
User Agent Switcher
Das kostenlose Firefox-Add-on "User Agent Switcher" ändert die Browser-Kennung (User Agent String) und ermöglicht es so, die mobile Darstellung der Website auf dem Desktop zu testen.
Mobilizer iPhone
Die Adobe-AIR-Anwendung (PC und MacOS X) simuliert vier mehr oder weniger populäre Geräte und stellt auf ihnen Web-Seiteninhalte dar. Verfügbar sind unter anderem iPhone...
Mobilizer HTC Evo
...HTC Evo...
Mobilizer Blackberry Storm
...oder Blackberry Storm.
MobileOKChecker
Die Website MobileOKChecker gibt nach Eingabe der URL einer bereits laufenden Seite oder des Codes ein allgemeines Urteil in Prozenten aus. Außerdem bewertet sie die Seitengröße sowie die Zahl der Requests beim Aufbau.
MobileOKChecker
In einem detaillierten Bericht werden zusätzlich die - zumindest nach W3C-Gesichtspunkten - Fehler der Schwere nach geordnet angezeigt und Verbesserungsvorschläge gemacht.
Keynote Mite
Entwickler können mit dem kostenlosen Tool Keynote MITE ihre Inhalte aus Endnutzersicht überprüfen und anhand der Ergebnisse die Benutzerfreundlichkeit verbessern. Basis sind die Profile von über 1800 aktuellen mobilen Endgeräten.
Keynote Mite
Dazu werden sowohl eine Bewertung...
Keynote Mite
...als auch umsetzbare Empfehlungen bezüglich der Optimierung von Qualität, Performance und Compliance mit den Best-Practices-Empfehlungen des W3C für mobile Websites gegeben.
Keynote MWP
Mit der kostenpflichtigen Lösung Mobile Web Perspective (MWP) lassen sich Verfügbarkeit, Reaktionszeit und Qualität einer mobilen Website aus Sicht von tatsächlichen Endgeräten überwachen.
320 and up
Anstatt eine für Desktops gedachte Version nachträglich für kleine Bildschirme abzuspecken, kann man auch umgekehrt eine mobile Website als Ausgangspunkt nehmen. Bei 320 and up beginnt man mit einem einfachen Stylesheet, das nur Reset- (Grundeinstellungen), Farb- und Typografie-Styles enthält. Lediglich, wenn größere Formate benötigt werden, laden Media Queries weitere Styles hinzu.
Yimbel
Das Hamburger Startup Yimbel bietet eine vollautomatische Umwandlung von Websites für mobile Endgeräte an. Das "Yimbeln", wie es die Hamburger nennen, kostet je nach Komplexität der Seite zwischen 25 und 2400 Euro.
Gomometer
Auch Google ist um mobile Websites bemüht und bietet eine Art Selfcheck an.
Gomometer
Auf der Website können Besucher im Bereich GoMoMeter die URL ihrer Website eingeben und bekommen die aktuelle Darstellung der Inhalte auf einem mobilen Endgerät (natürlich einem Android-Smartphone) angezeigt.
Gomometer
Im Anschluss bewertet GoMo basierend auf dem Geschäftsfeld die Mobilität der Seite und macht Vorschläge für die weitere Verbesserung. Der sechsseitige "Gomometer-Report" richtet sich aber eher an die Geschäftsführung oder den IT-Leiter als an die Entwickler selbst.

User Agent Switcher

Das kostenlose Firefox-Add-on "User Agent Switcher" von Chris Pederick ist ein essenzielles Werkzeug für alle Entwickler von mobilen Websites. Das Tool ändert die Browser-Kennung (User Agent String) in Firefox ab und ermöglicht es so, die mobile Darstellung der Website auf dem Desktop zu testen. Als Standard unterstützt User Agent Switcher nur eine eingeschränkte Auswahl von Browsern und Endgeräten. Im Internet finden sich jedoch weitere aktuelle UA-Listen im XML-Format, beispielsweise unter http://bemoko.com/wiki/User_Agent_Switcher.

Springbox Mobilizer

Neben dem User Agent Switcher gibt es noch eine Reihe von Websites und Tools, die eine Darstellung wie durch ein mobiles Endgerät imitieren. Durchweg empfehlenswert ist "Mobilizer" von Springbox: Die Adobe-AIR-Anwendung (PC und MacOS X) simuliert vier mehr oder weniger populäre Geräte und stellt auf ihnen Web-Seiteninhalte dar. Dazu tippt man entweder die entsprechende URL ein oder kopiert den Code (HTML-, Flash- oder Bilddaten) in das Eingabefeld. Anschließend kann man auf dem Emulator Links anklicken, im Bild scrollen oder Screenshots anfertigen. Gestensteuerung wird leider nicht unterstützt, mit Apple iPhone 4, Palm Pre, Blackberry Storm und HTC Evo ist die Smartphone-Auswahl außerdem nicht ganz aktuell.

MobileOKChecker

Um zu prüfen, wie Smartphone-freundlich eine Website ist, kann man auch den "MobileOKChecker" von W3C nutzen. Nach Eingabe der URL einer bereits laufenden Seite oder des Codes gibt die Site nicht nur ein allgemeines Urteil in Prozenten aus. Sie bewertet auch die Seitengröße sowie die Zahl der Requests beim Aufbau. In einem detaillierten Bericht werden außerdem die - zumindest nach W3C-Gesichtspunkten - Fehler der Schwere nach geordnet angezeigt und Verbesserungsvorschläge gemacht.

Keynote MITE

Keynote Systems stellt mit "MITE" (Mobile Interactive Testing Environment) ein kostenloses Desktop-Tool zum Testen von mobilen Websites, Inhalten und Applikationen zur Verfügung. Auf Basis der Profile von über 1800 aktuellen mobilen Endgeräten können Entwickler ihre Inhalte aus Endnutzersicht überprüfen und anhand der Ergebnisse die Benutzerfreundlichkeit verbessern. Dazu werden sowohl eine Bewertung als auch umsetzbare Empfehlungen bezüglich der Optimierung von Qualität, Performance und Compliance mit den Best-Practices-Empfehlungen des W3C für mobile Websites gegeben.

Keynote MWP

Foto: Keynote Systems

Ebenfalls von Keynote Systems stammt das Tool "Mobile Web Perspective" (MWP). Mit der kostenpflichtigen Lösung lassen sich Verfügbarkeit, Reaktionszeit und Qualität einer mobilen Website aus Sicht von tatsächlichen Endgeräten überwachen. Betreiber können damit Vergleiche zum Wettbewerb ziehen oder erhalten Hinweise, wo es Verbesserungsbedarf bei der Qualität gibt. Unternehmen, die für ihren mobilen Web-Auftritt Plattform- oder Content-Provider beauftragt haben, sind zudem in der Lage, mit MWP die Einhaltung der Service-Level-Agreements (SLAs) zu kontrollieren.

320 and up

Anstatt eine für Desktops gedachte Version nachträglich für kleine Bildschirme abzuspecken, kann man auch umgekehrt eine mobile Website als Ausgangspunkt nehmen. Diesen neuen "Mobile-first"-Ansatz, der lange Ladezeiten und Ähnliches von Grund auf verhindern soll, verfolgen die Macher von "320 and up". Es handelt sich dabei um eine Erweiterung zu dem populären Standard-Template "HTML5 Boilerplate", kann jedoch auch unabhängig davon genutzt werden. Bei 320 and up beginnt man mit einem einfachen Stylesheet, das nur Reset- (Grundeinstellungen), Farb- und Typografie-Styles enthält. Lediglich, wenn größere Formate benötigt werden - unterstützt werden Seiten mit 480, 600, 768, 992 und 1382 Pixel Breite - laden Media Queries weitere Styles hinzu.

Yimbel

Foto: Yimbel

Gleich eine ganze Reihe von Dienstleistern bieten die Anpassung von stationären Websites an mobile Endgeräte als Service an. Neben den großen Anbietern wie Netbiscuits oder der YOC-Tochter Sevenval ist unter anderem auch der neue Player Yimbel einen Blick wert - nicht nur wegen des günstigen Preises: Das Hamburger Startup bietet eine vollautomatische Umwandlung von Websites für mobile Endgeräte an. Das "Yimbeln", wie es die Hamburger nennen, kostet je nach Komplexität der Seite zwischen 25 und 2400 Euro.

Grundsätzlich können alle Websites in so genannte Appsites umgewandelt werden, auch komplexe Shopsysteme. Ausgenommen sind lediglich Seiten, die ausschließlich auf Flash basieren oder in einem Javascript- Container laufen.

Das System arbeitet Web-basiert als Software as a Service (SaaS) auf der Cloud-Plattform Windows Azure. Nach der Umwandlung zur mobilen Website wird keine Verbindung zu Yimbel mehr benötigt, die implementierten Javascript-Dateien laufen autark auf dem Server. Auf diese Weise bleiben die Nutzer weiterhin Herr über ihre Daten.

GoMoMeter

Starthelfer: Der GoMoMeter von Google.

Auch Google ist um mehr Smartphone-freundliche Websites, insbesondere im Business-Umfeld, bemüht und hat mit GoMo (howtogomo.com) nun eine entsprechende Initiative gestartet. Auf der Website können Besucher im Bereich GoMoMeter die URL ihrer Website eingeben und bekommen die aktuelle Darstellung der Inhalte auf einem mobilen Endgerät (natürlich einem Android-Smartphone) angezeigt.

Im Anschluss bewertet GoMo basierend auf dem Geschäftsfeld (Online-only, Lead-Generierung, markengesteuert, Off-/Online-Geschäft) die Mobilität der Seite und macht Vorschläge für die weitere Verbesserung. Zusammengefasst werden die Anregungen in einem sechsseitigen "Gomometer-Report". Mit seinen eher allgemeinen Tipps zur Gestaltung von mobilen Websites richtet sich der Report aber eher an die Geschäftsführung oder den IT-Leiter als an die Entwickler selbst.