Vorab: dieser Artikel ist aus der Perspektive seines Themas – uralt. Heutzutage testet man die responsive Ansicht einfach in den Webdeveloper Tools des jeweiligen Browsers. Mit diversene Simulationen von Mobilgeräten. Aber wer die Freude an einem neuentdeckten Feature nachempfinden möchte, bitte sehr:
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.
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.
Danke fuer den tollen Tip!
Eselsbruecke (fuer mich zumindest): M = mobile…