Vergesst Bildschirmauflösungen!

Oft wird in Artikeln und Diskussionen zum Thema Responsive Webdesign die Frage gestellt, welche Auflösungen, Breiten oder Geräte ein Layout bedienen solle. Man kann nicht oft genug betonen, dass diese Herangehensweise von einem falschen Verständnis der Technik zeugt. Daher: Vergesst Bildschirmauflösungen! (Vergesst auch Gerätetypen.)

Jeder kennt das Spiel Schere, Stein, Papier. Übertragen auf Responsive Webdesign müsste es eine Regel namens „Layout übertrumpft Auflösung“ geben. Denn es geht weder darum, eine Seite „für das iPad“ noch „für 768 Pixel Breite“ zu optimieren – das sind Relikte aus den Anfangstagen unserer jungen Zunft, in denen wir (viel zu) viel aus der artverwandten Print-Ecke übernommen haben.

Frage nicht, was das Display hergibt …

Ich glaube, dass jedes responsive Layout individuell umgesetzt werden sollte. Der entscheidende Aspekt dieser Technik sind die „breaking points“, also die Breiten, ab denen ein von Natur aus flexibles Basis-Layout nicht mehr vernünftig lesbar ist und mit Media queries korrigiert bzw. umgestellt werden muss.

Diese Punkte sollten aber nicht durch bestimmte Geräte und ihre Auflösungen definiert werden, sondern durch Layout und Design sowie die Frage, in welcher Auflösung sie funktionieren. Nebenbei macht dieser Ansatz ein bestimmtes Design auch zukunftssicherer in Bezug auf neu erscheinende Geräte.

… frage, wonach das Layout verlangt

Konkret prüft man also (unabhängig vom Gerät), innerhalb welcher Bereiche der Breite ein bestimmtes Layout „funktioniert“ und passt es außerhalb dieser Bereiche an. Das ist der entscheidende Unterschied dieser Technik zur vertrauten Vorgehensweise. Das wird noch klarer, wenn man sich des Ansatzes „mobile first“ bedient. Dann lautet die Frage auch nicht mehr, ab welcher Viewport-Breite ein Layout nicht mehr funktioniert – dann geht es darum, ab welcher Breite bestimmte Aspekte des Layouts und Designs erst möglich oder sinnvoll sind.

Eine Einschränkung in puncto Geräte gibt es, aber auch die sollte unabhängig von der Auflösung gesehen werden. Die meisten kleinen Displays sind heutzutage Touchscreens, für die man das Design durchaus anpassen sollte – in Form größerer Buttons und anders gestalteter Navigationselemente etwa.

Responsive Web Design ist also idealerweise quasi Progressive Enhancement für Layouts, ähnlich dem Ansatz, den Modernizr nutzt: Entscheidend ist nicht, welcher Browser eine Seite anfordert; entscheidend ist, was in diesem Browser möglich ist. Der gemeinsame Vorteil dieser Ansätze ist, dass sie uns unabhängig von Dingen machen, die wir ohnehin nicht hinreichend zuverlässig vorhersagen können – beispielsweise die Bildschirmauflösungen, mit denen unsere Webseiten betrachtet werden.