Vor kurzem hatten wir intern eine angeregte Diskussion darüber, ob das beliebte 960er-Grid in Zeiten des Responsive Designs überhaupt noch benötigt wird. Das Ergebnis möchte ich hier mit dir teilen.
Was ist das 960er-Grid-System?
Grid-Systeme dienen Designern als Raster, welches den Content-Bereich in Spalten einteilt und damit das Layout einer Webseite bestimmt. Das kann zum Beispiel so aussehen:
Schematische Darstellung des 960er Grids auf einer Webseite
Das 960er-Grid ist zu einer Zeit entstanden, als Screens noch eine relativ geringe Auflösung hatten – in den meisten Fällen eine Breite von 1024 Pixeln. Wird der Content innerhalb der 960-Pixel-Breite platziert, befindet er sich bei dieser Auflösung daher noch im sichtbaren Bereich. Auch für die Bedienelemente, wie beispielsweise die Scrollbar, ist noch ausreichend Platz.
Das 960er-Grid wird außerdem gerne verwendet, weil es eine 12-Spalten-Aufteilung ermöglicht. Durch sie ergeben sich diverse Content-Layout-Möglichkeiten, wie 2-spaltige, 3-spaltige und 4-spaltige Anordnungen.
Aber ist das 960er-Grid noch zeitgemäß? Warum überhaupt die Frage? Never change a running system, right?
Die 1024er-Auflösung ist heute längst nicht mehr so verbreitet. Einerseits verfügen die meisten Monitore heute über eine viel größere Auflösung. Andererseits dienen aber mobile Geräte mit kleineren Displays oft als primäres Internet-Medium. Eine starre Breite ist daher inzwischen nicht mehr nutzerfreundlich.
960er-Grid in Zeiten des Responsive Designs
Aufgrund der vielen verschiedenen Auflösungen und des massiven Anstiegs des mobilen Surfens mussten neue Technologien her. Eine dieser Entwicklungen war das Responsive Design.
Es werden heute zwar immer noch Gestaltungsraster verwendet, diese sind allerdings nicht mehr starr. Sie passen sich flexibel an die Größe des Bildschirms an.
Da der Smartphone-Bildschirm schmaler ist als Desktop-Bildschirme wird dort zwar derselbe Content präsentiert, aber neu arrangiert. Das zugrunde liegende Raster wird automatisch modifiziert – z.B. werden aus 12 Spalten am Desktop 2 Spalten auf dem Smartphone. Man definiert daher sogenannte Breakpoints. Das sind die Stellen, an denen das Grid (und damit auch der Content) umbrechen sollen, wenn sie von bestimmten Screengrößen aufgerufen werden.
Beim Responsive Design passt sich der Content flexibel an die Bildschirmbreite an.
Was ist die optimale Seitenbreite?
„Mit Responsive Design kann ich also die Website so breit machen, wie ich will, solange ich Breakpoints definiere?“
Technisch gesehen, ja. Aus Usability-Sicht rate ich allerdings davon ab. Aus Nutzertests wissen wir, dass Seiten, die die gesamte Breite ausnutzen, für unübersichtlich gehalten und häufig einzelne Elemente übersehen werden. Nutzer finden es anstrengend, wenn sie den Kopf wie beim Tennis hin und her bewegen müssen. Der Content-Bereich (mit Ausnahme von Bildern) sollte daher auf eine maximale Breite beschränkt werden – auch bei großen Screens.
Für Text gilt: Sowohl zu lange als auch zu kurze Zeilen wirken abschreckend. Bei einspaltigem Text in Schriftgröße 8 bis 11 sind 50-70 Zeichen pro Zeile der Richtwert.
Wird eine maximale Breite festgelegt, hilft das den Nutzern bei der Orientierung auf der Webseite und vereinfacht es ihnen, die Inhalte zu überschauen. Diese muss aber nicht bei 960px enden. Empfehlenswert und aktuell sehr beliebt sind 1200px.
Fazit: Eine maximale Pixel-Breite ist noch immer wichtig im Web-Design
Das 960er-Grid hat seinen Dienst getan – lange und gut – inzwischen ist es aber nicht mehr zeitgemäß. Die maximale Pixelbreite ist zwar immer noch wichtig für die Usability einer Seite, weil Texte gut lesbar sind und alle wichtigen Elemente im Blickfeld des Nutzers liegen. Aus technischer Sicht ist sie aber nicht mehr notwendig. Setze deshalb beim nächsten Redesign unbedingt auf Responsive Design und lege eine maximale Pixelbreite fest.
Also ich nutz noch das 960er Grid. Die meisten meiner Nutzer haben nämlich 1024er Auflösung im Browser. Hier hilft Google Analytics.
Guter Artikel, ich persönlich verwende in den meisten Fällen auch ein responsives Layout mit einer maximalen Breite von 1200px. So kann man die gängigen Devices berücksichtigen und trotzdem noch relativ flexibel sein.
Schöner Artikel! Guter Hinweis, eine maximale Seitenbreite auch im Responsive Design festzulegen. Ich denke der Tipp ist vor allem für Text wichtig. Bei Bildern bin ich der Meinung, das es hier wirkungsvoll sein kann, diese auch mal möglichst groß zu platzieren und aus dem Raster laufen zu lassen. Dazu habe ich hier ein paar Zeilen geschrieben: http://www.h2d2.de/de/blog/2018/ui-design-fuer-onlineshops-wie-sich-das-gestaltungsraster-auf-die-konversion-auswirkt/
Selbstverständlich max-width. Ergibt sich jedem webdesigner von selbst, wenn man die maximale Zeilenlänge zum angenehmen Lesen bedenkt.
Aber wieso immer responsive? Eine ordentliche Seite ist ohnehin liquid. Responsive kann man da äußerst sparsam einsetzen. Z. B. um Bandbreite für nicht benötigte Bildgrößen zu sparen.
Leider wird Responsive inzwischen viel zu inflationär eingesetzt.
Fängt man einmal an, derart brutal in den natürlichen Fluss der Elemente einzugreifen, dann kann (muss) man über lang oder kurz gleich Breakpoints für jeden einzelnen Pixel zu setzen.
Ich halte responsive zwar für einen echten Durchbruch, aber durch die neuen Möglichkeiten von CSS3 für viel zu riskant, damit unnötigerweise Faulheit und Gedankenlosigkeit von Webcodern zu fördern. Es stellt einfach eine viel zu große Verlockung dar, fundiertes Coding durch responsive Vergewaltigung zu übertönen.
Lieber Leser, vielen Dank für die Anregung zur Diskussion! Du hast natürlich recht: grundsätzlich ist zu unterscheiden zwischen den Begriffen „responsive“ und „liquid“. „Responsive“ ist ein Webseitentyp, „liquid“ eine Möglichkeit zu Layouten. In diesem Artikel ist der gängigere Oberbegriff „Responsive Design“ verwendet worden, der impliziert, dass ein flüssiges Layout zugrunde liegt, so wie es zum Beispiel auch hier definiert wird: https://www.dieproduktmacher.com/blog/responsive-fluid-adaptive-welche-unterschiede-gibt-es
Schöner Beitrag, hatte damals ähnliche Erfahrungen gemacht als ich meine Homepage aufgesetzt ahbe.