Mit Firefox das responsive Design testen

Responsive Design – das ist der aktuelle Heilige Gral im Webdesign.

Wer Webseiten erstellt, sollte auch immer im Blick behalten, wie diese Seiten auf einem mobilen Gerät (Smartphone, Tablet, Handy …) dargestellt werden. Dazu gibt es inzwischen eine ganze Handvoll von Online-Diensten, die einem da behilflich sind.

Die funktionieren meistens so: man gibt den URL der zu testenden Webseite ein und diese Dienste spucken Darstellungen der gängigsten Formate aus. Mit Ausnahmen kann man so nur Webseiten testen, die schon online sind. Lokale Entwicklungen sind oftmals ausgenommen.

In der WordPress Berlin Gruppe bin ich neulich auf eine Funktion im Firefox Browser aufmerksam gemacht worden, die das (rudimentär) auch bietet. Die Funktion heisst im Original Firefox responsive Design View und ist Teil der Webdeveloper Tools.
Ihr erreicht diese Funktion über Extras -> Web-Entwickler -> Bildschirmgrößen testen. Noch schneller geht es mit der Tastenkombination Strg + Umschalt + M.

responsive Design Test Firefox

responsive Design

Die gerade aktuelle Webseite im Browser wird dann verkleinert dargestellt (siehe Screenshot).
Dadurch dass sie direkt aus dem Firefox heraus aufgerufen wird, erspart man sich das Eintippen von URLs und auch der Test lokal gespeicherter Seiten funktioniert. Es wird immer nur eine Auflösung angezeigt. Mittels der Auswahlliste kann man die Darstellungsgröße wechseln oder auch individuelle Abmessungen festlegen. Dazu an den seitlichen Anfassern der Box ziehen, bis die gewünschte Abmessung erreicht ist und in der Auswahlliste ganz unten die Option „Vorlage hinzufügen“ auswählen. Es ist leider nicht möglich, die Zielgröße einzutippen, aber beim Größer- oder Kleinerziehen der Box laufen die Pixelmaße mit.

Für den Wechsel zwischen Hoch- und Querformat gibt es einen Umschalter. Auch ein Touch-Verhalten lässt sich durch einen Button simulieren.

Die integrierte Responsive Design Test Funktion des Firefox bietet eine schnelle Hilfe, wenn man sein Layout auf ein responsive Verhalten testen will. Ausgiebige Tests auf echten Geräten bleiben einem dennoch nicht erspart – eine Simulation (denn um nichts anderes handelt es sich hierbei) wird nie zu 100% das reale Verhalten abdecken.

Ein Kommentar:

  1. Danke fuer den tollen Tip!

    Eselsbruecke (fuer mich zumindest): M = mobile…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.