molily: Twitter Bootstrap CSS-Debugging (Verschiebung)

Beitrag lesen

Hallo,

Es teilt in Geräteklassen ein (Phone, Tablet, Desktop, Desktop).

Ach was. Das muss jedes fertig einsetzbare Responsive-Grid-Framework tun: Breakpoints vordefinieren. Alles andere ist kein »Framework«, sondern ein DIY-Baukasten. Das ist Bootstrap AUCH.

Wenn einem diese nicht zusagen, sollte man Bootstrap nehmen und im LESS-Code die Breakpoints und Grid-Schrittweite anpassen. Das sind jeweils Variablen.

Wenn man responsive Design vernünftig macht, setzt man Breakpoints aber nicht nach irgendwelchen gerade aktuellen Geräten, sondern entsprechend seinen Inhalten.

Das wird von einflussreichen Personen so vertreten, ich halte es aber für Quatsch. Es sind viele Faktoren zu beachten. Es ist nicht sinnvoll, Breakpoints rein nach den Inhalten zu setzen und die verwendeten Geräte außer Acht zu lassen. Es ist genauso unsinnig, es umgekehrt zu machen.

Responsive Design macht man, weil es eine Vielfalt von Geräten gibt. Trotzdem gibt es einflussreiche Geräteklassen, die sich auch auf die Viewport-Verteilung auswirken. 320 CSS-Pixel als Viewportbreite auf Mobilgeräten bspw. ist auf vielen Geräten seit über 6 Jahren konstant, es ist nur die Device-Pixel-Ratio gestiegen.

Würde man eine Statistik machen, so ergäbe sich eine Kurve, aber auch sichtbare »Treppenstufen« (vgl. meine Erhebung von 2006). Die Breakpoints müssen sich nicht genau danach richten, sie können auch irgendwo dazwischen stehen, klar. Aber man sollte die Viewportgrößen der wichtigsten Geräte im Auge behalten.

Eine Website wird immer an den aktuellen Markt angepasst, und das ist gut so, schließlich soll sie in den heutigen Browsern/Geräten gut funktionieren. Kein Responsive Design wird in 3-4 Jahren noch gleich gut funktionieren, selbst wenn sich die Breakpoints nach dem Inhalt richten. Sowieso wird keine Website 3-4 Jahre inhaltlich gleich bleiben.

Mathias