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.