Websites und Onlineshops im Responsive Design: Mit dem Media-Lab alle Geräte im Überblick

Webseiten müssen für immer mehr Geräte und Browser angepasst werden. Die Lösung: Die Einführung von Media-Labs, die das Cross-Browser Testing und das Mobile Testing ermöglichen. Auch bei TechDivision haben wir erfolgreich Media-Labs eingeführt, mit denen wir Webseiten professionell im Responsive Design umsetzen und Corporate Websites optimieren können. Mit den Media-Labs haben wir so bei der Entwicklung die gängigen Geräte hinsichtlich Responsive Design und Website-Optimierung im Überblick.

“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.


Mobile-Lab bei TechDivision


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.


Device Lab – Optimierung von Webseiten / Responsive Design


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:

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.

Neueste Posts

360 Stories – ein Spiel für Teams Die B2B E-Commerce Pyramide
Digital Storytelling - ein Kurztrip in die Kreativität und wieder zurück
TechDivision veröffentlicht Magento 2 Schnittstelle für pixi* TechDivision wird von Focus Business als „TOP Arbeitgeber Mittelstand 2018“ ausgezeichnet

Archiv

Dezember November Oktober September August Juli Juni Mai April März Februar Januar
Dezember November Oktober September August Juni Mai April Februar Januar
Dezember November Oktober September August Juli Juni März Februar
Oktober September August Juli Juni Mai April März Januar
Dezember November Oktober September August Juli Mai April Februar
November Oktober September April Februar
Dezember September Juni Mai Februar Januar
Juli Mai April März Februar Januar
September August Juli März
Oktober September Juli Juni Mai März Februar
Februar

Kategorien

E-Commerce Unternehmensmeldung Online-Marketing Magento Commerce Neos TYPO3 SEO SEA Usability Digitale Transformation Agile Projektentwicklung Corporate Web Analytics Künstliche Intelligenz Mobile Marketing Social Media Veranstaltungen Research & Development

Unser Herz schlägt online -
Deins Auch?


Wir stellen uns jeden Tag neuen Heraus-forderungen des Online-Business – immer auf der Suche nach spannenden Lösungs-ansätzen und sinnvollen Technologien. Eine Vielzahl namhafter Kunden vertrauen auf das Online Know-how „Made in Kolbermoor / Rosenheim und München“. 

Lust auf TechDivision? Hier geht zu unseren Stellenanzeigen

eStrategy Magazin


Erfahren Sie mehr zu den Themen E-Commerce, Online-Marketing, Mobile, Projektmanagement, Webentwicklung und E-Recht in unserem kostenlosen Online-Magazin.

Jetzt herunterladen!

Whitepaper:
Agiles Projektmanagement


In unserem kostenlosen Whitepaper versuchen wir Basiswissen und Erfahrungen aus vielen Jahren täglicher Projekt- und Unternehmenspraxis zu vermitteln, mit denen Sie die Anforderungen des Arbeitslebens von Heute besser bewältigen können.

Jetzt herunterladen!

Autor

Haben wir Ihr Interesse mit unserem Blog geweckt?

Wir sind der richtige Partner für anspruchsvolle Projekte im Bereich E-Commerce, Corporate Web, Consulting und Online-Marketing. Sprechen Sie mit uns!

Autor

Josef Willkommer Geschäftsführer / CMO