Kürzlich wurde ich  gefragt, was das denn sei: Breakpoints?
Das sind genau die Stellen, an denen sich das Layout einer responsiven Webseite ändert, antwortete ich. Sichtbar wird das, wenn man das Browserfenster in der Größe verändert und Elemente der Webseite an einer anderen Position erscheinen oder wenn aus Text-Links plötzlich kleine Icons werden.

Anschließend wurde ich gefragt, „welche Breakpoints“ ich denn genau kennen würde.
Gängige Praxis im Webdesign ist immer noch, dass man durch (möglichst viele) Media-Queries-Abfragen versucht, (möglichst viele) User an möglichst vielen Endgeräten zu erreichen und ihnen hierfür die jeweils optimierte Version anzubieten. Bei einigen Webdesignern führt diese Praxis zu bis zu 20 verschiedenen Abfragen!

Bei diesen Abfragen orientiert man sich an den unterschiedlichen Abmaßen, den Auflösungen und der Orientation (Hoch bzw. Querformat) von iPhone und iPad, kleineren Tablets anderer Anbieter, Laptops und internetfähigen TVs.
Im Klartext heißt das, mit Hilfe der Media-Queries verschiedene Versionen mit Breakpoints bei

• 320 px,
• 480 px,
• 600 px,
• 768 px,
• 1024 px,
• 1200 px und eventuell noch bei
• 1750 px

zu erstellen. Jeder merkt schon beim Mitlesen: Das sind aber viele! Und trotzdem fehlen welche! Rein theoretisch kann nämlich jede beliebige Stelle im Layout ein Breakpoint sein und zusätzlich gibt es noch verschiedene Gestaltungsansätze à la „Mobile First“ oder „Content First“ bzw. „Graceful Degradation“ und „Progressive Enhancement“.

Fazit

Für mich persönlich ist und bleibt der Inhalt „König“ und nur dieser sollte maßgeblich bestimmen, wann und wo Breakpoints eingesetzt werden, wobei einige, zielgerichtete MQ-Abfragen erlaubt sein und ein flexibles Layout (in % oder em) angestrebt werden sollte. Einen sehr interessanten Ansatz hierzu verfolgt der Designer David Hellmann in seinem Beitrag „CSS Media Queries: Das Problem mit fixen Breakpoints„. Leider habe ich mich bisher noch nicht viel mit Sass/SCSS beschäftigt, bin nun aber echt „angefixt“: Da ich u.a. über PHP-Kenntnisse verfüge, bin ich natürlich von der Struktur und den Einsatzmöglichkeiten von Sass begeistert! Das wird sicherlich noch den künftigen Einsatz von HTML und CSS entscheidend erweitern und bereichern!

Was meint Ihr dazu? Wie arbeitet Ihr selber und was haltet Ihr von Davids Alternative, den CSS-Code direkt ans Element zu binden? Ich bin gespannt auf Eure Ideen und Gedanken!