Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Wie wir Responsive Webdesign mit Polypane testen

Der Chromium-basierte Webbrowser Polypane wurde speziell für die Webentwicklung konzipiert und stellt eine Vielzahl von Tools zur Verfügung, die bei Umsetzung und Debugging von Websites hilfreich sind. Wir beschreiben euch, wie wir Polypane verwenden, um während der Entwicklung von Webauftritten die fehlerfreie responsive Umsetzung zu gewährleisten.

RWD-Features in Polypane

Die Idee responsiven Webdesigns (RWD) ist die Gewährleistung von einwandfreier Darstellung und Funktionalität einer Website, unabhängig vom Gerät, mit dem darauf zugegriffen wird. Dabei spielen neben dem Viewport (Größe des Browsers) auch andere Geräteeigenschaften eine bedeutende Rolle. So machen bspw. die Benutzung eines Touch-Geräts oder die Dark-Mode-Einstellung einen bedeutsamen Unterschied für die Benutzbarkeit und Darstellung einer Website.

Die wesentliche und namengebende Funktionalität von Polypane ist es, mehrere (»poly«) synchronisierte Viewports (»panes«) parallel im Browser anzuzeigen. Panes können beliebig hinzugefügt und entfernt sowie mit zusätzlichen Geräte-Eigenschaften versehen werden (Options → Media/Emulation/Network). Dadurch lassen sich diverse Gerätetypen simulieren und in einem praktischen Überblick organisieren. Die angelegten Konstellation können in Workspaces gespeichert werden. Dadurch sind sie wiederbenutzbar und im Team teilbar.

Verschiedene Displaygrößen testen

Um das Verhalten einer Website auf Geräten verschiedener Displaygrößen zu testen, haben wir uns einen Polypane-Workspace angelegt, der typische Anwendungsfälle und kritische Zwischengrößen abbildet. Das Öffnen einer Website in diesem Workspace erlaubt es uns, das responsive Verhalten zu überprüfen. Beim Ausführen einer typischen Bewegung durch die Website in einem der Panes, erfolgt diese Bewegung auch in den anderen Panes. Sämtliche Scroll- und Klick-Events werden zwischen den Panes synchronisiert. Damit haben wir kritische Szenarien übersichtlich im Blick.

Screenshot eines Workspaces im Polypane-Browser
Unser Responsive-Webdesign-Workspace im Polypane-Browser

Wir empfehlen, Workspaces mit mehreren Panes auf großen Bildschirmen zu betrachten, da auf kleinen Displays Panes schnell aus dem sichtbaren Bereich von Polypane rutschen und damit der »Auf-einen-Blick«-Mehrwert verloren geht.

Unterschiedliche System-Einstellungen testen

Die Simulation von Geräteeigenschaften erlaubt es, nicht nur Displaygrößen verschiedener Art zu testen, sondern auch das Verhalten einer Website gegen gerätespezifische Eigenschaften und Einstellungen zu prüfen.

Über die Auswahl von »touch« für die Emulation-Option »Input mode« lässt sich bspw. das Inputverhalten von Touch-Geräten simulieren. Damit kann geprüft werden, ob Navigationselemente und andere Klickflächen mit diesen Geräten diesen Typs einwandfrei benutzt werden können.

Mit der Media-Option prefers-color-scheme kann eine Präferenz für ein helles oder dunkles Farbschema simuliert werden. Auf diese Weise kann geprüft werden, dass eine Website dem Farbschema wie gewünscht oder zumindest nicht fehlerhaft dargestellt wird.

Auf die gleiche Weise lässt sich für die Media-Option prefers-reduced-motion die Einstellung »reduce« simulieren. Damit kann geprüft werden, ob bspw. bewegungsintensive Animationen etc. nicht ausgeführt werden, wenn die Geräteeinstellungen dies ausdrücklich so vorgeben.

Screenshot von Device-Settings im Polypane-Browser
Über Gerätoptionen können in Polypane gerätspezifische Verhaltensweisen und Einstellungen simuliert werden

Unsere (aktuelle) Workspace-Konfiguration

Wir empfehlen, die Anzahl der Panes in Workspaces gering zu halten. Je mehr Panes parallel genutzt werden, desto langsamer wird Polypane, was die Arbeit mit dem Werkzeug deutlich beeinträchtigt.

Mit den folgenden Panes haben wir während der Entwicklung- und Testing-Phasen diverse relevante Szenarien übersichtlich im Blick, so dass wir auf eventuelle Probleme adäquat reagieren können. Wir evaluieren und aktualisieren unseren Workspace regelmäßig. U.a. wenn sich das Nutzungsverhalten hinsichtlich der Browsergrößen ändert.

Geschrieben von Konstantin Hanke

Benutzerbild

Konstantin arbeitet als Webentwickler bei kulturbanause. Seine Hauptaufgabe ist die technische Umsetzung von klaren, soliden und effizienten Webauftritten und Website-Komponenten. Darüber hinaus kümmert er sich um die Wartung, Optimierung und Weiterentwicklung von bestehenden Websites. Sein besonderes Interesse gilt der Idee von quelloffener, freier Software.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →