Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 02): Testen der Apps

Web-Apps erstellen (Teil 02): Testen der Apps

Bei der normalen Web-Entwicklung ist das Testen von Webseiten denkbar einfach. Kein Wunder, schließlich braucht man die Seiten ja „nur“ in den verschiedenen Browsern aufzurufen. Bei den Web-Apps sieht das erfahrungsgemäß etwas anders aus. Denn natürlich hat nicht jeder immer gleich die neuesten iPhones, iPads oder eines der zahlreichen Android-Geräte parat. Dennoch ist ein Test der Apps natürlich Pflicht, bevor man sie auf die Allgemeinheit loslässt. Grund genug, in diesem Video-Training einen detaillierten Blick darauf zu werfen, wie sich die Apps testen lassen.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Wenn ihr Web-Apps erstellt, solltet ihr diese unbedingt vor der Veröffentlichung testen. Das ist bei den Apps allerdings nicht ganz so einfach wie bei klassischen Webseiten. Denn um normale Webseiten zu testen, installiert man sich für gewöhnlich die wichtigsten Browser parallel auf seinem System und kann sich so die Webseiten unter verschiedenen Bedingungen ansehen. Hat man dann auch noch parallel zu einem Windows-PC einen Macintosh-Rechner parat, lassen sich wirklich aussagekräftige Tests durchführen.

Bilder



Ganz anders stellt sich das bei einer Web-App dar. Denn dabei spielen unterschiedliche Kriterien eine Rolle. Hier eine kleine Auswahl:

• Welche Größe hat das Display?
• Wie hoch sind die Ladezeiten?
• Reicht der Kontrast, damit die Inhalte lesbar sind?
• Welches Betriebssystem wird verwendet?
• Welcher Browser läuft auf dem System?

Und dann kommt natürlich noch ein ganz entscheidender Faktor hinzu. Denn wer sich einmal auf dem Smartphone-Markt umsieht, wird feststellen, dass es dort eine riesige Auswahl an Endgeräten gibt. Selbst wenn man wollte, könnte man seine App nicht auf all diesen Geräten testen.

Was kann man also machen? Am Anfang steht natürlich immer der Selbsttest. Ihr ruft die App also mit eurem eigenen Smartphone auf. Das sollte schon mal einen ersten Eindruck darüber verschaffen, ob es sich überhaupt lohnt, die App auch noch auf anderen Geräten zu testen.


Testen für das iPhone

Für das iPhone gibt es mehrere Tools, die beim Testen helfen. Eine Simulation des iPhones findet ihr zum Beispiel auf der Seite http://interactiveiphone.com/. Diese Anwendung simuliert das iPhone recht gut und ist somit durchaus für Schnelltests geeignet. Allerdings hat das Tool auch seine Schwächen. So kann man mit ihm beispielsweise nicht das Drehen der Webseite simulieren.

Unter http://ipadpeek.com/ werden iPad und das iPhone in den Varianten 4 und 5 unterstützt.

Bilder



Und hier sind dann auch Drehungen möglich.


 

Android & Co. nicht vergessen

Natürlich gibt es nicht nur iOS-Geräte. Auch Android sollte beim Testen berücksichtigt werden. Dafür gibt es ebenfalls ganz unterschiedliche Tools. Zunächst einmal wäre da die Webseite http://www.responsinator.com/.

Bilder



 
Hier müsst ihr die Endgeräte nicht explizit auswählen. Stattdessen gibt man einmalig die Adresse der zu testenden Seite an. Daraufhin wird die Darstellung der Seite auf den unterschiedlichsten Geräten simuliert. Dazu gehören dann u.a. das iPhone 3, 4 und 5 sowie verschiedene Android-Geräte und der Kindle. Für die Geräte werden jeweils auch Hoch- und Querformat berücksichtigt.

Sehr gut gelöst ist auch der ResponsiveTest unter http://responsivetest.net/. Nachdem man die URL eingetragen hat, kann man aus einem Drop-down-Menü die entsprechenden Devices auswählen.

Bilder



Und hier ist die Palette der verfügbaren Geräte wirklich riesig. So stehen diverse Smartphones, Tablets, Laptops und Desktop-Rechner zur Auswahl. Zudem lassen sich durch eigens angegebene Pixelwerte personalisierte Tests durchführen.

Das Demonstrating Responsive Design ist ein Online-Tool, bei dem man ebenfalls zunächst die URL der zu überprüfenden Webseite eingibt. Anschließend kann man zwischen fünf verschiedenen Größenvarianten wählen.


 

Der Multi-Browser-Viewer

Wer anstelle eines Online-Tools lieber „echte“ Software verwendet, sollte unbedingt auch einmal einen Blick auf den Multi-Browser-Viewer werfen. Der Multi-Browser-Viewer ermöglicht das Testen von Webseiten in zahlreichen Browsern. Als echte Standalone-Browser stehen die folgenden für Testzwecke zur Verfügung:

• Firefox 2 bis 21
• Google Chrome 2 bis 27
• Opera 9.64 bis 12.14
• Internet Explorer 6 bis 10
• Avant 11.7
• Maxthon 2.5
• Safari 3.2, 4 und 5
• Seamonkey 2
• Flock 2.5

Aus Sicht mobiler Webentwicklung sind aber natürlich vor allem die integrierten Mobile-Anwendungen interessant. Zum aktuellen Zeitpunkt sind das diese hier:

• iPhone Mobile Safari Browser für Windows
• Blackberry Storm2 Browser Emulator
• Windows Mobile 6.5 Browser Emulator
• Google Android 2.1, 2.3.3, 3.2, 4.03, 4.1 & 4.21
• Opera Mobile 12
• Firefox Mobile (Fennec) 4 & 10
• iPad Mobile Safari Browser für Windows Simulator

Eine vollständige Übersicht der unterstützten Browser findet ihr unter http://www.multibrowserviewer.com/features-browsers.asp.

Hiermit werden die wichtigsten Browser, die es momentan für den mobilen Markt gibt, abgedeckt. (Wenngleich man sich aber ohnehin von der Annahme verabschieden muss, seine Webseiten auf alle Eventualitäten hin überprüfen zu können. Dafür ist der Smartphone- und Handy-Markt schlichtweg zu groß).

Zusätzlich dazu werden noch zahlreiche andere Browser angeboten. Diese stehen allerdings nicht direkt zur Verfügung. Vielmehr legt der Multi-Browser-Viewer Screenshots der Seiten an, wie sie in diesen Browsern aussehen würden.

Ihr könnt den Multi-Browser-Viewer zunächst kostenlos testen. Nach Ablauf der Testphase kostet die Ein-Benutzer-Lizenz knapp 140 US-Dollar. Dabei darf natürlich nicht verschwiegen werden, dass man damit tatsächlich ein Rundum-Paket zum Testen von Webseiten bekommt. Ein Test lohnt also allemal.


Die Geschwindigkeit der Seite messen

Bei Web-Apps spielt natürlich auch die Ladegeschwindigkeit eine Rolle. Denn nur eine App, die schnell geladen wird, kann sich auf Dauer durchsetzen. Also solltet ihr eure Apps auch dahingehend untersuchen. Für einen ersten Schnelltest sind Web-Dienste eine gute Wahl. Einer davon wird direkt von Google unter https://developers.google.com/pagespeed/ kostenlos angeboten. Auf der genannten Seite muss die Adresse der zu überprüfenden Seite angegeben werden.

Bilder



 
Nach erfolgreicher Analyse ist vor allem der linke Fensterbereich entscheidend. Denn dort sind die möglichen Maßnahmen und deren jeweiliges Einsparpotenzial zu sehen. Unterteilt ist der linke Fensterbereich nach der Priorität (rot, gelb, grün) der vorgeschlagenen Maßnahmen.

Bilder



Innerhalb der einzelnen Bereiche sind die Vorschläge zur Optimierung zu finden. Arbeitet zunächst die als rot gekennzeichneten Punkte ab.

 
Es wird übrigens auch ein direkter Mobil-Test angeboten.

Bilder



Nicht verlassen sollte man sich auf das kleine Vorschaubild der eigenen Seite im Mobile-Stil. Dieses verschafft zwar einen ersten Eindruck davon, wie die Seite letztendlich aussieht, wirklich zuverlässig ist das aber nicht.

Auf der Übersichtsseite könnt ihr euch über den sogenannten Gesamt-PageSpeed Score der Seite informieren. Über den lässt sich ablesen, wie schnell die Seite eigentlich sein könnte. Je niedriger der Score, umso mehr Verbesserungen sind möglich/nötig. Mit jeder Optimierung, die man durchführt, steigt der Score bzw. sollte er steigen.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.10.2016 - 14:55

Vielen Dank für das Tutorial

Portrait von alesiste
  • 04.11.2014 - 15:57

Danke schön! Ich konnte wieder viel lernen.

Portrait von Kundentest
  • 14.06.2014 - 17:30

Herzlichen Dank für das Video.

Portrait von Kundentest
  • 14.06.2014 - 17:29

Herzlichen Dank für das Tutorial.

Portrait von Steve007
  • 14.06.2014 - 11:55

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von MicroSmurf
  • 03.06.2014 - 19:13

Danke für die Textversion

Portrait von BOPsWelt
  • 01.06.2014 - 17:21

Vielen Dank für den zweiten Teil. :)

Portrait von frankeit
  • 01.06.2014 - 16:08

Vielen Dank für das Tutorial. Die Links sind sehr hilfreich.

Portrait von johen
  • 01.06.2014 - 15:23

Vielen Dank für die Textversion der Reihe. ;-)

Portrait von Domingo
  • 01.06.2014 - 13:41

Hilfreich und informativ-

Portrait von Caesarion2004
  • 01.06.2014 - 13:04

Vielen Dank für das weitere informative Textttutorial.

Portrait von Steve007
  • 24.04.2014 - 15:07

Vielen Dank für diesen weiteren Teil Deines Video-Trainings.

Portrait von MicroSmurf
  • 21.04.2014 - 13:44

Vielen Dank für das Video.

Portrait von Uwe367
  • 21.04.2014 - 12:17

Auch hier besten Dank :)

Portrait von fneurieser
  • 21.04.2014 - 12:09

Wirklich interessant. Selbst ist man ja leider oft zu träge um nach geeigneten Testtools zu suchen und so werden sie einem fast schon auf dem Silbertablett serviert.

Portrait von Caesarion2004
  • 21.04.2014 - 10:07

Vielen Dank für das interessante Video.

Portrait von silverburst
  • 21.04.2014 - 09:55

Danke für den Beitrag. Super ist es auch, wenn man ein Open Device Lap vor der Ort hat, wo man sein Werk auf verschiedenen Endgeräten testen kann.

x
×
×