Simulation mobiler Geräte für responsive Webdesign

Wenn man eine Website auf responsive Design umstellt, dann benötigt man gewisse Hilfsmittel, damit man die Einstellungen auf mobilen Geräten testen kann. Die beste Möglichkeit ist natürlich, dass man die Website auf echten Geräten testet. Allerdings ist die Vielfalt so groß, dass es kaum möglich ist, alle Gerätetypen auf der Welt zu kaufen, um die Website zu testen. Es gibt jedoch Mittel und Wege, um entweder die Website auf zumindest vielen Geräten zu testen oder die Browsereinstellungen so zu setzen, dass die Geräte möglichst realitätsnah simuliert werden. Nachfolgend werden vier machbare Lösungen beschrieben.

• Gerätepark ausleihen
• Browserfenster verkleinern
• Ansicht zum Untersuchen der Elemente einschalten
• Geräte im Browser simulieren

Gerätepark ausleihen

Viele Internetagenturen haben mittlerweile einen riesigen Park an Geräten, die sie gegen ein gewisses Entgelt ausleihen. Die Lieferung erfolgt entweder per Versand oder man kann die Geräte auch persönlich abholen. Hierbei sollte neben anderen vertraglichen Bestimmungen vor allem der Fall geklärt werden, dass bei einem Gerät immer ein Defekt auftreten kann und nicht mehr funktioniert. Auch sollte man darauf achten, dass man vor der Rückgabe alle Daten auf den verwendeten Geräten löscht, die man eingegeben hat. Ein einfacher Weg hierfür ist ein Reset auf die Werkseinstellungen. Sensible Daten wie z.B. Benutzernamen oder Passwörter sollte man generell nicht eingeben.

Browserfenster verkleinern

Eine einfache Möglichkeit, um gewisse Gerätebreiten oder -höhen zu simulieren, ist die Veränderung der Fenstergröße vom Browser. Hierbei verkleinert man z.B. die Fensterbreite auf 320 Pixel und sieht die Website so, wie man es auf einem 320 Pixel breiten Smartphone sehen würde. Hierbei sollte man die Website trotzdem auf zumindest ein paar echten Geräten testen, da die Ansicht im Browser nicht immer dem entspricht, was man auf echten Geräten zu sehen bekommt. Meistens treten beim Rendering einer Webseite kleine Abweichungen auf, die bei einer ungünstigen Konstellation trotzdem eine große Wirkung haben können. Um zumindest die Basiseinstellungen festzulegen, reicht das Verkleinern des Browserfensters jedoch meistens aus.

Das gilt jedoch nur für den Fall, dass man die CSS-Stile nicht von den Geräteeinstellungen (z.B. min-device-width:) abhängig macht, sondern vom sichtbaren Bereich des Browserfensters (z.B. min-width). Macht man die Stile von den Geräteeinstellungen abhängig, hat das keinen Effekt, wenn man das Browserfenster verkleinert, da man dadurch nicht die Geräteeinstellungen ändert.

Bei manchen Browsern ist es nicht möglich, das Fenster beliebig zu verkleinern. In solchen Fällen hilft es, die Ansicht zum Untersuchen der Elemente einzuschalten. Hierbei wird beim Betrachten der Website mit der rechten Maustaste in einen freien Bereich innerhalb des Browserfensters geklickt und aus dem Kontextmenü der Punkt "Element untersuchen" (oder ähnlich) ausgewählt. Daraufhin wird ein Bereich eingeblendet, in dem man das Element untersuchen kann und das meistens auf der rechten Seite platziert ist. Danach kann der sichtbare Bereich über den Rahmen verkleinert werden und hierbei gibt es in der Regel keine Beschränkungen bezüglich der Größe.

Eine sehr schöne Möglichkeit, verschiedene Geräte direkt im Browser zu simulieren, ist in vielen Browsern implementiert. Hierfür schaltet man zunächst die Ansicht "Elemente untersuchen" ein. Danach kann über die entsprechende Schaltfläche die Simulation eingeschaltet werden. Je nach Browser stehen verschiedene Optionen zur Verfügung. Nachfolgend die Abbildungen für Firefox, Chrome, Opera und Internet Explorer.

Simulation in Firefox einschalten

In Firefox 38.0.1 wird die Simulation über die Schaltfläche "Bildschirmgrößen testen" eingeschaltet.

In Chrome 42.0 wird die Simulation über die Schaltfläche "Toggle device mode" eingeschaltet.

In Opera 29.0 heißt die Schaltfläche ebenfalls "Toggle device mode" und die Ansicht ist fast identisch wie beim Chrome.

Im Internet Explorer 11 wird die Simulation über die Schaltfläche "Emulation" eingeschaltet.