“If you're serious about responsive, there's no way around working with real devices.” (Quelle: Vancom)

Um unseren Kunden hochwertige Webseiten und erstklassige Designs anbieten zu können haben wir nun auch bei TechDivision aufgerüstet. Der Erfolg und das positive Feedback unserer Kunden rechtfertigen die Investitionen in die vielseitigen Mobile-Labs.

Immer mehr unserer Kunden fordern eine optimale Darstellung und konsistente Usability und User Experience ihrer Website bzw. ihres Shops auf mobilen Endgeräten. Um Webprojekte aber wirklich professionell responsive umsetzen zu können, ist vermehrtes Testing mit verschiedenen Endgeräten unumgänglich. Aus diesem Grund haben wir uns entschieden ein eigenes Device Lab sowie die Software „Ghostlab“ anzuschaffen. Das synchronisierte Testing stellt dabei einen effizienten Weg dar, um automatisch identische Handlungen auf verschiedenen Endgeräten durchzuführen.

Ghostlab – ein Traum für Entwickler

Mit Ghostlab, einem Tool für Mac, haben wir die Möglichkeit unsere Webprojekte auf mehreren Geräten gleichzeitig zu öffnen und parallel zu testen. Dabei werden sämtliche Eingaben – Scrollen, Klicken, Reloaden, Formular-Eingaben, etc. – sofort ausgeführt. Ghostlab dient dabei als Proxyserver, über den die Inhalte geliefert und im Clientbrowser gesteuert werden. Mit dem eingebauten Code-Inspector können Entwickler-Tools der jeweiligen Clients und Browser zur Code-Analyse hinzugeschaltet werden. Für Ghostlab stehen uns aktuell 5 Lizenzen zur Verfügung, die natürlich jederzeit erweitert werden können.

Auswahl der Geräte im Device Lab

Das TechDivision-Device Lab umfasst derzeit 12 Geräte – sechs Smartphones und sechs Tablets. Grundsätzlich ist der Markt von Smartphones und Tablets natürlich sehr stark fragmentiert und nicht mit Desktop zu vergleichen.

Um ein möglichst umfassendes Testing zu ermöglichen, haben wir bei der Auswahl der Geräte folgende Aspekte berücksichtigt:

• Verkaufszahlen bzw. allg. Verbreitung im Markt
• Mischung aus alten und modernen Geräten
• Verschiedene Displaygrößen
• Verschiedene Bildschirmauflösungen
• Verbreitung von Betriebssystemen und Versionen
• Unterschiedliche Browser und Versionen

Best Practice: Erfahrungen mit dem Device Lab und Ghostlab

Device Lab sowie Ghostlab sind derzeit in einigen TechDivision-Projekten im Einsatz, u.a. in einem internationalen Web-Portal. Die Feedbacks der Entwicklungsteams sind dabei durchweg positiv. Auch Kunden wurde das Device Lab vorgestellt und erklärt, wie die Onlinepräsenzen ihrer Webseiten für die verschiedenen Devices optimiert werden können und worauf es dabei ankommt. Unsere Device-Labs kommen dabei auch bei Kunden sehr gut an, da die Media-Labs die Optimierung der Webprojekte auf Mobile noch greifbarer und anschaulicher werden lassen.

Alternativen zu Ghostlab und Co.

Die Möglichkeiten, Webseiten zu checken, sind vielseitig. Nachfolgend sollen einige davon kurz vorgestellt werden:

• Neben den oft teueren und unzähligen Clients zum Testen kann auch auf Cloud-Dienste zurückgegriffen werden. Ein Nachteil ist jedoch, dass die Dienste auf Virtual Machines und Simulatoren basieren, welche die User-Experience mit dem jeweiligen Gerät nur geringfügig beurteilen lässt. Solche Dienste sind beipielsweise BrowserStack oder Crossbrowsertesting.com. Zur Überprüfung von JavaScript-Bugs und Stylesheets sind die Dienste jedoch eine preiswerte Alternative.
  
  
• Simulatoren und Emulatorenbieten ebenfalls eine tolle Möglichkeit, Webseiten hinsichtlich ihres responsive Designs zu testen. Emulatoren ahmen neben dem Verhalten des jeweiligen Gerätes auch die Software des Geräts nach. Mittlerweile werden in diesem Zusammenhang unterschiedliche Möglichkeiten angeboten. Nachfolgend werden drei – aus unserer Sicht wichtige – Simulatoren und Emulatoren vorgestellt. iOS-Simulator: Dieser ist vor allem für Mac-Nutzer gedacht. Er kann alle mobilen Apple-Geräte eins zu eins simulieren und über den App-Store kostenlos bezogen werden. Der Simulator ist Bestandteil von XCode und kann nicht einzeln herunter geladen werden Android-Simulator:Ein ähnliches Tool bietet Google mit AndroidSDK. Nach Download des Simulators kann ein Gerät nach den eigenen Vorstellungen konfiguriert und gestartet werden. Opera-Mini-Simulator: Auch Opera bietet die Möglichkeit auf Java-Basis zum Testen von Webseiten auf Kompatibilität an.

• So ziemlich alle modernen Browser werden mit nützlichen Browser-Developer-Tools standardmäßig ausgeliefert, die genaue Informationen zu einer Webseite liefern können. So können beispielsweise das DOM analysiert und live verändert werden oder auch Informationen zu JavaScript abgerufen werden.
  
  
• Für das schnelle Checken von Webseiten, wie diese beim Skalieren des Browserfensters reagieren, gibt es eine Reihe von Tools, die Entwickler dabei unterstützen können. Eines davon ist der Viewport-Resizer. Das Tool ermöglicht es mit nur einem Klick den Viewport auf die richtige Größe zu bringen. Alternativen dazu sind beispielsweise das Responsive-Design-Bookmarklet oder der Resizer von codebomber.com.
  
  
• Bei der Nutzung von Entwickler-Tools in Desktop-Browsern ist es mittlerweile zur Gewohnheit geworden eine Webseite mit Rechtsklick und „Element untersuchen“ oder „Element-Eigenschaften“ hinsichtlich ihrer DOM-Elemente schnell unter die Lupe zu nehmen. Beim Testen von Smartphones oder Tablets ist diese Bequemlichkeit leider nicht gegeben. Die Lösung: Remote Debugging Funktionen, die an den Browser anknüpfen. So können mobile Geräte vom Browser aus analysiert werden. Beispiele hierfür sind Safari und Mobile Safari sowie Chrome und Android.
  
  
• Um das Rendering einer Seite schnell prüfen zu können, bieten sich auch Screenshots an. In diesem Zusammenhang ermöglichen beispielsweise BrowserStack oder Crossbrowsertesting.com, Website-Screenshots auf unterschiedlichen Browsern zu generieren.

Entwicklungen und Trends von Smartphones und Tablets – ein Überblick

Info zu Marktanteilen (Mai-Juli 2013) von Smartphones in D. (Quelle: Kantar Worldpanel)

• Android: 76,8 %
• iOS: 11.2 %
• Windows Phones: Marktant. 8,8 % (aufgrund der Koop. mit Nokia sehr stark im Kommen)

Info zu Marktanteilen (Q2 2013) von Tablets (worldwide) (Quelle: Canalys 2013)
Android: 53 %

• Marktanteile unter den iOS-Geräten (47 %):
• Das iPad mini: 20,4%
• iPad 4: 22,0%
• iPad 3 17,8%
• iPad 2 38,6%
• iPad Air noch sehr neu, aber sehr hohe Verkaufszahlen

Weitere informative Artikel von TechDivision, die Sie in diesem Zusammenhang interessieren könnten:

• Trends im E-Commerce: Multiscreen auf dem Vormarsch
• Aus E-Commerce wird Everywhere Commerce
• Internetnutzung in Deutschland 2013

Fazit

Die Device Labs erleichtern es unseren Entwicklern um ein Vielfaches Projekte effektiver im Responsive Design umzusetzen und Webseiten zu optimieren. Doch nicht nur bei unseren Entwicklern kommt das innovative Verfahren gut an – auch unsere Kunden sind von der professionellen Arbeit begeistert und von den Entwicklungs-Ergebnissen mehr als überzeugt. Die Anschaffungen sind natürlich auch eine Kostenfrage – die Investition lohnt sich auf lange Sicht jedoch mit Sicherheit. Simulatoren oder Dienste wie Browserstack sind jedoch auch eine gute und billigere Alternative. Bei der Nutzung vieler Testgeräte oder Virtual Machines lohnt sich jedoch auf jeden Fall Ghostlab, das die Arbeit für Entwickler sicherlich vereinfacht. Ein „Richtig“ oder „Falsch“ gibt es bei den Testing-Möglichkeiten nicht. Unterm Strich ist es wichtig eine effektive Arbeitsweise zu erreichen und Webseiten bestmöglich für unterschiedliche Nutzungsarten zu optimieren.