Impressum / Datenschutz
Alexander Legge

Testen bis die Maus qualmt: So holen Sie das beste aus Ihrem responsive Design raus

Alexander Legge | 31.03.2015 | Responsive Design, Usability

Mobile BrowserGerade als die meisten Webdesigner dachten, sie hätten die größten Kinderkrankheiten des Internet Explorers und die Zersplitterungen im Browsermarkt überstanden, begann das mobile Internet seinen Siegeszug. Seitdem ist für Webdesigner alles noch schlimmer geworden, könnte man meinen.

Denn längst kann der Webdesigner nicht mehr mit der durchschnittlichen Bildschirmgröße von 1024*768 rechnen. Gerade in Zeiten in denen das Internet nahezu jedem Gerät zur Verfügung steht, gibt es eine große Fragmentierung der Bildschirmgrößen. 

Das bringt vor allem im Bereich des Testings große Herausforderungen mit sich. Die Konsequenz kann schwerlich sein, dass jeder Shopbetreiber alle möglichen Smartphones und Tablets zum Testen der eigenen Webseite vorhält.

Responsive Design mit Google Chrome testen

Plugins für Ihren Browser können dort weiterhelfen. Der Chrome Browser von Google bringt hier von Haus aus bereits ein nettes Feature mit: Den Chrome Mobile Inspektor. Mit diesem können Sie neben den üblichen Standardbrowsern von mobilen Endgeräten sogar Übertragungsraten der gängigen Mobilfunknetze simulieren. Nutzen Sie dieses Feature auf jeden Fall um sich einen Eindruck von der Performance ihrer Website zu machen. 

Der mobile Inspector von Google Chrome

Aktiveren Sie einfach die Web-Enwickler-Leiste durch die Taste „F12“ und klicken auf das kleine Handy-Icon oben links. Schon ändert sich die Ansicht ihres Browsers und Sie können gängige Smartphone-Größen und Verbindungsgeschwindigkeiten simulieren.

Bei allen Vorteilen des Mobile Inspektors muss allerdings auch festgehalten werden: Der Chrome kann das Verhalten der Smartphones und Tablets nur nachstellen. Wirklich sichere Testergebnisse erhalten Sie nur mit einem tatsächlichen Gerät. Allerdings kann Ihnen der Mobile Inspector helfen frühzeitig Schwachstellen in ihrem Design und Konzept aufzudecken. 

Boardmittel zum Testen von responsive Design im Firefox

Auch der Firefox bietet bereits ein rudimentäres Werkzeug zum Testen von unterschiedlichen Bildschirmgrößen. Die Ansicht „Bildschirmgrößen testen“ kann über den Menüeintrag „Extras > Web-Entwickler > Bildschirmgrößen testen“ aktiviert werden. Anschließend kann man Standard-Bildschirmgrößen in einem kleinen Menü auswählen. Im Gegensatz zum Chrome ist es hier nicht möglich direkt gängige Smartphones und Tables auszuwählen. Leider ist es auch nicht möglich Verbindungsgeschwindigkeiten in Edge-, 3G- oder LTE-Netzen zu simulieren.

Bildschirmgrößen testen im Firefox-Browser

Web-Apps zum Testen von responsive Design

Mittlerweile sind auch eine ganze Reihe von Web-Apps verfügbar, die helfen sollen responsive Design zu testen. Während aber vor allem auch der Mobile Inspector von Google Chrome Touch-Events simulieren und sich als mobiler Browser der Website gegenüber ausweisen kann, machen diese Websites häufig nichts anderes als einfach einen kleineren Anzeigebereich für die Website bereit zu stellen. Die Testing-Ergebnisse dieser Tools sind daher mit großer Vorsicht zu genießen. 

Crowdtesting für responsive Design nutzen?

Vielleicht haben Sie bereits von Crowdtesting gehört. Beim Crowdtesting geben Sie Tests an Anbieter wie Applause oder Testbirds weiter, die einen großen Pool an Testen mit unterschiedlichsten Endgeräten zur Verfügung haben. Diese testen von Rechtschreibung bis zu Usability und Prozessen alles, was Sie der Test-Community auftragen. Allerdings sollten Sie ein Budget einplanen, wenn Sie diese Angebote in Anspruch nehmen wollen.

Für ein erstes Testing von responsive Design würde ich immer zunächst den Mobile Inspektor von Google Chriome einsetzen. Besser ist es natürlich tatsächlichen Zugriff auf Test-Smartphones zu haben, denn wie eingangs erwähnt kann man sich nur so ein wirkliches Urteil über die Funktionsweise erlauben. Für viele Shopbetreiber dürfte sich es hierbei allerdings auch um eine Kostenfrage handeln.

3 Reaktionen zu “Testen bis die Maus qualmt: So holen Sie das beste aus Ihrem responsive Design raus”

  1. Onlineshop Agentur | Christoph

    Hallo,
    die Plugins eignen sich wirklich gut für das erste Testing bzw. Überprüfen der Entwicklung. Aber mir ist bislang noch kein Plugin untergekommen, dass die physische Hardware vollkommen setzen kann.

    Aber muss der Prämisse aus dem ersten Abschnitt widersprechen: vonwegen alles schwieriger geworden. Dadurch, dass momentan die mobile Nutzung im Trend liegt müssen die Entwickler richtige Arbeit leisten (nachhaltige Arbeit leisten) und wenn das Geschehen ist, ist die Website auch für zukünftige Trends gewappnet (Stichwort RWD).

    Den letzten Satz mit dem „Für viele Shopbetreiber dürfte sich es hierbei allerdings auch um eine Kostenfrage handeln.“ habe ich ehrlich gesagt nicht verstanden. Denn bei einer Entwicklung wird ja getestet und spezifiziert, was der Onlineshop kann und was nicht. Da sollte es also eigentlich keine Überraschungen geben. Bei Entwicklungen sind die Entwickler zuständig für das Testen des Shops und nicht der Kunde. Klar, dass er am Ende es bezahlt, aber das ein Produkt ausgeliefert wird ohne zu Testen, kann ich mir nicht vorstellen.

    Viele Grüße
    Christoph

  2. Alexander Legge

    @Onlineshop Agentur: Bezüglich der physischen Hardware gebe ich Ihnen vollkommen recht.

    Ich denke schon, dass durch RWD wieder neue Stolpersteine aufgetaucht sind und es wieder neue Eigenheiten von Browsern gibt.

    Mein letzter Absatz bezog sich primär auf Shopbetreiber die sich selbst um ihr Template kümmern (weil sie es können und gerne basteln – auch von diesen gibt es viele). Sobald eine Agentur im Boot ist, gebe ich Ihnen wiederum recht: Die Agentur ist für’s testen verantwortlich. Auch hier gilt natürlich: Besonders kleine Agenturen haben sicherlich nicht alle denkbaren Endgeräte zum Testen zur Verfügung.

    Viele Grüße,
    Alexander Legge

  3. Responsive Layouts testen | joachimott journal

    […] Beitrag auf shopbetreiber-blog.de nennt weitere Möglichkeiten, zum Beispiel mit dem Browser Chrome und diverse […]

Einen Kommentar schreiben




1 von 11

Archiv

  • Juli 2016
  • Juni 2016
  • Mai 2016
  • April 2016
  • März 2016
  • Februar 2016
  • Januar 2016
  • Dezember 2015
  • © 2011 Trusted Shops GmbH | Powered by WordPress