Wer mobile Websites erstellt, der muss auch ihre Darstellungen auf den verschiedenen mobilen Endgeräten wie Smartphones aller Art und Tablet PCs berücksichtigen und testen, ob sie auch überall korrekt angezeigt werden. Am einfachsten lässt sich so ein Test natürlich mit dem eigenen iPad oder anderem Tablet PC und dem eigenen Smartphone durchführen.

Wer allerdings solche Endgeräte nicht besitzt, der muss zu den bisher existierenden Tools oder Websites greifen, mit denen eine mobile Website auf den entsprechenden Bildschirmgrößen vorgeführt werden kann.

Nachfolgend stelle ich verschiedene Tools und Websites vor, wo Sie mobile Websites vorführen können.

ResizeMyBrowser

Auf resizeMyBrowser können Sie verschiedene Bildschirmgrößen auswählen und dort in die Browserzeile die Adresse der mobilen Seite eingeben und sie dann anzeigen lassen.

Es gibt die Bildschirmgrößen von iPhone quer- und hochformatig, Meizu M8, Google Nexus, iPhone 4, iPad, Laptop-Bildschirmgrößen, MacBook Air 08 sowie Netbook. Sie haben auch die Möglichkeit, sich eine eigene Bildschirmgröße über Create a new preset zu definieren.

Beachten Sie auch, dass die Seite in einer mobilen Version vorliegen muss. Sie können mit den unterschiedlichen Größen nicht testen, ob eine Website schon in einer mobilen Version vorliegt. Wenn Sie beispielsweise die Bildschirmgröße des iPhones mit resizeMyBrowser öffnen und Amazon aufrufen, wird die normale Website angezeigt.

Dies lässt nun die Vermutung aufkommen, dass Amazon noch nicht über eine mobile Version verfügt, was nicht stimmt. Amazon hat eine mobile Website, die dann angezeigt wird, wenn Sie sie wirklich mit einem mobilen Endgerät aufrufen – oder mit einem Simulator. Aber dazu später mehr.

ResizeMyBrowser

Ein weiteres Online-Tool ist Screenfly, mit dem Sie Websites auf verschiedenen Endgeräten testen können. Ich wollte den Service hier genauer vorstellen, aber die Website war zu diesem Zeitpunkt nicht erreichbar.

Weiterlesen  Mobile Marketing: Mittlerweile Pflicht für Unternehmen

Mobilizer-Tool von Springbox

In dem downloadbaren, kostenlosen Desktop-Tool Mobilizer stehen dem Tester vier verschiedene Smartphones, die ihre jeweilige Plattform repräsentieren, zur Auswahl: das iPhone 4, das HTC Evo, das Palm Pre und das BlackBerry Storm.  Dabei können Sie alle vier Modelle nebeneinander aufrufen und die mobile Website auf allen Displays vergleichen.

Mobilizer hat in seiner Leiste auch einen Menüpunkt Create new, doch der ist inaktiv. Das heißt, man kann noch nicht seine eigenen Smartphone-Modelle hinterlegen.

Der Tooleinsatz ist unkompliziert. Die Anwendung besteht aus einer dünnen Leiste mit einer Adresszeile und der Möglichkeit, eines oder mehrere der vier unterstützen Smartphones auszuwählen. In die Adresszeile tippen Sie die gewünschte URL.  Alternativ können Sie auch lokale Dateien aufrufen, was ganz praktisch ist, denn so muss nicht unbedingt die ganze mobile Website vorab auf einen Webserver hochgeladen werden.

Mobilizer

Sie können die Vorschau auch mit einem Rechtsklick als PNG exportieren. In dem kurzen Video sehen Sie die Anwendung und wie man sie bedient:

[vimeo 24922832 550 400]

iBBDemo2-Simulator von Blackbaud Labs

Ebenfalls ganz praktisch für einen Test ist der kostenlose Simulator iBBDemo2 von Blackbaud Labs. Allerdings kann man mit diesem Desktop-Tool nur die Apple-Produkte iPhone und iPad simulieren.

Nach dem Download des Simulators können Sie ihn vom Desktop aus starten und in die Browserzeile des angezeigten iPads oder iPhones die gewünschte Webseite aufrufen. Mit den Tasten Strg/Ctrl und den Zahlen 1 und 2 klicken Sie sich durch die beiden Apple-Modelle durch. Als erstes wird das iPad gezeigt. Mit Strg/Ctrl und den Pfeiltasten für rechts und links drehen Sie die Geräte. Im Bild unten  sehen Sie meinen Webauftritt im iPad in der Landscape-Anzeige.

Weiterlesen  Das Location based Network Foursquare für die Kundengewinnung nutzen

iBBDemo2

Bedenken Sie auch, dass das Gerät nur eine Simulation ist und daher bestimmte Anwendungen wie Videos usw. in dem Simulator unter Umständen nicht funktionieren.

Übrigens: Der Simulator zeigt Amazon mit seiner mobilen Website an, im Gegensatz zu oben genannten ResizeMyBrowser.

Wenn Sie eine mobile Website einem Kunden nicht vor Ort zeigen wollen, können Sie mit diesem Simulator und einer Screen-Capture-Software wie Camtasia ein kleines Video drehen, in dem dann der Kunde genau sieht, wie sein mobiler Internetauftritt auf den beliebten mobilen Endgeräten aussieht.

Screenfly von Quirktools

Wenn Sie Screenfly von Quirktools aufrufen, dann sehen Sie zuerst eine fast leere Seite mit einem Eingabefeld. In dieses geben Sie die URL der zu testenden Website ein.

Ich gebe die URL meines Webauftritts www.webservice-sbraun.de ein. Dann wird sie gleich in Desktop-Größe mithilfe von Screenfly angezeigt. Auf dem unteren Screenshot sehen Sie auch die untere Iconleiste, mit der Sie verschiedene Bildschirmgrößen simulieren können und erkennen dann, wie sich die Website diesen anpasst.

Eine Anpassung an einen kleineren Bildschirm passiert allerdings nur, wenn Ihre Website ein Responsive Layout besitzt, das sich für Desktop-PC und alle mobilen Endgeräte wie Smartphones und Tablets eignet. So ein Layout haben noch die wenigsten Websites, auch meine nicht, daher habe ich eine eigene mobile Website, die für Smartphones erstellt wurde.

Von links nach rechts können Sie in der Iconleiste Desktop-Bildschirme verschiedener Größen (wenn Sie auf das Icon klicken, öffnet sich ein Untermenü), unterschiedliche Tablet-Größen, Smartphones und sogar Fernsehbildschirme durchtesten.

Um die Website auf dem simulierten Bildschirm auch scrollen zu können, setzen Sie ganz unten links bei Allow Scrolling ein Häkchen.

Weiterlesen  Mobile Marketing: Mittlerweile Pflicht für Unternehmen

Sie können die Bildschirmansicht auch drehen wie das ja bei Tablets und Smartphones üblich ist mit dem Button Rotate Display unten rechts. Das waren eigentlich schon die ganzen Funktionen von Screenfly.

Screenfly Ansicht

Es soll allerdings noch angemerkt werden, dass Screenfly nicht bei allen Websites-Tests funktioniert, da manche Seiten sich nicht framen oder sich nicht über einen Proxy-Server aufrufen lassen.

Falls dies bei einer zu testenden Website der Fall sein sollte, sollte man auf ein anderes Tool zurückgreifen. Wie eigentlich alle Tools kann Screenfly nicht das Verhalten der mobilen Endgeräte simulieren wie beispielsweise das Zoom-Feature und alle anderen Funktionen.

Sie können mit diesen Tools nur die Darstellung der Website auf den jeweiligen Endgeräten testen, mehr nicht.