GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen

Responsive Design

Einleitung

Unter Responsive Design versteht man den Ansatz, dass sich eine Webseite an die Ausgabe- und Eingabebedingungen des aufrufenden Mediums anpasst, um ihre Wahrnehmung respektive Bedienung bestmöglich zu gewährleisten. Jedes Ausgabe- und Eingabeformat ist "gleichberechtigt": die Mobilansicht und alle weiteren Wiedergabeformen einer Webseite sollen wie die Desktopansicht Inhalte verständlich wiedergeben – und nicht vom Betreiber als Webseitenversionen zweiter Klasse mit abgespeckter Funktionalität nachrangig behandelt werden.

Beispiele für verschiedene Ausgabeformen und -bedingungen sind:

  • ein Webbrowser in Vollansicht auf einem großen Desktop-Bildschirm mit hoher Auflösung im Querformat
  • ein Webbrowser in einer kleineren Fensteransicht auf einem großen Desktop-Bildschirm mit hoher Auflösung im Querformat 
  • ein Tablet-Bildschirm
  • ein kleiner Smartphone-Bildschirm im Hochformatansicht
  • ein kleiner Smartphone-Bildschirm in Querformatansicht
  • ein noch kleinerer Bildschirm geringerer Auflösung eines älteren Smartphones
  • ein Fernseher, aus Entfernung von der Couch betrachtet
  • ein Schwarz-Weiß-Ausdruck der Webseite auf DIN-A4-Papier
  • eine bildschirmlose Ausgabe per Sprachausgabe
  • eine bildschirmlose Ausgabe per Braillezeile

Beispiele für verschiedene Eingabeformen und -bedingungen sind:

  • Maus- und Tastatureingabe am Desktop
  • Touchpad- und Tastatureingabe am Laptop
  • reine Tastatureingabe, welche z.B. für viele motorisch eingeschränkte und sehbehinderte Benutzer die einzige nutzbare Eingabemodalität ist
  • reine Touchbedienung auf Smartphones und Tablets mit kontextabhäniger Anzeige einer virtuellen Bildschirmtastatur
  • Multitouch-Bedienung auf Smartphones und Tablets, welche Eingabefähigkeiten wie Pinch-Zoom und -Drehungen ermöglicht, die in einer typischen Desktop-Umgebung nicht möglich sind
  • Spracheingabe

Webseiten können mit Media Queries die vom Webbrowser bzw. vom Benutzer geforderten, erwünschten oder technisch gegebenen Ausgabe- und Eingabebedingungen abfragen. Das GESIS-Web-Frontend-Framework nutzt Media Queries zur responsiven Darstellung und Bedienung von Webseiten.

Fallstudien zum responsive Design im GESIS-Web-Frontend-Framework

  • Grid-Layout:
    • Vierspaltige Content-Elemente werden auf großen, breiten Desktop-Bildschirmen nebeneinander angezeigt.
    • Auf kleinen Smartphone-Bildschirmen werden diese Spalten bei Querformatansicht in Zweierpaaren und bei Hochformatansicht einzeln untereinander angezeigt.
  • Megamenü (Widget für die Darstellung von und Navigation in hierarschisch organisierten Seitenbäumen):
    • Wird die Webseite über einen Computer aufgerufen, der über einen normalen Bildschirm (keinen Touchscreen) und eine Maus verfügt, dann präsentiert sich das Megamenü als horizontale Menüleiste (Desktop-Darstellung).
      In dieser Darstellung ist das Megamenü (u.a.) per Maus-Eingabe vollständig bedienbar. Maus-Eingaben bieten grundsätzlich die Hover-Funktion an. In der Megamenü-Desktop-Darstellung wird diese Funktion genutzt, um beim Hovern (Schweben) des Mauszeigers über einem Menüeintrag ein Untermenü-Pop-up erscheinen zu lassen. Hingegen löst ein Maus-Klick auf einen Menüeintrag eine Seitennavigation aus.
    • Smartphones haben keine Maus-Eingabe; stattdessen steht Touch-Eingabe zur Verfügung. Touch-Eingaben fehlt eine Hover-Funktion – Touchscreens können das Schweben/Hovern von Fingern über dem Bildschirm nicht registrieren. Bereits deshalb schließt sich auf Smartphones die Verwendung der Desktop-Darstellung für das Megamenü aus, da diese Darstellung eine Hover-Funktion zwecks vollständiger Megamenü-Bedienbarkeit voraussetzt.
      Desweiteren sind Smartphone-Bildschirme zu klein, um auf ihnen die in der Desktop-Darstellung verwendeten großen Untermenü-Pop-ups benutzerfreundlich anzuzeigen: Ein Pop-up mit vielen Einträgen würde vielfache Smartphone-Bildschirmgröße in Anspruch nehmen, wäre schwierig zu schließen und würde dadurch die weitere Interaktion mit der Webseite stark beeinträchtigen.
      Aus diesen Gründen präsentiert sich das Megamenü auf Smartphones in Touch-Darstellung: Anfangs wird lediglich ein Menübutton angezeigt, welcher durch Berührung (Touch) eine touch-optimierte Darstellung des obersten Menüinhaltes präsentiert. Die verschachtelten Untereinträge können dann selektiv über zusätzliche Buttons auf- und zugeblättert werden. Diese Buttons sind ausreichend groß dimensioniert, um sie trotz der prinzipbedingt groben Fingereingabe zielgenau bedienen zu können.
    • Tablets verfügen zwar über ausreichend große Bildschirme, um das Megamenü in seiner Desktop-Darstellung benutzerfreundlich visualisieren zu können. Bezüglich ihrer Eingabebedingungen sind sie jedoch mit Smartphones vergleichbar: Auch Tablets fehlt eine Hover-Funktion, und die unpräzise Touch-Eingabe erfordert angepasste Bedienelemente. Daher wird auf Tablets die Touch-Darstellung verwendet.
    • Laptops mit Touchscreen haben ausreichend große Bildschirme, um die Desktop-Darstellung zu ermöglichen; als "händische" Eingabemethoden stehen sowohl Touch- als auch Maus-Eingabe zur Verfügung. Daher stellt sich die Frage, ob das Megamenü in Touch- oder Desktop-Darstellung erscheinen soll:
      • Bei reiner Touch-Bedienung sollte wegen fehlender Hover-Funktion die Touch-Darstellung verwendet werden.
      • Bei reiner Maus-Bedienung wäre hingegen die Menüleisten-Darstellung die komfortabelste Darstellungsweise.
      Welche Darstellungsart ist nun die bessere? Diese Frage kann nicht pauschal beantwortet werden. Ein Touchscreen-Laptop-Benutzer könnte je nach Situation die eine oder andere Darstellung präferieren oder benötigen.
      Da die Touch-Darstellung immer auch per Maus bedienbar ist (Mausklick und Touch werden von Browsern standardmäßig identisch behandelt), und andererseits die Desktop-Ansicht nicht mit Touch-Eingabe bedient werden kann (der Touch-Eingabe fehlt eine Hover-Funktion), wird als sicherer Fallback das Megamenü auf Touchscreen-Laptops immer in Touch-Darstellung angezeigt.
    • In allen Darstellungsformen kann das Megamenü immer auch per Tastatur bedient werden. Mithilfe der Tab-, Escape-, Space-, Return- und Tastaturpfeiltasten ist das Megamenü vollständig bedienbar – unter anderem auch, um Barrierefreiheit zu gewährleisten.

Best Practices

Überprüfung des Responsive Designs mit verschiedenen Browsern und Geräten

Es gibt eine Vielzahl von Browsern und Geräten, mit denen Webseiten aufgerufen werden. HTML, JavaScript und CSS sind umfangreiche Spezfikationen, die von Browsern unterschiedlich implementiert werden. Diese Spezfikationen entwickeln sich ständig weiter; das hat zur Folge, dass insbesondere neuere Funktionen in verschiedenen Browsern fehlerhaft, erst teilweise oder gar nicht implementiert sind. Dadurch ergeben sich häufig je Browser unterschiedliche Darstellungen derselben Webseite

Zur Gewährleistung der korrekten Darstellung und Bedienung einer Webseite sollte diese mit verschiedenen Browsern und Geräten überprüft werden. Mit folgender Auswahl (Stand 2022) wird der Großteil weltweit genutzter Browser und Geräte abgedeckt:

  • Windows-/Linux-Computer (Windows/Linux)
    • Chrome
    • Firefox
    • Edge
  • Apple-Geräte
    • iMac/Macbook
      • Safari
      • Chrome
    • iPhone
      • Safari
    • iPad
      • Safari
  • Android-Smartphones
    • Chrome
    • Firefox

Anmerkung: Auf Apple-iOS-Geräten (iPhones und iPads) sind andere Browser wie bspw. Chrome und Firefox dazu gezwungen, die Rendering-Engine von Safari zu verwenden. Daher genügt auf diesen Geräten das Testen mit Safari – andere Browser zeigen Webseiten identisch zu Safari an.

Aufbau von Testseiten und Sammlung wichtigster Produktivseiten

Webangebote (Webportale, -dienste, -applikation...) bestehen aus wiederkehrenden Layouts und Komponenten/Widgets. Um diese Layouts und Komponenten schnell, pragmatisch und bei Bedarf auf korrekte Darstellung und funktionierendes responsive Design überprüfen zu können, lohnt sich der Aufbau eines Testseitenbereichs.

Diese Testseiten werden mit typischen Layouts und Komponenten in ihren verschiedenen Ausgestaltungen und Variationen befüllt. Zusätzlich helfen auf diesen Seiten hinterlegte Anmerkungen, Listen mit Prüfschritten und Bedienungsszenarien, einen geordneten manuellen End-to-End-Test (E2E) durchzuführen.

Dieser Testbereich kann dann mit verschiedenen Browsern und Geräten aufgerufen, betrachtet und bedient werden, um Darstellung und Funktionalität zu überprüfen. Insbesondere bei anstehenden technischen Änderungen und Aktualisierungen der zugrundeliegenden Frameworks, Bibliotheken und Eigenentwicklungen erlaubt dieser Testseitenbereich, zu überprüfen, ob alles weiterhin richtig funktioniert und sich keine Regressionen eingeschlichen haben.

Mit der Zeit kann dieser Bereich auch um solche Layout- und Komponentenkonfigurationen und Spezialfälle anwachsen, die fehlerhafte Darstellungen hatten.

Desweiteren ist dieser Testbereich für neu hinzukommende Entwickler und Content-Zuständige nützlich, um sich mit den Möglichkeiten und Besonderheiten des Webangebots vertraut zu machen.